wangEditor富文本编辑器自定义图片上传

wangEditorV4版本自定义图片上传

给大家推荐一个好用又轻量级的富文本编辑器wangEditor v4版本。wangEditor富文本的文档也比较全面，而且易上手。
文档地址：wangEditorV4

虽然文档想对来说比较详细但是在使用上传图片的过程还是遇到了一点点小问题在此记录下来

问题描述：
wangEditor自己在上传图片的时候直接上传到阿里云服务器跨域问题（wangEditor支持直接配置上传的地址进行图片上传，但是我门的图片不上传到自己的服务器而是推到阿里云，所以直接上传就会有跨域问题）。

wangEditor自己在上传图片的时候有下面几种方式：
1、通过base64 保存图片，因为保存的是base64格式所以在上传大文件的时候就有问题，可以在某些场景下使用。具体使用请看文档：base64图片上传
2、通过wangEditor配置服务端接口，还可以自定义上传参数、处理返回数据格式、上传前后钩子响应自己的逻辑等，文档写的比较详细具体可以看文档：wangEditor直接配置图片上传地址
3、在上述方法都不能满足你的需求的时候还可以支持完全自定义上传图片的方法（也就是我们使用的方法），然后只需要把返回的文件预览地址插入到编辑器中即可，请看完整代码和注释：

// 初始化富文本
initEditor (text) {
  const _that = this
  _that.editor = new wangEditor(this.$refs.wangEditor)
  _that.editor.config.placeholder = ''
  // 配置菜单
  _that.editor.config.menus = [
    'head',
    'bold',
    'fontSize',
    'fontName',
    'italic',
    'underline',
    'strikeThrough',
    'indent',
    'lineHeight',
    'foreColor',
    'list',
    'justify',
    'image'
  ]
  // 完全自定上传图片的配置项
  _that.editor.config.customUploadImg = async function (resultFiles, insertImgFn) {
    // resultFiles 是选中的文件列表,使用resultFiles[0]获取上传的第一个文件对象
    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
    // 下面函数的就是自己公司使用定义的上传文件的方法，参数为上传的图片
    const result = await _that.uploadHttp(resultFiles[0])
    // 上传图片成功后，将图片地址传入到insertImgFn方法中即可
    if (result.status === 200) insertImgFn(result.url)
  }
  _that.editor.config.showLinkImg = false
  // 配置 onchange 回调函数
  _that.editor.config.onchange = function (newHtml) {
  _that.textData = _that.editor.txt.text()
  // 引入js-xss库进行安全过滤
  _that.formData.content = xss(newHtml)
  console.log(newHtml)
  }
  // 配置触发 onchange 的时间频率
  _that.editor.config.onchangeTimeout = 500
  // 配置全屏功能按钮是否展示
  _that.editor.config.showFullScreen = false
  // 创建编辑器
  _that.editor.create()
},