Vue在diolog中使用ckeditor

小编 2026-06-05 阅读:1824 评论:0

大多数能够找到的都是在mounted页面加载后让富文本替换文本框 <textarea id=\"editor\" rows=\"10\" cols=\"80\"></textarea...

大多数能够找到的都是在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内容。