TinyMCE rich text editor, realizes automatic uploading of pasted Base64 pictures, picture compression uploading

        When using the TinyMCE rich text editor, you often encounter pictures that are copied and pasted from the outside, such as copying and pasting pictures directly from WeChat. At this time, if there is no processing, the pasted pictures will exist as Base64 pictures , and a picture in base64 format is equivalent to a very long string. Smaller pictures generally occupy tens of kilobytes, and larger pictures may be several megabytes. If there are several large pictures in a piece of rich text at the same time, the volume may be It reaches tens of megabytes, or even larger.

        At this time, after the editing is completed and stored in the background, when the interface is called to obtain data from the background, it is easy to cause the request time to be too long due to the returned data is too large, or even exceed the timeout time set by the interface, so the data cannot be obtained, so paste It feels necessary to automatically upload the base64 image and convert it to the image address.

        Another use case is that you need to fill in the rich text content into the word file, and generate and download the word file. If the uploaded image is too large, the word file will also be too large, resulting in a long time for the interface to request , At this time, it is necessary to compress the image that is too large and then upload it.

        The general implementation code for automatic uploading of base64 images and image compression uploading in TinyMCE is as follows:

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里的操作
          }
        },
      },
    }
  },