总结一下这个插件的坑
上传图片到服务器 · wangEditor3使用手册 · 看云
1.’按官网引入函数的,把 editor.customConfig
改为 editor.config
2.然后就是工具栏部分功能失效
原因:设置的全局样式导致样式失效
解决:重新对编辑器的样式进行设置,覆盖全局即可
通过查找原始默认样式:webkit内核的默认样式
我引入是斜体功能无法实现
原因是(app.vue里面把i、b标签样式重置了)
自己在本页面局部再对编辑器进行样式设置即可
3.本地图片上传功能需要自己定义
var that = this;
this.editor.config.customUploadImg = async function (files, insert) {
// var file=files[0];
console.log(that);
console.log(files, "file");
//this.toast('', 'loading', true)
let data = new FormData();
data.append("appKey", "xxxxxx");
data.append("needAuthn", "0");
data.append("fileType", files[0].type);
data.append("groupCode", "default");
data.append("file", files[0]);
const r = await fetch(
"你的上传地址",
{
method: "POST",
headers: {
"x-team-id": "0",
"x-token": that.$store.state.token,
},
body: data,
mode: "cors",
}
);
const res = await r.json();
that.path = res.data.fileDownloadUrl;
console.log(that.path, "path");
if (res.code === "0") {
insert(that.path + "?appKey=xxxxxx"); //将插入图片
} else {
console.log("图片上传失败");
}
};
this.editor.config.onblur = function (newHtml) {
content.html = newHtml;
// this.editor.txt.html(newHtml);
_this.$emit("get", content.html); // 获取最新的 html 内容
};
this.editor.create(); //创建编辑器
},
上传地址需要携带的参数向看后端,拿到图片URL 后插入到编辑器图片url还需要携带参数appKey
感谢一下博主提供的参考