wangEditor应用以及踩坑

1.上传图片：必须要自己写一个引用wangeditor组件，然后在父组件中引用该组件
（1）子组件 wangeditor.vue

import E from “wangeditor”;
export default {
name: “Editorbar”,
data() {
return {
editor: null,
info_: null,
isChange: false
};
},
model: {
prop: “value”,
event: “change”
},
props: {
value: {
type: String,
default: “”
},
isClear: {
type: Boolean,
default: false
}
},
watch: {
isClear(val) {
// 触发清除文本域内容
if (val) {
this.editor.txt.clear();
this.info_ = null;
}
},
value(val) {
// 使用 v-model 时，设置初始值
if (!this.isChange) {
this.editor.txt.html(val);
}
this.isChange = false;
}
},
mounted() {
this.seteditor();
this.editor.txt.html(this.value);
},
methods: {
seteditor() {
this.editor = new E(this.$refs.toolbar,this.$refs.editor);
this.editor.customConfig = this.editor.customConfig
? this.editor.customConfig
: this.editor.config;
this.editor.customConfig.uploadImgShowBase64 = true; // base 64 存储图片
//this.editor.customConfig.uploadImgServer =‘upload’
// 配置服务器端地址(这里的this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … this.message({
message: “图片上传失败”,
type: “warning”
});
},
error: function(xhr, editor) {
this.KaTeX parse error: Expected 'EOF', got '}' at position 34: …传出错"); }̲, succe…api.getPicPrefix() + result.data.files[0].url);
}
};
this.editor.customConfig.onchange = html => {
if (this.editor.txt.html() === “”) {
//解决首字母输入删除或者首字母是字母
this.editor.txt.html(" &nbsp");
}
this.isChange = true;
this.info_ = html; // 绑定当前逐渐地值
this.$emit(“change”, html); // 将内容同步到父组件中
};
// 创建富文本编辑器
this.editor.create();
}
}
};

/* .editor{
width:700px;
margin:0 auto;
}
.toolbar {
border: 1px solid #ccc;
}
.text {
border: 1px solid #ccc;
height:300px
} /
.editor {
//width:878px;
border: 1px solid #e1e3eb;
/ //margin:0 auto; */
}
.toolbar {
display: flex;
padding: 0;
border-bottom: 1px solid rgba(225, 227, 235, 1);
}
.w-e-toolbar .w-e-menu {
position: relative;
display: flex;
width: 27px;
height: 24px;
align-items: center;
justify-content: center;
text-align: center;
cursor: pointer;
}
.text {
height: 200px;
}
（2）在父组件中引用
import editor from “@/components/WangEditor.vue”;
<editor v-model=“value” :isClear=‘isClear’ @change=“change”>
export default {
data() {
return {
value:"",
isClear:false,
};
},

踩坑：（1）上传或者复制图片需要自己写组件，并引用（2）如果图片不需要上传到服务器，则不需要this.editor.customConfig.uploadImgServe；
2.中文输入法下，首字母自动删除
解决方案：
加入 this.editor.txt.html(" &nbsp");
变化完成在更新问题： this.isChange = true;
this.editor.customConfig.onchange = html => {
if (this.editor.txt.html() === “”) {
//解决首字母输入删除或者首字母是字母
this.editor.txt.html(" &nbsp");
}
this.isChange = true;
this.info_ = html; // 绑定当前逐渐地值
this.$emit(“change”, html); // 将内容同步到父组件中
};