我上一篇文章不是讲到腾讯云配置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。