TinyMCE 5.7 失败回调 returns “[object Object]” 无论如何
TinyMCE 5.7 failure callback returns "[object Object]" no matter what
这里出现了一个看似奇怪的问题:我已经安装了 TinyMCE 5.7 并且 运行 配置了 images_upload_handler 函数 per the docs。如果上传成功,一切正常。但是,如果上传失败,那么应该输出失败信息的对话框就简单的输出“[object Object]”。
Screenshot: Failure callback output
我发现无论我是否按照文档指示在 images_upload_handler 函数中调用失败回调都是这种情况...
function gg_image_upload_handler (blobInfo, success, failure, progress) {
[...]
if (xhr.status < 200 || xhr.status >= 300) {
failure('HTTP Error: ' + xhr.status);
return;
}
[...]
}
...或者如果我用一个简单的字符串使整个 images_upload_handler 函数成为失败回调,并获取所有其他变量(包括 PHP 上传处理程序)出来:
function gg_image_upload_handler (blobInfo, success, failure, progress) {
failure('hello!');
return;
}
值得注意的是,如果我将第二个示例从“failure('hello!');”更改为到“成功('hello!');”那么就没有问题了:当我在那种情况下上传照片时,“你好!”出现在通常显示上传图片路径的对话框中。
我找不到任何其他人对失败回调有问题,所以我担心我做了一些愚蠢的事情,但其他一切都有效而这部分却没有,这似乎很奇怪。有什么想法吗?完整的 Javascript 代码如下:
function gg_image_upload_handler (blobInfo, success, failure, progress) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'handlers/tinymce_photo_handler.php');
xhr.upload.onprogress = function (e) {
progress(e.loaded / e.total * 100);
};
xhr.onload = function() {
var json;
if (xhr.status === 403) {
failure('HTTP Error: ' + xhr.status, { remove: true });
return;
}
if (xhr.status < 200 || xhr.status >= 300) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
xhr.onerror = function () {
failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
};
tinymce.init({
selector: "textarea#editor",
images_upload_handler: gg_image_upload_handler,
images_reuse_filename: true,
skin: "oxide",
plugins: "lists, link, image, media, image code",
relative_urls: false,
remove_script_host: false,
toolbar:
"h1 h2 h3 h4 h5 h6 bold italic strikethrough blockquote bullist numlist backcolor | link image media | removeformat help",
image_caption: true,
image_advtab: true,
image_class_list: [
{title: 'Responsive', value: 'img-fluid'}
],
content_style: 'img { max-width: 75%; height: auto; }',
menubar: false,
setup: (editor) => {
// Apply the focus effect
editor.on("init", () => {
editor.getContainer().style.transition =
"border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out";
});
editor.on("focus", () => {
(editor.getContainer().style.boxShadow =
"0 0 0 .2rem rgba(0, 123, 255, .25)"),
(editor.getContainer().style.borderColor = "#80bdff");
});
editor.on("blur", () => {
(editor.getContainer().style.boxShadow = ""),
(editor.getContainer().style.borderColor = "");
});
}
});
不幸的是,这是 TinyMCE 5.7.0 中引入的错误,报告如下:https://github.com/tinymce/tinymce/issues/6579。这将在即将发布的 TinyMCE 5.7.1 补丁版本中修复,但是目前最好的解决方法是降级到 TinyMCE 5.6.2 抱歉。
这里出现了一个看似奇怪的问题:我已经安装了 TinyMCE 5.7 并且 运行 配置了 images_upload_handler 函数 per the docs。如果上传成功,一切正常。但是,如果上传失败,那么应该输出失败信息的对话框就简单的输出“[object Object]”。
Screenshot: Failure callback output
我发现无论我是否按照文档指示在 images_upload_handler 函数中调用失败回调都是这种情况...
function gg_image_upload_handler (blobInfo, success, failure, progress) {
[...]
if (xhr.status < 200 || xhr.status >= 300) {
failure('HTTP Error: ' + xhr.status);
return;
}
[...]
}
...或者如果我用一个简单的字符串使整个 images_upload_handler 函数成为失败回调,并获取所有其他变量(包括 PHP 上传处理程序)出来:
function gg_image_upload_handler (blobInfo, success, failure, progress) {
failure('hello!');
return;
}
值得注意的是,如果我将第二个示例从“failure('hello!');”更改为到“成功('hello!');”那么就没有问题了:当我在那种情况下上传照片时,“你好!”出现在通常显示上传图片路径的对话框中。
我找不到任何其他人对失败回调有问题,所以我担心我做了一些愚蠢的事情,但其他一切都有效而这部分却没有,这似乎很奇怪。有什么想法吗?完整的 Javascript 代码如下:
function gg_image_upload_handler (blobInfo, success, failure, progress) {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', 'handlers/tinymce_photo_handler.php');
xhr.upload.onprogress = function (e) {
progress(e.loaded / e.total * 100);
};
xhr.onload = function() {
var json;
if (xhr.status === 403) {
failure('HTTP Error: ' + xhr.status, { remove: true });
return;
}
if (xhr.status < 200 || xhr.status >= 300) {
failure('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
failure('Invalid JSON: ' + xhr.responseText);
return;
}
success(json.location);
};
xhr.onerror = function () {
failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
};
formData = new FormData();
formData.append('file', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
};
tinymce.init({
selector: "textarea#editor",
images_upload_handler: gg_image_upload_handler,
images_reuse_filename: true,
skin: "oxide",
plugins: "lists, link, image, media, image code",
relative_urls: false,
remove_script_host: false,
toolbar:
"h1 h2 h3 h4 h5 h6 bold italic strikethrough blockquote bullist numlist backcolor | link image media | removeformat help",
image_caption: true,
image_advtab: true,
image_class_list: [
{title: 'Responsive', value: 'img-fluid'}
],
content_style: 'img { max-width: 75%; height: auto; }',
menubar: false,
setup: (editor) => {
// Apply the focus effect
editor.on("init", () => {
editor.getContainer().style.transition =
"border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out";
});
editor.on("focus", () => {
(editor.getContainer().style.boxShadow =
"0 0 0 .2rem rgba(0, 123, 255, .25)"),
(editor.getContainer().style.borderColor = "#80bdff");
});
editor.on("blur", () => {
(editor.getContainer().style.boxShadow = ""),
(editor.getContainer().style.borderColor = "");
});
}
});
不幸的是,这是 TinyMCE 5.7.0 中引入的错误,报告如下:https://github.com/tinymce/tinymce/issues/6579。这将在即将发布的 TinyMCE 5.7.1 补丁版本中修复,但是目前最好的解决方法是降级到 TinyMCE 5.6.2 抱歉。