lw-cdp-ui 1.0.39 → 1.0.40

package/dist/components/lwEditor/index.vue

@@ -1,134 +1,53 @@
-
 <template>
-  <div class="sceditor">
-    <Editor v-model="contentValue"
-            :init="init"
-            :disabled="disabled"
-            :placeholder="placeholder"
-            @onClick="onClick" />
+  <div>
+    <QuillEditor
+      v-model="content"
+      :options="editorOptions"
+    />
   </div>
 </template>
 
 <script>
-import Editor from '@tinymce/tinymce-vue'
-import tinymce from 'tinymce/tinymce'
-import 'tinymce/themes/silver'
-import 'tinymce/icons/default'
-import 'tinymce/models/dom'
-
-// 引入编辑器插件
-import 'tinymce/plugins/code'  //编辑源码
-import 'tinymce/plugins/image'  //插入编辑图片
-import 'tinymce/plugins/media'  //插入视频
-import 'tinymce/plugins/link'  //超链接
-import 'tinymce/plugins/preview'//预览
-import 'tinymce/plugins/template'//模板
-import 'tinymce/plugins/table'  //表格
-import 'tinymce/plugins/pagebreak'  //分页
-import 'tinymce/plugins/lists'  //列
-import 'tinymce/plugins/advlist'  //列
-import 'tinymce/plugins/quickbars'  //快速工具条
-import 'tinymce/plugins/fullscreen'  //全屏
+import { QuillEditor } from '@vueup/vue-quill'
+import '@vueup/vue-quill/dist/vue-quill.snow.css'
 
 export default {
+  name: 'QuillEditorComponent',
   components: {
-    Editor
+    QuillEditor,
   },
   props: {
     modelValue: {
       type: String,
-      default: ""
-    },
-    placeholder: {
-      type: String,
-      default: ""
-    },
-    height: {
-      type: Number,
-      default: 300,
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    plugins: {
-      type: [String, Array],
-      default: 'code image media link preview table quickbars template pagebreak lists advlist fullscreen'
+      required: true,
     },
-    toolbar: {
-      type: [String, Array],
-      default: 'fullscreen undo redo | forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
-					alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
-					image media table template preview | code selectall'
+    options: {
+      type: Object,
+      default: () => ({}),
     },
-    templates: {
-      type: Array,
-      default: () => []
-    }
   },
   data() {
     return {
-      init: {
-        language_url: 'tinymce/langs/zh_CN.js',
-        language: 'zh_CN',
-        skin_url: 'tinymce/skins/ui/oxide',
-        content_css: "tinymce/skins/content/default/content.css",
-        menubar: false,
-        statusbar: true,
-        plugins: this.plugins,
-        toolbar: this.toolbar,
-        font_size_formats: '12px 14px 16px 18px 22px 24px 36px 72px',
-        height: this.height,
-        placeholder: this.placeholder,
-        branding: false,
-        resize: true,
-        elementpath: true,
-        content_style: "",
-        templates: this.templates,
-        quickbars_selection_toolbar: 'forecolor backcolor bold italic underline strikethrough link',
-        quickbars_image_toolbar: 'alignleft aligncenter alignright',
-        quickbars_insert_toolbar: false,
-        image_caption: true,
-        image_advtab: true,
-        images_upload_handler: function (blobInfo) {
-          return new Promise((resolve, reject) => {
-            const data = new FormData();
-            data.append("file", blobInfo.blob(), blobInfo.filename());
-            this.$api.auth.upload(data).then((res) => {
-              resolve(`${res.data.loca}${res.data.path}`)
-            }).catch(() => {
-              reject("Image upload failed")
-            })
-          })
-        },
-        setup: function (editor) {
-          editor.on('init', function () {
-            this.getBody().style.fontSize = '14px';
-          })
-
-        }
-      },
-      contentValue: this.modelValue
+      content: this.modelValue,
     }
   },
   watch: {
-    modelValue(val) {
-      this.contentValue = val
+    modelValue(newValue) {
+      if (newValue !== this.content) {
+        this.content = newValue
+      }
+    },
+    content(newValue) {
+      this.$emit('update:modelValue', newValue)
     },
-    contentValue(val) {
-      this.$emit('update:modelValue', val);
-    }
   },
-  mounted() {
-    tinymce.init({})
+  computed: {
+    editorOptions() {
+      return {
+        theme: 'snow',
+        ...this.options,
+      }
+    },
   },
-  methods: {
-    onClick(e) {
-      this.$emit('onClick', e, tinymce)
-    }
-  }
 }
 </script>
-
-<style>
-</style>