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

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

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

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

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

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

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

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

Ответ 1

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

Ответ 2

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

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

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

Загрузка файлов с помощью простого перетаскивания.
Использовать в качестве автономного файлового менеджера как TinyMCE, CKEditor или CLEditor плагин или как crossdomain.
Многие параметры настройки, такие как автоматическое изменение размера загруженного изображения, необязательное ограничение размеров изображения, списки разрешенных файлов.
Полный просмотр загруженных изображений, видео и аудио.
Автоматическое создание эскизов и автоматическая переустановка эскизов после внешних изменений

и...

Ответ 3

Существует платный файловый менеджер плагинов, называемый MCImageManager

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

Ответ 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

Ответ 5

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