TinyMCE file_picker_callback从默认的浏览器文件选择中选择图像 [英] TinyMCE file_picker_callback select image from default browser file selection

问题描述

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

我想单击下面的按钮：

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

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

JS：

  tinymce .init（{
选择器：'＃html-editor'，
语言：'pt_PT'，
插件：[
bdesk_photo advlist自动链接图片列表charmap preview hr anchor pagebreak ，
searchreplace wordcount visualblock 
table contextmenu directionality paste textcolor colorpicker imagetools
，
 add_unload_trigger：false，
 toolbar：styleselect |大胆的斜体| alignleft aligncenter alignright alignjustify | bullist numlist outdent indent |链接图片媒体预览| forecolor backcolor table，
 image_advtab：true，
 
 file_picker_callback：function（callback，value，meta）
 {
 $（'＃html-editor input'） .click（）; 
 
 //如何获取所选图像数据并添加到编辑器中？
}，
 
 paste_data_images：true，
 images_upload_handler：函数（blobInfo，成功，失败）
 {
 //没有上传，只需返回blobInfo.blob（）作为base64数据
成功（data：+ blobInfo.blob（）。键入+; base64，+ blobInfo.base64（））; 
} 
}）; 
  

HTML：

 < div id =html-editor> 
< input name =imagetype =filestyle =width：0; height：0; overflow：hidden;> 
< / div> 
  / pre> 
 
 
为了获得选定的文件并将其添加到编辑器中，我必须对 file_picker_callback 事件进行什么样的更改
解决方案
有同样的问题。使用下面的代码修复它，请记住浏览器必须支持FileReader（否则就插入你自己的脚本）。
 $ b （把它放在html页面的任何地方）： 
 < input id =my-filetype =filename =my-filestyle =display ： 没有; onchange =/> 
  
 js（在tinymce init config中）：
 
 
  file_picker_callback：function（callback，value，meta）{
 if（meta.filetype =='image'）{
 var input = document.getElementById 我的文件）; 
 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）; 
}; 
} 
} 
  
 
Im using TinyMCE in a project and want the user to select and upload images to the server using its default insert image window.

I want to click the following button:



Open the browsers default file select window and add the selected image to the editor:



My code so far is as follows..

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>
What kind of changes must i make to the file_picker_callback event in order to get the selected file and add it to the editor?
解决方案
Had the same problem. Using the following fixed it for me, remember that the browser must support FileReader (otherwise just insert your own script).

html (put this anywhere on the html page):
<input id="my-file" type="file" name="my-file" style="display: none;" onchange="" />
js (in the tinymce init config):
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从默认的浏览器文件选择中选择图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！