fx-platform-ui 0.0.13-alpha5 → 0.0.13-alpha6

package/packages/components/editor/src/index.vue

@@ -1,17 +1,84 @@
 <template>
   <div class="fx-editor">
-   123
+    <editor v-model="modelValue" :init="init" :disabled="disabled"></editor>
   </div>
 </template>
 
 <script lang="ts" setup>
+import { onMounted, watch, ref } from 'vue'
+//在js中引入所需的主题和组件
+import tinymce from 'tinymce/tinymce'
+import 'tinymce/skins/content/default/content.css'
+import Editor from '@tinymce/tinymce-vue'
+import 'tinymce/themes/silver'
+import 'tinymce/themes/silver/theme'
+import 'tinymce/icons/default' //引入编辑器图标icon，不引入则不显示对应图标
+import 'tinymce/models/dom' // 这里是个坑 一定要引入
+
+//在TinyMce.vue中接着引入相关插件
+import 'tinymce/icons/default/icons'
+import 'tinymce/plugins/image' // 插入上传图片插件
+import 'tinymce/plugins/media' // 插入视频插件
+import 'tinymce/plugins/table' // 插入表格插件
+import 'tinymce/plugins/lists' // 列表插件
+import 'tinymce/plugins/wordcount' // 字数统计插件
+import 'tinymce/plugins/code' // 源码
+import 'tinymce/plugins/fullscreen' //全屏
+import 'tinymce/plugins/pagebreak' //插入分页符
+import 'tinymce/plugins/codesample'
+import 'tinymce/plugins/searchreplace'
+import 'tinymce/plugins/link'
+import 'tinymce/plugins/autolink'
+import 'tinymce/plugins/anchor'
+
+import { platEditorProps } from './plat-editor-props'
+import { platEditorEmits } from './plat-editor-emits'
+import { useEditorState } from './hook'
 defineOptions({
   name: 'PlEditor'
 })
+const props = defineProps(platEditorProps)
+const emit = defineEmits(platEditorEmits)
+
+const { init, modelValue } = useEditorState(props)
+const editorBorder = ref('1px solid #d9d9d9')
+
+watch(
+  () => modelValue.value,
+  (val) => {
+    emit('update:value', val)
+    emit('change', val)
+  }
+)
 
+// 添加红色边框
+const addValidate = (border = '1px solid #ff4d4f') => {
+  editorBorder.value = border
+}
+
+// 取消红色边框
+const removeValidate = (border = '1px solid #d9d9d9') => {
+  editorBorder.value = border
+}
+
+const instance = {
+  ...props,
+  addValidate,
+  removeValidate
+}
+
+defineExpose(instance)
+
+//在onMounted中初始化编辑器
+onMounted(() => {
+  tinymce.init({})
+})
 </script>
 <style lang="less" scoped>
-
+//:deep(.tox-tinymce) {
+//  border: v-bind(editorBorder);
+//  border-radius: 2px;
+//}
 :deep(.tox-tinymce-aux) {
   z-index: 1000;
 }