TinyMCE富文本编辑器上传图片

官方文档（英文）：https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tinymce/

中文文档（不完全）：http://tinymce.ax-z.cn/

一、问题

项目里用的版本是4.9.3，因为基础的插入图片只能通过输入图片地址，不方便，像这样：

所以需要加一个可以在本机上选择图片的操作。因为是在老项目上做更改，涉及的地方比较多，升级版本会有一些额外的问题，所以没有升级。如果是刚开始用，建议选择更高的版本。

二、实现

为了实现需求，有两种方法：

1.自定义一个图片上传的按钮。按钮的位置不知道放哪里好。

2.用编辑器的插入图片，配置参数。

这里主要针对第2种方法做说明。中文文档的图片上传用的是配置images_upload_url和images_upload_base_path参数，就不再说了。这里就用另一种吧，多提供一种方法。

1.在plugins和toolbar参数中把image加进去

2.加入配置参数

tinymce.init({
    selector: `#${this.tinymceId}`, // 换成你自己的
    language:'zh_CN',
    plugins: 'image',
    toolbar: 'image',
    images_upload_handler: function (blobInfo, succFun, failFun) {
          var xhr, formData
          var file = blobInfo.blob() //转化为易于理解的file对象
          xhr = new XMLHttpRequest()
          xhr.withCredentials = false

          // 接口地址‘/resource/img/uploads’换成你自己的
          xhr.open('POST', process.env.VUE_APP_BASE_API + '/test/img/uploads')
          // 设置请求头，如果你的接口不需要可以不设置，getToken()是我获取token的方法
          xhr.setRequestHeader('Authorization', 'Bearer ' + getToken())

          xhr.onload = function() {
              var json;
              if (xhr.status != 200) {
                  failFun('HTTP Error: ' + xhr.status);
                  return;
              }
              json = JSON.parse(xhr.responseText);
              if (!json || !json.d || json.d.length === 0 || typeof json.d[0].url !== 'string') {
                  failFun('Invalid JSON: ' + xhr.responseText)
                  return;
              }
              succFun(json.d[0].url)
          }
          formData = new FormData()
          formData.append('files', file, file.name ) // 根据你自己的接口要求来
          formData.append('path', 'test') // 根据你自己的接口要求来
          xhr.send(formData)
        },
});

3.结果如下：

【常规】就还是输入地址，【上传 】可以在自己电脑上选择图片上传。

注意，上传之后图片不是直接显示在富文本框内，而是会以地址的形式再在【常规】里显示，像这样：

然后再点击确定就上传成功了。

额，写的很随意，但主要方法就是这样，根据自己项目的实际情况多调试一下吧。肯定会成功的！