vue项目tinymce上传图片和粘贴图片

背景

项目中富文本需要上传图片的功能，而且业务方觉得一个一个上传图片太慢，还想要直接粘贴图片的功能。

版本：tinymce6、vue2.x

实现过程

网上调研一番之后，决定使用自己封装的上传图片的组件，只需要将得到的url插入到富文本对应的位置即可。

最大的区别其实是网上有的是在 setup 里面添加按钮，但是我感觉但没有什么必要，反而有些麻烦，所有我就直接把之前写好的上传图片的按钮组件放在 tinymce 的右上角即可。

添加按钮组件

<template>
  <div class="tinymce-container">
    <editor v-model="myValue" class="editor" :init="init" :disabled="disabled" />
    <div v-if="!disabled" class="editor-custom-btn-container">
      <editorImage
        color=""
        class="editor-upload-btn"
        icon=""
        type="text"
        @successCBK="imageSuccessCBK"
      />
    </div>
  </div>
</template>

成功回调

imageSuccessCBK(arr) {
  let html = ''
  arr.forEach(url => {
    html += `<img src="` + url + `">`
  })
  this.editor.insertContent(html)
}

这里有个问题就是 this.editor 如何才能指向富文本组件？

解决 this.editor的指向问题

// 在data的return前面加上
let that = this
// 在data里面的init加入
setup: function(editor) {
  that.editor = editor
},

在tinymce组件初始化的时候把 this.editor 指向正确的值。

粘贴图片

此版本的 tinymce 不需要单独引入paste插件。

所以相当于自带粘贴图片的插件功能。

paste_data_images 默认为 true

paste_data_images: true, // 设置为“true”将允许粘贴图像，而将其设置为“false”将不允许粘贴图像。
// images_file_types: 'jpg,png,gif,webp', // 允许的图片格式

粘贴图片遇到的问题

1. 在 word 中，文字和图片一起粘贴过来时，图片不显示，只有文字
2. 多个图片一起粘贴也是不行的
3. 只粘贴单个图片时，富文本内可以正常展示，但是此时图片为 base64 格式的，严重浪费资源

第一个问题，实际上是插件 paste 的问题，这个插件本身就是不支持 word 中文字和图片一起粘贴的。

第二个问题和第一个问题类似的原因，插件不支持。解决方法也是有的，就是使用powerpaste插件，这个插件是支持文字和图片一起粘贴过来的，但是，但是，但是（重要的事情说三遍）现在这个插件是收费插件！！！

第三个问题才是我们需要解决的，可以正常展示，只不过图片并不是链接的形式，而是base64的形式。
首先想到的就是能不能把 base64 的形式转化为正常的链接形式呢？

答案是肯定的！

粘贴图片的自动上传

在度娘的帮助下找到了不少关于这个问题的回答，总结一下就是通过异步上传到服务器，得到正确的url之后再替换掉富文本中的base64，这样就达到了我们的目的。

// word本地图片粘贴自动上传
images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {
  progress(0)
  console.log(' hj ~ images_upload_handler ~ blobInfo:', blobInfo)
  // blobInfo.blob() 得到图片的file对象
  let file = blobInfo.blob()
  uploadImage(file)
    .then((url) => {
      progress(100)
      this.$message.success('上传成功')
      resolve(url)
    }).catch(err => {
      reject(err)
    })
}),

大概率：返回 new Promise 的形式应该是 版本6 才有的方式，因为在网上的类似回答，这个函数都不是这样写的

这样我们可以正确的从word粘贴图片了，而且不用为base64的超长内容而担心啦。