代码之家 › 专栏 › 技术社区 › Ricky

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

filechooser tinymce-4 tinymce file-upload

6

Ricky · 技术社区 · 9 年前

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

我想单击以下按钮:

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

到目前为止,我的代码如下。。

简体中文:

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>

我必须对 文件选择器回调 事件以获取所选文件并将其添加到编辑器中?

2 回复 | 直到 9 年前

1

12

basickarl 8 年前

有同样的问题。使用下面的修复程序,请记住浏览器必须支持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);
        };
    }
}

2

0

Thariama 9 年前

尝试

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