Vue在diolog中使用ckeditor

￡神魔★判官ぃ 2022-04-03 10:00 305阅读 0赞

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

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内容。