TinyMCE file_picker_callback select 图片来自默认浏览器文件 selection

Question

我在一个项目中使用 TinyMCE 并希望用户 select 并使用其默认插入图像 window 将图像上传到服务器 window。

我要点击以下按钮：

打开浏览器默认文件 select window 并将 selected 图像添加到编辑器：

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

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 事件进行哪些更改才能获取 selected 文件并将其添加到编辑器？

Answer 1

尝试

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

Answer 2

有同样的问题。使用以下为我修复它，请记住浏览器必须支持 FileReader（否则只需插入您自己的脚本）。

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

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

js（在 tinymce 初始化配置中）：

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

TinyMCE file_picker_callback select 图片来自默认浏览器文件 selection

TinyMCE file_picker_callback select image from default browser file selection

tinymce

file-upload

filechooser

tinymce-4