使用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!—— 薪火工作室!