javascript - TinyMCE 5 file_picker_callback 使用自定义处理程序上传

Question

我在 PHP 7 中使用 TinyMCE 5。
目前:
1. images_upload_handler (在职的)
关注 TinyMCE guide on Drag-in uploading images ，以及我自己的 PHP 上传 AJAX 处理程序，我得到了一张图片，可以成功上传到我的上传目录:

这将使用 AJAX 正确上传文件并保留正确的名称。

它使用了 images_upload_handler 的函数，调用我的 AJAX 处理程序。

2. file_picker_callback (不完整)
关注 TinyMCE demo on uploading files ，我得到了这两个工具栏按钮( image ， media )来在他们的对话框中显示一个上传按钮:

这适用于 image ，不是 media .

它使用了 file_picker_callback 的函数，上传自己的方式。

3.问题
我无法获得 file_picker_callback从 2. 上传自 media无论如何，我希望它使用我自己的 AJAX 上传处理程序，但我不能。
使用 image工具上传，点击对话框中的“保存”后将保存文件。但是，当在 media 中使用时工具，它根本不会上传或插入任何内容。
TinyMCE 提供的这个 JavaScript 演示似乎与 TinyMCE API 本身有大量交互。它有一个缓存和 blob 系统来查找 TinyMCE 自己上传的文件。所以纯粹的 AJAX-JS 知识不足以告诉我如何告诉 TinyMCE 使用我自己的 AJAX 上传 PHP 文件。我宁愿在 file_picker_callback 中覆盖 TinyMCE 的上传处理程序所以我可以使用我自己的 PHP 上传脚本来与我的应用程序的其余部分兼容。
目标:
我需要 file_picker_callback 的函数(文件上传按钮)使用我自己的 AJAX 上传处理程序并将名称保留为 images_upload_handler成功地做。

我不担心文件名和 mimetype 验证；我计划稍后让 PHP 清理和过滤。

This Question解决了另一个文件上传器以及 TinyMCE 4 解决方案并不总是适用于 TinyMCE 5 的问题。

This Question是关于图像描述的，仅适用于图像；我想上传任何文件类型。

我不想要任何依赖项，甚至不需要 jQuery。仅 Vanilla JS。

当前代码:
| 上传.php :

$temp_file = $_FILES['file']['tmp_name'];

$file_path_dest =  'uploads/'.$_FILES['file']['name'];

move_uploaded_file($temp_file, $file_path_dest);

$json_file_is_here = json_encode(array('filepath' => $file_path_dest));

echo $json_file_is_here;

| tinyinit.js :

tinymce.init({
  selector: 'textarea',
  plugins: [ 'image media imagetools', ],

  automatic_uploads: true,
  images_reuse_filename: true,
  images_upload_url: 'upload.php',

  // From #1. Successful AJAX Upload
  images_upload_handler: function(fileHere, success, fail) {

    var ajax = new XMLHttpRequest();
    ajax.withCredentials = false;
    ajax.open('post', 'upload.php');
    ajax.upload.onprogress = function (e) {
      progress(e.loaded / e.total * 100);
    };

    ajax.onload = function() {

      if (ajax.status == 200) {

        if ( (!JSON.parse(ajax.responseText))
        || (typeof JSON.parse(ajax.responseText).filepath != 'string') ) {
          fail('Invalid: <code>'+ajax.responseText+'</code>');
          return;
        }

        success(JSON.parse(ajax.responseText).filepath);

        } else {
          fail('Upload error: <code>'+ajax.status+'</code>');
          return;
        }

      };

      var fileInfo = new FormData();
      fileInfo.append('file', fileHere.blob(), fileHere.filename());
      ajax.send(fileInfo);

    },


  file_browser_callback_types: 'file image media',
  file_picker_types: 'file image media',

  // From #2. Neither uploads from "media" nor uses my upload handler
  file_picker_callback: function(cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');

    input.onchange = function() {
      var file = this.files[0];

      var reader = new FileReader();
      reader.onload = function () {
        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
        var base64 = reader.result.split(',')[1];
        var blobInfo = blobCache.create(file.name, file, base64);
        blobCache.add(blobInfo);
        cb(blobInfo.blobUri(), { title: file.name });
      };
      reader.readAsDataURL(file);
    };
    input.click();
  }
});

Answer 1

希望能帮到你，做你的file_picker_callback看起来像下面的代码

file_picker_callback: function (cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.onchange = function () {
        var file = this.files[0];
        var reader = new FileReader();
                        
        // FormData
        var fd = new FormData();
        var files = file;
        fd.append('filetype',meta.filetype);
        fd.append("file",files);

        var filename = "";

        // AJAX
        var xhr, formData;
        xhr = new XMLHttpRequest();
        xhr.withCredentials = false;
        xhr.open('POST', '/your-endpoint');

        xhr.onload = function() {
            var json;
            if (xhr.status != 200) {
                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);
            filename = json.location;
        };
        xhr.send(fd);
                                                                
        reader.onload = function(e) {
            cb(filename);
        };
        reader.readAsDataURL(file);
        return
    };

    input.click();
},