博客

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