我上一篇文章不是讲到腾讯云配置cos上传嘛，然后上传配置完了，还写一个文章发布，这个地方用到了wangEditor富文本编辑器中的vue2的使用模式，中间出现了一点问题，就是这个图片上传，如果转成base64放数据库数据就比较大了，同时也没法添加视频进去，所以就使用了它的图片自定义上传方式。
安装跟使用都在他官网里面有基本demo，点击上面链接就看得到哈，然后重点说这个自定义上传怎么做，网上大部分搜索到的都是使用他官网提供的js的方式去弄的，没看到vue的demo。
他官网的demo里面。是在js里面定义的：
const editorConfig: Partial<IEditorConfig> = { MENU_CONF: {} }
注意看到这个 MENU_CONF：{}就是他的工具栏里面的工具的配置都是在这个里面进行修改的，在vue2里面的，editorConfig就是定义在变量里面的
data() {return {value: null,list: null,listLoading: true,selectvalue: [],visible: false,formData: {html: '<p>hello</p>',addvalue: null},toolbarConfig: {},editorConfig: {placeholder: '请输入内容...',// 所有的菜单配置，都要在 MENU_CONF 属性下MENU_CONF: {}},mode: 'simple', // or 'simple'editor: ''}},
就像这样的。
可以看到官网，进行配置的方式是这样的，js的语法去的
editorConfig.MENU_CONF['uploadImage'] = {// 自定义插入图片customInsert(res: any, insertFn: InsertFnType) {// res 即服务端的返回结果// 从 res 中找到 url alt href ，然后插图图片insertFn(url, alt, href)},}
但是在vue里面，这样写也不是不行是吧，就是不符合vue的语法形式了。
改改他：在变量里面直接写上去，然后指向自己的上传的方法。
data() {return {value: null,list: null,listLoading: true,selectvalue: [],visible: false,formData: {html: '<p>hello</p>',addvalue: null},toolbarConfig: {},editorConfig: {placeholder: '请输入内容...',// 所有的菜单配置，都要在 MENU_CONF 属性下MENU_CONF: {// 配置上传图片uploadImage: {customUpload: this.update},// 继续其他菜单配置...}},mode: 'simple', // or 'simple'editor: ''}},
方法内容：看到有两个参数，一个是file图片的上传参数，第二个就是返回后数据插入到富文本编辑器的内容。里面的uploadFile方法是我封装的上传图片的方法，可以看我上一篇文章vue使用腾讯云COS上传文件
update(file, insertFn) {// file 即选中的文件// 自己实现上传，并得到图片 url alt hreflet name = md5(file.name);let suffix = file.type.split("/")[1];name = name + '.' + suffix;uploadFile(name, file).then(res => {if (res.statusCode == 200) {// 最后插入图片console.log(res);insertFn('http://' + res.Location, file.name, 'http://' + res.Location)} else {}})}
然后这样就配置好了，看下实际效果。
不错不错，简直nice。
