tinyMCE - как обрабатывать загрузки изображений

Question

У меня есть сайт, где люди публикуют новости, они написаны на PHP.

До сих пор люди, которые публикуют истории, имели текстовую область для ввода текста и поле формы для загрузки изображения для истории.

Сейчас я обновляю сайт и собираюсь предоставить людям больше гибкости, поэтому я планирую использовать текстовый редактор WYSIWYG на языке javascript.

После обзора наиболее популярных, или, по крайней мере, тех, которые я нашел, я думаю, что tinyMCE лучше всего документирован, и поэтому я думаю, что я собираюсь пойти с этим, хотя я только работал с этим в течение приблизительно 4-5 часов, так что мне все равно, придется ли мне переключаться на другой редактор.

Когда вы перетаскиваете изображения в текстовое поле, tinyMCE кодирует изображение в base64 и использует его в качестве атрибута src для тега изображения.

Мне было интересно, есть ли способ заставить tinyMCE загружать изображения на сервер в виде файлов, чтобы я мог обрабатывать их с помощью php (делать миниатюры, присваивать им имена и сохранять их по своему желанию)?

Если нет, есть ли редактор, где это будет вариант?

Answer 1

Есть еще один плагин для крошечного mce, который является бесплатным и открытым исходным кодом. Вы можете использовать это
http://justboil.me/tinymce-images-plugin/

Answer 2

Я рекомендую " Отзывчивый файловый менеджер"

Это бесплатный файловый менеджер с открытым исходным кодом и менеджер изображений, созданный с помощью библиотеки jQuery, CSS3, PHP и HTML5, который предлагает приятный и элегантный способ загрузки и вставки файлов, изображений и видео.

ОСОБЕННОСТИ:

1. Загружайте файлы простым перетаскиванием.
2. Используйте в качестве автономного файлового менеджера, в качестве плагина TinyMCE, CKEditor или CLEditor или как кросс-домен.
3. Многие параметры настройки, такие как автоматическое изменение размера загружаемых изображений, необязательное ограничение размеров изображения, списки разрешенных файлов.
4. Полный предварительный просмотр загруженных изображений, видео и аудио.
5. Автоматическое создание миниатюр и Автоматическая реорганизация миниатюр после внешних изменений

а также...

Answer 3

Есть платный плагин файловый менеджер под названием MCImageManager

Или вы можете интегрировать uplodify или что-то подобное во всплывающее окно добавления изображения, а затем при загрузке изображения обновить файл tinyMCEImageList.js.

Answer 4

Вот простой вариант загрузки изображений из TinyMCE непосредственно с помощью кнопки на панели инструментов с использованием Plupload без необходимости использования дополнительных всплывающих окон. Примечание. Это позволяет выбрать файл с помощью средства выбора файлов, но не поддерживает перетаскивание.

Добавьте кнопку в tinymce с идентификатором "mybutton" и отсутствием события щелчка:

tinymce.init({selector:'.use-tinymce', 
    plugins: "code link visualblocks", 
    menubar: false,
    extended_valid_elements : "span[!class]",
    toolbar: "undo redo | formatselect | link code | mybutton",
    visualblocks_default_state: true,
    setup: function(editor) {
        editor.addButton('mybutton', {
            type: 'button',
            title: 'Insert image',
            icon: 'image',
            id: 'mybutton'
        });
        editor.on('init', function(e) {
            var pluploadHandler = new PluploadHandler(jQuery, plupload);
        });
    }           
});     

Ссылка на эту кнопку в инициализации Plupload:

var PluploadHandler = function( $, plupload ) {
    ...
    this.uploader = new plupload.Uploader({
        runtimes : 'html5,flash,silverlight,html4',
        browse_button : document.getElementById('mybutton'),
        url : '/path/to/upload/the/image',  

Вам нужно будет написать код на стороне сервера для вашего пути загрузки /path/to/upload/the/image сохранить изображение и ответить URL-адресом нового изображения.

Наконец поймайте загруженный ответ и добавьте свой тег изображения в TinyMCE:

    this.uploader.init();
    this.uploader.bind("FilesAdded", handlePluploadFilesAdded);
    this.uploader.bind("FileUploaded", handlePluploadFileUploaded);

    function handlePluploadFilesAdded(up, files) {
        console.log("+ handlePluploadFilesAdded");
        up.start();
    }

    function handlePluploadFileUploaded(up, file, res) {
        console.log("++ res.response: " + JSON.stringify(res.response));
        var img = "<img src='" + res.response + "?" + Date.now() + "'>";
        tinymce.activeEditor.execCommand('mceInsertContent', false, img);
    }
}

Полный исходный код находится здесь (протестировано на TinyMCE 4.1.9; Plupload 2.1.2): https://gist.github.com/danielflippance/e1599fd58ada73b56bfb

Answer 5

Попробуйте PDW File Browser. В отличие от веб-страницы, он действительно хорош (и, на мой взгляд, интуитивно понятен, поскольку предлагает графический интерфейс, похожий на MS Windows File Explorer).