wangEditor Uncaught (in promise) Error: 初始化节点已存在编辑器实例,无法重复创建编辑

使用wangEditor报错如下:
Uncaught (in promise) Error: 初始化节点已存在编辑器实例,无法重复创建编辑
在这里插入图片描述
原因是: 重复创建了编辑器的原因。
我的项目中存在新增和修改两次弹窗,故而重复创建了编译器。
解决办法:
使用 editor.destroy();

let editor;
method:{
    
    
creatDom(){
    
    
      editor = new E('#div1');//富文本编辑器创建,获取节点
      // 配置 server 接口地址
      editor.config.uploadImgServer = 'http://localhost:9090/files/editor/upload';
      editor.config.uploadFileName = 'file';//设置文件上传的名字
      editor.create();//创建。
    },
    //这里是新增弹窗
    add(){
    
    
      this.dialogVisible = true;
      this.form = {
    
    };
      //由于只有在弹窗启动之后,div节点才会被创建,那么创建富文本编辑器也只能在其之后。
      this.$nextTick(()=>{
    
    
        if (editor==null){
    
    
          this.creatDom();
        }else {
    
    
          editor.destroy();//这里做了一次判断,判断编辑器是否被创建,如果创建了就先销毁。
          this.creatDom();
        }
      });
    },
    //这里是修改弹窗
    handleEdit(row){
    
    
      this.form = JSON.parse((JSON.stringify(row)));
      this.dialogVisible = true;
      this.$nextTick(()=>{
    
    
        if (editor==null){
    
    
          this.creatDom();
          editor.txt.html(row.content);
        }else {
    
    
          editor.destroy();//这里做了一次判断,判断编辑器是否被创建,如果创建了就先销毁。
          this.creatDom();
          editor.txt.html(row.content);
        }
      });
    },
}

Talk is cheap,show me the code!—— 薪火工作室!

猜你喜欢

转载自blog.csdn.net/qq_52050769/article/details/119705808