问题描述
新开了一个项目之前用的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即可