TinyMCE file_picker_callback从默认浏览器文件选择中选择图像

Question

我在项目中使用TinyMCE,希望用户使用默认的插入图像窗口选择图像并将其上传到服务器.

我想点击以下按钮:

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

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

JS:

tinymce.init({
        selector: '#html-editor',
        language: 'pt_PT',
        plugins: [
            "bdesk_photo advlist autolink link image lists charmap preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code media nonbreaking",
            "table contextmenu directionality paste textcolor colorpicker imagetools"
        ],
        add_unload_trigger: false,
        toolbar: "styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media preview | forecolor backcolor table",
        image_advtab: true,

        file_picker_callback: function (callback, value, meta)
        {
            $('#html-editor input').click();

            //how to get selected image data and add to editor?
        },

        paste_data_images: true,
        images_upload_handler: function (blobInfo, success, failure)
        {
            // no upload, just return the blobInfo.blob() as base64 data
            success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64());
        }
    });

HTML:

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

我必须对file_picker_callback事件进行哪些更改才能获取所选文件并将其添加到编辑器中？

Answer 1

有同样的问题.使用以下修复它,请记住浏览器必须支持FileReader(否则只需插入自己的脚本).

html(把它放在html页面的任何地方):

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

js(在tinymce init配置中):

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);
        };
    }
}