Tinymce 4 file_browser_callback：打开本地文件浏览器的函数答案

【问题标题】：Tinymce 4 file_browser_callback: Function for opening a local file browserTinymce 4 file_browser_callback：打开本地文件浏览器的函数
【发布时间】：2016-02-13 19:00:33
【问题描述】：

我在我的 Web 应用程序中使用 Tinymce 4.0。但我真的不知道该怎么做：当用户点击浏览按钮时，如何打开本地文件浏览器并从这个本地文件浏览器将图像 URL 添加到对话窗口？我有这个源代码：

file_browser_callback: function(field_name, url, type, win) {win.document.getElementById(field_name).value = ''; }

但我不知道如何解决这个问题。我不需要特殊的文件浏览器，但可以打开本地文件浏览器。

【问题讨论】：

没有插件可以做到这一点吗？我以前用过 HTML 编辑器——我认为最后一个是 FKEditor——几乎所有东西都有一个插件。
TinyMCE 作者为此创建了一个插件 - MoxieManager，但它是付费的。

标签： tinymce image-uploading

【解决方案1】：

这里是来自 TinyMCE 文档的Basic Local File Picker 演示的 sn-p：

注意：不幸的是，它在这里似乎不能作为 StackOverflow sn-p 工作。

tinymce.init({
  selector: '#editor',
  plugins: 'image code',
  toolbar: 'undo redo | link image | code',
  // enable title field in the Image dialog
  image_title: true, 
  // enable automatic uploads of images represented by blob or data URIs
  automatic_uploads: true,
  // URL of our upload handler (for more details check: https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_url)
  images_upload_url: 'postAcceptor.php',
  // here we add custom filepicker only to Image dialog
  file_picker_types: 'image', 
  // and here's our custom image picker
  file_picker_callback: function(cb, value, meta) {
    var input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.setAttribute('accept', 'image/*');
    
    // Note: In modern browsers input[type="file"] is functional without 
    // even adding it to the DOM, but that might not be the case in some older
    // or quirky browsers like IE, so you might want to add it to the DOM
    // just in case, and visually hide it. And do not forget do remove it
    // once you do not need it anymore.

    input.onchange = function() {
      var file = this.files[0];
      
      // Note: Now we need to register the blob in TinyMCEs image blob
      // registry. In the next release this part hopefully won't be
      // necessary, as we are looking to handle it internally.
      var id = 'blobid' + (new Date()).getTime();
      var blobCache = tinymce.activeEditor.editorUpload.blobCache;
      var blobInfo = blobCache.create(id, file);
      blobCache.add(blobInfo);
      
      // call the callback and populate the Title field with the file name
      cb(blobInfo.blobUri(), { title: file.name });
    };
    
    input.click();
  }
});

<script src="//cdn.tinymce.com/4/tinymce.js"></script>
<textarea id="editor"></textarea>

【讨论】：