页面修改

src/components/global/UE.vue

 <template>
   <div>
-    <script type="text/plain" id="editor"></script>
+    <script type="text/plain" :id="id"></script>
     <!-- 选择图片 -->
     <el-dialog title="选择文件" :visible.sync="changeState" width="1240px">
       <ChooseImg @SelectId="SelectId"></ChooseImg>
@@ -14,10 +14,13 @@
       ChooseImg
     },
     name: 'UE',
-    data () {
+    data() {
       return {
+        id: 'editor' + (Math.floor((Math.random() * 10000) + 1)),
         editor: null,
         changeState:false,
+        isInputChange: false,
+        tempContent: this.defaultMsg
       }
     },
     props: {
@@ -29,45 +32,61 @@
       },
     },
     mounted() {
-      
+      this.loadUe();
+    },
+    watch: {
+      defaultMsg(newVal, oldVal) {
+        if (!this.isInputChange && newVal) {
+          if (this.editor && this.editor.isReady === 1) {
+            this.editor.setContent(newVal);
+          } else {
+            this.tempContent = newVal;
+          }
+        }
+        if (this.isInputChange) {
+          this.isInputChange = false;
+        }
+      },
     },
     methods: {
-      InitData(){
-        const _this = this;
-        this.editor = UE.getEditor('editor', this.config); // 初始化UE
-        this.editor.addListener("ready", function () {
-          _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
-        });
-        this.loadUe();
+      InitData() {
+
       },
       SelectId(e) {
         if (e) {
           let html = '';
-              this.ue = UE.getEditor('editor');
-              html= '<img src="' + this.domainManager().ImageUrl+e.url + '" style="max-width: 100%;">';
+          this.ue = UE.getEditor(this.id);
+          html = '<img src="' + this.domainManager().ImageUrl + e.url + '" style="max-width: 100%;">';
           this.ue.execCommand('inserthtml', html);
         }
-          this.changeState=false;
+        this.isInputChange = false;
       },
       getUEContent() { // 获取内容方法
         return this.editor.getContent()
       },
       loadUe() {
-        const vm = this;
-        this.ue = UE.getEditor('editor');
-        // this.ue.addListener('ready', editor => {
-        //     if (this.tempContent) {
-        //         this.ue.setContent(this.tempContent);
-        //     }
-        // });
-        // this.ue.addListener('keyup', editor => {
-        //     this.isInputChange = true;
-        //     this.$emit('input', this.ue.getContent());
-        // });
-        // this.ue.addListener('contentChange', editor => {
-        //     this.isInputChange = true;
-        //     this.$emit('input', this.ue.getContent());
-        // });
+        const _this = this;
+        this.editor = UE.getEditor(this.id, this.config); // 初始化UE
+        this.editor.addListener("ready", function () {
+          _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
+        });
+
+        this.editor.addListener('ready', editor => {
+          if (_this.tempContent) {
+            _this.editor.setContent(_this.tempContent);
+          }
+        });
+        this.editor.addListener('keyup', editor => {
+          this.isInputChange = false;
+          var str = _this.editor.getContent();
+          _this.$emit('input', _this.editor.getContent());
+        });
+        this.editor.addListener('contentChange', editor => {
+          this.isInputChange = false;
+          var str = _this.editor.getContent();
+          _this.$emit('input', _this.editor.getContent());
+        });
+
         let self = this;
         UE.registerUI('appinsertimage', (editor, uiName) => {
           return new UE.ui.Button({
@@ -77,7 +96,7 @@
             cssRules: 'background-position: -381px 0px;',
             onclick() {
               self.ue = editor
-                    vm.changeState = true;
+              _this.isInputChange = true;
             },
           });
         });
@@ -88,4 +107,5 @@
     },
 
   }
+
 </script>

src/components/sallCenter/plugin/image-text.vue

@@ -2,15 +2,18 @@
   .diy-image-text {
     width: 100%;
     height: 500px;
-        overflow:hidden;
+    overflow: hidden;
     overflow-y: auto;
   }
-    .bb{
+
+  .bb {
     visibility: hidden;
   }
-    .classA{
+
+  .classA {
     visibility: visible;
   }
+
 </style>
 <template>
   <div :class="{'active':imageData.isCked}">
@@ -25,12 +28,12 @@
     <div class="diy-modal">
       <div class="diy-component-preview">
         <div class="diy-image-text">
-            <div v-if="data.content" v-html="jiance"></div>
+          <div v-if="data.content" v-html="data.content"></div>
           <div v-else flex="main:center" style="line-height: 500px;color: rgb(173, 177, 184);">图文详情</div>
         </div>
       </div>
       <div class="diy-component-edit bb" :class="{'classA':imageData.isCked}">
-        <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
+        <UE :defaultMsg="defaultMsg" :config="config" ref="ue" @input="input"></UE>
       </div>
     </div>
   </div>
@@ -50,11 +53,10 @@
           initialFrameWidth: null,
           initialFrameHeight: 350,
         },
-        content:''
+        content: ''
       };
     },
-    created() {
-    },
+    created() {},
     methods: {
       //向父组件传值 并调用排序
       resetSord(IsUp) {
@@ -64,14 +66,21 @@
       delPlugin() {
         this.$emit('comDelPlugin', this.index);
       },
+      input(obj) {
+        this.data.content = obj
       },
-    computed: {
     },
+    computed: {},
     mounted() {
       this.$refs.ue.InitData();
     },
-    watch:{
-
+    watch: {
+      defaultMsg: {
+        handler(newVal, oldVal) {
+          console.log(newVal);
+        },
+        deep: true
+      }
     }
   };