refine tinymce

Author: PanJiaChen

src/components/Tinymce/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class='tinymce-container editor-container'>
-    <textarea class='tinymce-textarea' :id="id"></textarea>
+    <textarea class='tinymce-textarea' :id="tinymceId"></textarea>
     <div class="editor-custom-btn-container">
      <editorImage  color="#20a0ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
       </div>
@@ -15,8 +15,7 @@ export default {
   components: { editorImage },
   props: {
     id: {
-      type: String,
-      default: 'tinymceEditor'
+      type: String
     },
     value: {
       type: String,
@@ -29,12 +28,6 @@ export default {
         return ['removeformat undo redo |  bullist numlist | outdent indent | forecolor | fullscreen code', 'bold italic blockquote | h2 p  media link | alignleft aligncenter alignright']
       }
     },
-    data() {
-      return {
-        hasChange: false,
-        hasInit: false
-      }
-    },
     menubar: {
       default: ''
     },
@@ -44,6 +37,13 @@ export default {
       default: 360
     }
   },
+  data() {
+    return {
+      hasChange: false,
+      hasInit: false,
+      tinymceId: this.id || 'vue-tinymce-' + +new Date()
+    }
+  },
   watch: {
     value(val) {
       if (!this.hasChange && this.hasInit) {
@@ -54,7 +54,7 @@ export default {
   mounted() {
     const _this = this
     window.tinymce.init({
-      selector: `#${this.id}`,
+      selector: `#${this.tinymceId}`,
       height: this.height,
       body_class: 'panel-body ',
       object_resizing: false,
@@ -153,12 +153,12 @@ export default {
     imageSuccessCBK(arr) {
       const _this = this
       arr.forEach(v => {
-        window.tinymce.get(_this.id).insertContent(`<img class="wscnph" src="${v.url}" >`)
+        window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
       })
     }
   },
   destroyed() {
-    window.tinymce.get(this.id).destroy()
+    window.tinymce.get(this.tinymceId).destroy()
   }
 }
 </script>

src/views/components/tinymce.vue

@@ -2,7 +2,7 @@
   <div class="components-container">
     <code>公司做的后台主要是一个cms系统，公司也是以自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了Tinymce<a target='_blank' href='https://segmentfault.com/a/1190000009762198#articleHeader13'> 相关文章 </a> <a target='_blank' href='https://www.tinymce.com/'> 官网 </a></code>
     <div>
-      <tinymce :height=200 ref="editor" v-model="content"></tinymce>
+      <tinymce :height='200' v-model="content"></tinymce>
     </div>
     <div class='editor-content' v-html='content'></div>
   </div>