TinyMCE file_picker_callback выбрать изображение из выбора файла браузера по умолчанию

Я использую 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, чтобы получить выбранный файл и добавить его в редактор?


file-upload tinymce tinymce-4 filechooser
person Ricky    schedule 20.01.2016    source источник
comment
Вы действительно должны отметить ответ @Karl Morrisons как правильный.   -  person jayarjo    schedule 31.10.2016

Ответы (2)


arrow_upward
10
arrow_downward

Была такая же проблема. Используя следующие исправления для меня, помните, что браузер должен поддерживать 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);
        };
    }
}
person basickarl    schedule 23.05.2016
comment
Вы также можете создать это поле ввода на лету внутри file_picker_callback и удалить, как только вы прочитали выбранный файл в память. - person jayarjo; 31.10.2016
comment
На сайте TinyMCE есть демонстрация, в которой вместо этого используются URI больших двоичных объектов: tinymce.com/ docs / demo / file-picker - person jayarjo; 13.12.2016
comment
спасибо, но после загрузки изображения экран просто заморозился и через некоторое время попросил меня убить страницу. пожалуйста помоги - person siddharth shah; 09.04.2020

arrow_upward
0
arrow_downward

Пытаться

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);
  }
 });
person Thariama    schedule 21.01.2016
comment
ваше решение предназначено для настраиваемого файлового менеджера, я бы хотел использовать средство выбора файлов по умолчанию для выбора локального изображения: ссылка - person Ricky; 21.01.2016