文章编辑难免需要插入图片，wangeidtor也是支持的，看看怎么配置吧。
一、需要后端配合，配置固定的服务端 response body 格式
这里参考 官网配置，主要关注 “服务端地址”、“基本配置” 和 “回调函数” 三个栏目
二、以base64格式，将图片插入文本内容（不需要上传到任何服务器）
示例代码：
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editor"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<input v-model="articleForm.title" class="article-title-box" maxlength="30" :border="false" placeholder="请输入文章标题（2~30字以内）" />
<Editor
style="height: 500px;overflow-y: hidden;"
:defaultConfig="editorConfig"
:mode="mode"
/>
data(){
editor: null,
toolbarConfig:{ //.. 工具栏配置 },
editorConfig: { // 编辑器配置（图片如配置颜色、字体、链接校验、上传图片等）
MENU_CONF:{
// 插入图片
uploadImage: {
base64LimitSize: 1024 * 1024 * 10 // 10MB 小于该值就插入 base64 格式（而不 上传），默认为 0
},
}
},
},
methods:{
getEditorHtml(){
let resHtml = this.editor.getHtml(); // 获取文章html结构（带有内联样式）
console.log(resHtml )
}
}三、上传到七牛云
自定义上传图片到七牛云，上传成功后通过唯一路径访问图片，并将其插入显示在文章中。
（保持函数名与官网定义的一致即可）
示例代码：
data(){
let that = this;
return {
// 文章编辑相关配置
editor: null,
toolbarConfig: { // 菜单栏配置
toolbarKeys:[
"uploadImage", // 上传图片
]
},
editorConfig: { // 编辑器配置（上传图片）
MENU_CONF:{
// 图片上传
uploadImage: {
// 自定义上传图片到七牛云
async customUpload(file,insertFn) {
const isPic = file.type.split('/')[0] === 'image';
const isLt2M = file.size / 1024 / 1024 <= 10;
if (!isPic) {
that.$Message.error('只能上传图片噢~');
} else if (!isLt2M) {
that.$Message.error('上传图片大小不能超过 10MB!');
} else {
let url = '';
// 调用接口获取七牛token，后端给的
getUploadToken({}).then(res => {
if (res.code == 200) {
let qiniuToken = res.data.token;
var key = null;
let config = {
useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
region: qiniu.region.z2 // 根据具体提示修改上传地区,当为 null 或 undefined 时，自动分析上传域名区域
};
let putExtra = {
fname: "", //文件原文件名
params: {}, //用来放置自定义变量
mimeType: null
};
var observable = qiniu.upload(file, key, qiniuToken, putExtra, config);
observable.subscribe({
complete: (result) => {
// 利用七牛云注册成功后配置的地址 + 七牛云返回唯一的key，访问上传到七牛云的图片。
url = `http://xxxxxxxxxxx/${result.key}`;
insertFn(url,'走丢啦',url); // 将图片插入编辑器显示
}
})
} else {
that.$Message.destroy();
that.$Message.error(res.message);
}
})
}
},
},
}
},
}
}Tips：
（1）在data函数 return 前，先用 变量that 保存 this指向
data(){
let that = this;
return{
//...
}
}（2）上传成功后，在回调函数中拿到访问图片唯一的key/hash值，拼接上后端给的协议和域名，就得到了这张图片的访问路径url。然后将其插入编辑器
扫描二维码关注公众号，回复：
14623644 查看本文章
