TinyMCE富文本编辑器，实现粘贴进来的Base64图片自动上传、图片压缩上传

        在使用TinyMCE富文本编辑器时，经常会碰到从外部复制粘贴进来的图片，例如直接从微信上复制图片过来粘贴，这时如果没有进行处理的话，粘贴进来的图片是以Base64的图片存在的，而base64格式的图片相当于是很长的一段字符串，小点的图片一般会占到几十KB，大点的图片可能就是几兆，如果一段富文本里同时存在好几张大图片，那体积可能就达到几十兆，甚至更大。

        这时编辑完成存到后台后，在调用接口从后台获取数据时，就很容易出现由于返回数据过大而导致请求时间过长，甚至超出接口设置的timeout时间而无法获取到数据，所以将粘贴的base64图片自动上传转成图片地址感觉是很有必要的。

        还有一种使用情况是需要将富文本内容填进word文件里，并将生成、下载word文件，这时如果上传的图片过大，也会出现word文件体积过大，导致接口要请求很久的情况，这时就又需要将过大的图片进行压缩再上传。

        在TinyMCE实现base64图片的自动上传、图片压缩上传大致的实现代码如下：

import tinymce from 'tinymce/tinymce'

// 安装图片压缩插件 image-conversion 后导入
import * as imageConversion from 'image-conversion'

data() {
    return {
      // TinyMCE初始化配置
      init: {
        // ...TinyMCE的其他配置

        // 允许粘贴
        paste_data_images: true,
        // 粘贴图片后自动上传
        urlconverter_callback: function(url, node, on_save, name) {
          if (node === 'img' && url.startsWith('blob:')) {
            tinymce.activeEditor && tinymce.activeEditor.uploadImages()
          }
          return url;
        },
        
        // 图片上传方法
        images_upload_handler: (blobInfo, success) => {
          // 判断图片大小，大于1024*1024的图片进行压缩，可根据需求自定义
          if (blobInfo.blob().size > 1024*1024) {
            // 使用imageConversion对图片进行压缩，1024为压缩后的图片最大值，最大值可根据需求自定义
            imageConversion.compressAccurately(blobInfo.blob(), 1024).then(res => {
              let formData = new FormData()
              formData.append('file', res, blobInfo.filename())
              formData.append('biz', 'jeditor')
              formData.append('jeditor', '1')
              // 调用图片上传接口
              upload('图片上传接口地址', formData).then((res) => {
                if (res.success) {
                  let img = getFileAccessHttpUrl(res.message)
                  success(img)
                }
              })
            });
          } else {
            // 同上面图片压缩完成后.then里的操作
          }
        },
      },
    }
  },