【tinymce6.0】 images_upload_handler未正常自动上传图片问题

问题描述

新开了一个项目之前用的tinymce5.0写了个编辑器，准备更新到6.0。然后发现图片并没有显示正常的src,src还是‘blob:http:’格式。但是上传接口正常请求返回也正常。

因为配置直接复制过去的，上传配置这样，于是我把问题定位在images_upload_handler函数的回调上。发现res.url是可以正常打印的，怀疑success()的回调出问题。

然后查了下tinymce6.0的官方文档

const example_image_upload_handler = (blobInfo, progress) => new Promise((resolve, reject) => {
  const xhr = new XMLHttpRequest();
  xhr.withCredentials = false;
  xhr.open('POST', 'postAcceptor.php');

  xhr.upload.onprogress = (e) => {
    progress(e.loaded / e.total * 100);
  };

  xhr.onload = () => {
    if (xhr.status === 403) {
      reject({ message: 'HTTP Error: ' + xhr.status, remove: true });
      return;
    }

    if (xhr.status < 200 || xhr.status >= 300) {
      reject('HTTP Error: ' + xhr.status);
      return;
    }

    const json = JSON.parse(xhr.responseText);

    if (!json || typeof json.location != 'string') {
      reject('Invalid JSON: ' + xhr.responseText);
      return;
    }

    resolve(json.location);
  };

  xhr.onerror = () => {
    reject('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
  };

  const formData = new FormData();
  formData.append('file', blobInfo.blob(), blobInfo.filename());

  xhr.send(formData);
});

综上发现：

tinymce6.0中 example_image_upload_handler 被重构了，他现在此选项允许指定一个函数，该函数用于将 TinyMCE 的默认 JavaScript 上传处理程序函数替换为自定义逻辑。
upload handler 函数采用两个参数：
blobInfo file文件
progress 取值介于 1 和 100 之间的回调。

需要在函数中返回一个 Promise，该 Promise 将使用上传的图像 URL 进行解析，或拒绝并出现错误。
也就是说之前回调参数中的success回调参数已经不存在，取而代之是指定一个返回Promise对象的函数

将原本代码做出调整如下：

resolve里给出返回上传成功后的url即可

---