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

最新推荐文章于 2023-10-11 09:39:29 发布

先养只猫

最新推荐文章于 2023-10-11 09:39:29 发布

阅读量5k

点赞数 14

分类专栏：服务器搭建网站文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_52050769/article/details/119705808

版权

服务器搭建网站专栏收录该内容

3 篇文章 1 订阅

订阅专栏

使用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);
        }
      });
    },
}