File upload TinyMCE file\u picker\u回调从默认浏览器文件选择中选择图像

Im在项目中使用TinyMCE，希望用户使用默认的“插入图像”窗口选择图像并将其上载到服务器

我要单击以下按钮：

打开浏览器默认文件选择窗口，并将所选图像添加到编辑器：

到目前为止，我的代码如下

JS:

HTML:

要获取所选文件并将其添加到编辑器中，我必须对“文件选取器”回调事件进行何种更改？

尝试

var imageFilePicker = function (callback, value, meta) {               
    tinymce.activeEditor.windowManager.open({
        title: 'Image Picker',
        url: '/images/getimages',
        width: 650,
        height: 550,
        buttons: [{
            text: 'Insert',
            onclick: function () {
                //.. do some work
                tinymce.activeEditor.windowManager.close();
            }
        }, {
            text: 'Close',
            onclick: 'close'
        }],
    }, {
        oninsert: function (url) {
            callback(url);
            console.log("derp");
        },
    });
};


tinymce.init({
  selector: 'div#html-editor',
  height: 200,
  theme: 'modern',
  plugins: [
    'advlist autolink lists link image charmap print preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars code fullscreen',
    'insertdatetime media nonbreaking save table contextmenu directionality',
    'emoticons template paste textcolor colorpicker textpattern imagetools'
  ],
  toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  toolbar2: 'print preview media | forecolor backcolor emoticons',
  image_advtab: true,
  paste_data_images: true,
  automatic_uploads: true,
  file_picker_callback: function(callback, value, meta) {
    imageFilePicker(callback, value, meta);
  }
 });

---

我也有同样的问题。请记住，浏览器必须支持FileReader（否则只需插入您自己的脚本）

html（将其放在html页面的任意位置）：

---

你的解决方案是定制文件管理器，我想做的是使用浏览器默认的文件选择器来选择本地图像：你也可以在file_picker_回调中动态创建输入字段，并在将拾取的文件读入内存后将其删除。TinyMCE网站上有一个演示，这就使用了blob URI：谢谢，但上传图像后，屏幕被冻结，过了一段时间要求我关闭页面。请帮忙你应该把@Karl Morrisons的答案标记为正确答案。

<div id="html-editor">
    <input name="image" type="file" style="width:0;height:0;overflow:hidden;">
</div>

var imageFilePicker = function (callback, value, meta) {               
    tinymce.activeEditor.windowManager.open({
        title: 'Image Picker',
        url: '/images/getimages',
        width: 650,
        height: 550,
        buttons: [{
            text: 'Insert',
            onclick: function () {
                //.. do some work
                tinymce.activeEditor.windowManager.close();
            }
        }, {
            text: 'Close',
            onclick: 'close'
        }],
    }, {
        oninsert: function (url) {
            callback(url);
            console.log("derp");
        },
    });
};


tinymce.init({
  selector: 'div#html-editor',
  height: 200,
  theme: 'modern',
  plugins: [
    'advlist autolink lists link image charmap print preview hr anchor pagebreak',
    'searchreplace wordcount visualblocks visualchars code fullscreen',
    'insertdatetime media nonbreaking save table contextmenu directionality',
    'emoticons template paste textcolor colorpicker textpattern imagetools'
  ],
  toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
  toolbar2: 'print preview media | forecolor backcolor emoticons',
  image_advtab: true,
  paste_data_images: true,
  automatic_uploads: true,
  file_picker_callback: function(callback, value, meta) {
    imageFilePicker(callback, value, meta);
  }
 });

<input id="my-file" type="file" name="my-file" style="display: none;" onchange="" />

file_picker_callback: function (callback, value, meta) {
    if (meta.filetype == 'image') {
        var input = document.getElementById('my-file');
        input.click();
        input.onchange = function () {
            var file = input.files[0];
            var reader = new FileReader();
            reader.onload = function (e) {
                callback(e.target.result, {
                    alt: file.name
                });
            };
            reader.readAsDataURL(file);
        };
    }
}