Vue在diolog中使用ckeditor

大多数能够找到的都是在mounted页面加载后让富文本替换文本框

 <textarea id="editor" rows="10" cols="80"></textarea>

  mounted() {
        CKEDITOR.replace("editor", { cloudServices_tokenUrl: 'http://localhost:9527',height: "300px", width: "100%", toolbar: "Full"});
            var editor = CKEDITOR.instances.editor2; 
 }

在diolog中设置 mouted中报错，找不到getEditor 查了半天找不到结果，猜想是此时尚未加载完让富文本替换文本框使得报错，

于是改为等页面全部渲染完执行这些

this.$nextTick(function() {
      
            CKEDITOR.replace("editor", { cloudServices_tokenUrl: 'http://localhost:9527',height: "300px", width: "100%", toolbar: "Full"});
            var editor = CKEDITOR.instances.editor2; 
        }    
           
          });

结果在diolog中显示出富文本编辑器

---------------------------------------------------------------

新增编辑时发现重复进入会报editor已经存在

this.$nextTick(function() {
       if (!CKEDITOR.instances['editor']) {
            CKEDITOR.replace("editor", { cloudServices_tokenUrl: 'http://localhost:9527',height: "300px", width: "100%", toolbar: "Full"});
            var editor = CKEDITOR.instances.editor2; 
        }    
            this.formReset('')
          });

同时在新增时清除富文本内容

formReset(text){
    CKEDITOR.instances.editor.setData(text);
    // ckDemo为 控件id属性值
    //重置内容
    },

编辑时将html（this.form.text）代码放到富文本里

this.$nextTick(function() {
        if (!CKEDITOR.instances['editor']) {
            CKEDITOR.replace("editor", { cloudServices_tokenUrl: 'http://localhost:9527',height: "300px", width: "100%", toolbar: "Full"});
            var editor = CKEDITOR.instances.editor2; 
        }   
          this.formReset(this.form.text)
        });

这样新增时打开页面清除内容。编辑时赋值html内容。

Vue在diolog中使用ckeditor

猜你喜欢