TinyMCE 5.7故障回调返回“;[对象对象]”;无论如何

TinyMCE 5.7故障回调返回“;[对象对象]”;无论如何,tinymce,tinymce-5,Tinymce,Tinymce 5,这里似乎有个奇怪的问题:我已经启动了TinyMCE 5.7,并配置了images\u upload\u处理程序函数。如果上传成功,一切都很顺利。但是,如果上载失败,则应输出失败消息的对话框仅输出“[object]” 我发现无论我是否像文档所指示的那样调用images\u upload\u handler函数中的失败回调,情况都是如此 function gg_image_upload_handler (blobInfo, success, failure, progress) { [..

这里似乎有个奇怪的问题:我已经启动了TinyMCE 5.7,并配置了images\u upload\u处理程序函数。如果上传成功,一切都很顺利。但是,如果上载失败,则应输出失败消息的对话框仅输出“[object]”

我发现无论我是否像文档所指示的那样调用images\u upload\u handler函数中的失败回调,情况都是如此

function gg_image_upload_handler (blobInfo, success, failure, progress) {
    [...]
    
    if (xhr.status < 200 || xhr.status >= 300) {
      failure('HTTP Error: ' + xhr.status);
      return;
    }

    [...]
}
值得注意的是,如果我将第二个示例从“failure('hello!');”更改为“success('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 = "");
        });
    }
});
函数gg\u image\u upload\u处理程序(blobInfo、成功、失败、进度){
var-xhr,formData;
xhr=newXMLHttpRequest();
xhr.withCredentials=false;
open('POST','handlers/tinymce_photo_handler.php');
xhr.upload.onprogress=函数(e){
进度(e.loaded/e.total*100);
};
xhr.onload=函数(){
var-json;
如果(xhr.status==403){
失败('HTTP错误:'+xhr.status,{remove:true});
返回;
}
如果(xhr.status<200 | | xhr.status>=300){
失败('HTTP错误:'+xhr.status);
返回;
}
json=json.parse(xhr.responseText);
如果(!json | | typeof json.location!=“string”){
失败(“无效的JSON:”+xhr.responseText);
返回;
}
成功(json.location);
};
xhr.onerror=函数(){
失败('由于XHR传输错误,图像上载失败。代码:'+XHR.status);
};
formData=新的formData();
append('file',blobInfo.blob(),blobInfo.filename());
xhr.send(formData);
};
tinymce.init({
选择器:“文本区域#编辑器”,
图片上传处理程序:gg图片上传处理程序,
图像\u重用\u文件名:true,
皮肤:“氧化物”,
插件:“列表、链接、图像、媒体、图像代码”,
相对URL:false,
删除\u脚本\u主机:false,
工具栏:
“h1 h2 h3 h4 h5 h6粗体斜体删除框引用bullist numlist背景色|链接图像媒体|删除格式帮助”,
图片说明:正确,
图像\u advtab:正确,
图像\u类\u列表:[
{标题:“响应”,值:“img流体”}
],
内容样式:“img{最大宽度:75%;高度:自动;}”,
梅努巴:错,
设置:(编辑器)=>{
//应用聚焦效果
编辑器.on(“init”,()=>{
editor.getContainer().style.transition=
“边框颜色0.15s缓进缓出,框阴影0.15s缓进缓出”;
});
编辑者:关于(“焦点”,()=>{
(editor.getContainer().style.boxShadow)=
“0.2rem rgba(0、123、255、25)”,
(editor.getContainer().style.borderColor=“#80bdff”);
});
编辑器.on(“模糊”,()=>{
(editor.getContainer().style.boxShadow=“”),
(editor.getContainer().style.borderColor=“”);
});
}
});

不幸的是,这是TinyMCE 5.7.0中引入的一个错误,如下所述:。这将在即将发布的TinyMCE 5.7.1修补程序中修复,但目前最好的解决办法是降级到TinyMCE 5.6.2抱歉。

谢谢!至少这解开了谜团。我的解决方法是将失败回调更改为成功回调,这会导致错误输出呈现在成功上传的文件路径通常出现的位置。现在这已经足够好了,因为我只需要TinyMCE作为管理员CMS界面(三个人,不面向公众)。但很高兴知道修复即将到来。
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 = "");
        });
    }
});