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, который предлагает приятный и элегантный способ загрузки и вставки файлов, изображений и видео.

enter image description here

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

  • Загрузка файлов с помощью простого перетаскивания.
  • Использовать в качестве автономного файлового менеджера как 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).