444

src/views/components/common/myEditor.vue

 <template>
   <div>
     <a-row>
-      <textarea name="" :id="id"></textarea>
+      <textarea name="" :id="id" class="tinymce-textarea"></textarea>
       <!-- <a-col :span="24" style="line-height: 1.5;">
         <span>当前字数：{{tinymceWordCount}}</span>
       </a-col> -->
@@ -16,6 +16,7 @@ export default {
     return {
       tinymceWordCount: 0,
       hasChange: false,
+      hasInit: false,
       fullscreen: false,
     };
   },
@@ -34,12 +35,11 @@ export default {
     },
   },
   created () {
-    console.log(window.tinymce.get(this.id), 'created', this.id)
+
   },
   methods: {
     initTinymce () {
       const _this = this
-      tinymce.remove(`#${_this.id}`)
       tinymce.init({
         selector: `#${_this.id}`,
         fontsize_formats: '12px 14px 16px 18px 24px 36px 48px',
@@ -51,15 +51,17 @@ export default {
         // 隐藏底部状态栏
         statusbar: false,
         height: 600,
-        plugins: 'code advlist autolink link image lists preview table wordcount',
-        toolbar: `undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | image | wordcount`,
-        //| styleselect | fontsizeselect fontselect | table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol
+        plugins: 'code advlist autolink link image lists preview wordcount', //table 
+        toolbar: `undo redo | styleselect | fontsizeselect fontselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | image | wordcount`,
+        //| table tabledelete | tableprops tablerowprops tablecellprops | tableinsertrowbefore tableinsertrowafter tabledeleterow | tableinsertcolbefore tableinsertcolafter tabledeletecol
         // 初始化完成回调
         init_instance_callback: (editor) => {
           if (_this.value) {
             editor.setContent(_this.value)
           }
+          _this.hasInit = true
           editor.on('NodeChange Change KeyUp SetContent', () => {
+            this.hasChange = true
             this.$emit('input', editor.getContent())
           })
         },
@@ -116,17 +118,13 @@ export default {
   },
   watch: {
     value (val) {
-      console.log(window.tinymce.get(this.id), 'watch', this.id)
-      if (!!val && !this.hasChange) {
+      if (!!val && !this.hasChange && this.hasInit) {
         this.$nextTick(() => {
           this.hasChange = true
-          const editor = window.tinymce.get(this.id)
-          if (editor) {
-            editor.setContent(val)
-          }
+          window.tinymce.get(this.id).setContent(val)
         })
       }
-    },
+    }
   },
   mounted () {
     this.initTinymce()

src/views/report/talent/components/talentEdit.vue

@@ -374,7 +374,7 @@
         <a-row type="flex" class="row_center">
           <a-col :span="24" class="bg-gray">
             <a-form-model-item prop="technicalSkill" :rules="{ required: true, message: '*', trigger: 'blur',}">
-              <my-editor v-model="formData.technicalSkill" id="my_technicalSkill" />
+              <my-editor v-model="formData.technicalSkill" id="my_technicalSkill" :key="editorKeys.technicalSkill" />
             </a-form-model-item>
           </a-col>
         </a-row>
@@ -398,7 +398,7 @@
         <a-row type="flex" class="row_center">
           <a-col :span="24" class="bg-gray">
             <a-form-model-item prop="qualityTarget" :rules="{ required: true, message: '*', trigger: 'blur',}">
-              <my-editor v-model="formData.qualityTarget" id="my_qualityTarget" />
+              <my-editor v-model="formData.qualityTarget" id="my_qualityTarget" :key="editorKeys.qualityTarget" />
             </a-form-model-item>
           </a-col>
         </a-row>
@@ -412,7 +412,7 @@
         <a-row type="flex" class="row_center">
           <a-col :span="24" class="bg-gray">
             <a-form-model-item prop="researchCondition" :rules="{ required: true, message: '*', trigger: 'blur',}">
-              <my-editor v-model="formData.researchCondition" id="my_researchCondition" />
+              <my-editor v-model="formData.researchCondition" id="my_researchCondition" :key="editorKeys.researchCondition" />
             </a-form-model-item>
           </a-col>
         </a-row>
@@ -426,7 +426,7 @@
         <a-row type="flex" class="row_center">
           <a-col :span="24" class="bg-gray">
             <a-form-model-item prop="researchProgress" :rules="{ required: true, message: '*', trigger: 'blur',}">
-              <my-editor v-model="formData.researchProgress" id="my_researchProgress" />
+              <my-editor v-model="formData.researchProgress" id="my_researchProgress" :key="editorKeys.researchProgress" />
             </a-form-model-item>
           </a-col>
         </a-row>
@@ -559,6 +559,12 @@ export default {
   },
   data () {
     return {
+      editorKeys: {
+        technicalSkill: 0,
+        qualityTarget: 0,
+        researchCondition: 0,
+        researchProgress: 0,
+      },
       formData: {
         id: null,
         talentCategory: null,
@@ -739,6 +745,14 @@ export default {
       }
     },
     submit (step, next) {
+      if (step === 1) {
+        this.editorKeys.technicalSkill += 1
+      }
+      if (step === 2) {
+        this.editorKeys.qualityTarget += 1
+        this.editorKeys.researchCondition += 1
+        this.editorKeys.researchProgress += 1
+      }
       if (this.checkInfo(step)) {
         this.$refs.form.validate(valid => {
           if (valid) {