TinyMCE Drag and Drop проблемы с загрузкой изображений

Question

Некоторое время я пользовался TinyMCE, но теперь хочу реализовать функцию загрузки изображений с помощью перетаскивания. (т. е. куда вы можете перетащить изображение с локального компьютера в текстовый редактор, изменить его размер и переместить, и т. д., а затем загрузить его на сервер). Я собирался приобрести Redactor для этой функции, но затем я заметил, что TinyMCE имеет параметр paste_data_images, позволяющий изображения для перетаскивания / вставки непосредственно в редактор. Похоже, это преобразует его во встроенные данные в кодировке base64.

Я подозреваю и прочитал, что в теории это может быть возможно, чтобы это значение было отправлено на сервер, извлечь base64 uris из Dom, записать их в файл, заменить SRC на путь к вновь созданному файлу, а затем отправить текст в базу данных. Кто-нибудь достиг этого?

Из моего первоначального исследования я обнаружил, что проблемы могут быть:

• Огромные изображения (~100 МБ) потенциально могут быть вставлены в текстовое поле, что может вызвать проблемы.
• Похоже, что браузеры Internet Explorer 11 и Edge вообще не позволяют перетаскивать изображения в текстовое поле.

Кому-нибудь удалось заставить это работать без всяких сомнений?

С тех пор я дважды проверил Redactor и заметил, что он также не работает с IE и Edge.

Answer 1

TinyMCE 4.2+ actually has its own built in process for handling the upload of images that you place in the editor:

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

The basic process is that TinyMCE will create a separate HTTP POST for each image that you insert into the editor. Это изображение будет отправлено на URL по вашему выбору (через HTTP POST) в зависимости от настройки images_upload_url вариант в вашем init.

Обработчик изображения по URL, указанному в images_upload_url (который вы должны создать) должен делать все, что нужно, чтобы "сохранить" изображение в вашем приложении. Это может означать что-то вроде:

• Сохраните элемент в папке на вашем веб-сервере
• Сохранить предмет в базе данных
• Хранить товар в системе управления активами

... независимо от того, где вы решили сохранить изображение, ваш обработчик изображений должен возвращать одну строку JSON, сообщающую TinyMCE новое местоположение изображения. Как указано в документации TinyMCE, это может выглядеть так:

{ location : '/uploaded/image/path/image.png' }

Затем TinyMCE обновит атрибут src изображения до возвращаемого вами значения. Если вы используете images_upload_base_path setting в инициализации, которая будет добавлена ​​к возвращенному местоположению.

Суть в том, что TinyMCE знает, когда в вашем контенте существует встроенное изображение, но он не может знать, что делать с этим изображением в контексте вашего приложения, так что задание ("обработчик изображения") - это то, что вы должны создать.

As for the issues you reference...

• If a browser does not allow the drag/drop sequence you could look at using a file manager like MoxieManager or elFinder etc. They allow you to upload the image via a UI and have the uploaded image appear in your content in one step.
• Image size is always an issue. You could manage this on the server in the image upload handler and return an error if the image is "too large". You could also write your own image handler function and stop the upload altogether if the image is too large.