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

Question

我正在使用 TinyMCE 5 和 PHP 7。

目前：

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。问题

我无法从 2. 获取 file_picker_callback 从 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。仅限原版 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

在您提供的配置中，#2 没有任何逻辑将数据上传到您的服务器。您复制的 Tiny 文档中的代码仅用于演示目的，不允许您将文件上传到 Tiny 的服务器。

您需要设置file_picker_callback 回调以发送类似于images_upload_handler 的数据。在您的服务器上，您需要在响应中发送URI 和title，以便满足以下行：

cb(blobInfo.blobUri(), { title: file.name });

Answer 2

希望它对你有帮助，让你的 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();
},                 

       
 

Answer 3

编辑@Aulia 的回答：

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) {
                alert('HTTP Error: ' + xhr.status);
                return;
            }
            json = JSON.parse(xhr.responseText);
            if (!json || typeof json.location != 'string') {
                alert('Invalid JSON: ' + xhr.responseText);
                return;
            }
            filename = json.location;
            reader.onload = function(e) {
                cb(filename);
            };
            reader.readAsDataURL(file);
        };
        xhr.send(fd);
        return
    };

    input.click();
}