При написании статей через редактор TinyMCE у большинства пользователей возникает необходимость вставки картинок в текст, но по умолчанию редактор позволяет это сделать только с уже загруженным в некое место изображением через указание url. Для загрузки изображений «на лету» прямо из редактора возможно использование плагинов, но большинство адекватно работающих стоят денег, причем, многие довольно больших. Посмотрим, что можно сделать используя бесплатные инструменты.
Justboil.me — плагин для загрузки изображений в TinyMCE
Если не нужна базовая функция загрузки фото без каких либо отображений списков или других обработок, то на этот случай существует довольно много различных плагинов написанных энтузиастами. Мне, например, нравится justboil.me.
На официальном сайте заявлены следующие функции:
- Загрузка картинок в 2 клика;
- Опционально авторесайз изображений (Максимальная высота и ширина могут быть заданы в конфигурационном файле);
- Опционально запрет на загрузку файлов более определенной высоты или ширины и размера изображения (определяется в конфигурационном файле);
- Опционально блокировка загрузки форматов файлов не помеченных как разрешенные.
Скрипт работает как с версией TinyMCE 4 так и с более старой версией 3.5.x. Для манипуляций с загружаемыми файлами требуется библиотека GD2 .
Quivive File-Manager — плагин просмотра загруженных файлов
Для отображения списка загруженных файлов можно воспользоваться плагином Quivive File-Manager
Большим набором функционала этот плагин не обладает и позволяет просто отобразить список файлов и вставить один из них в поле редактора. В принципе тоже не плохой вариант, особенно в сочетании с предыдущим плагином загрузки файлов.
RESPONSIVE filemanager — плагин для управления и загрузки файлов через TinyMCE
Данный плагин обладает довольно большим функционалом и при этом абсолютно бесплатный если использовать его в личных проектах. Распространяется по лицензии Creative Commons Attribution-NonCommercial 3.0
Полное описание и способы установки можно посмотреть на официальном сайте, я же просто приведу список основных возможностей:
- Загрузка файлов методом drag & drop или с помощью JAVA апплета без ограничения размера
- Использование автономного файлового менеджера
- Построен на современных веб стандартах с использованием Bootstrap и респонсив верстки
- Каждая папка может иметь различные конфигурации и права доступа
- Множество параметров кастомизации (например,автоматический ресайз загружаемых изображений, лимит на размеры и разрешенные типы загружаемых файлов)
- Свайп действие для отображения кнопок на сенсорных устройствах
- Автоматическая генерация и перегенерация превью после изменения файлов картинок
- Совместимость со старыми браузерами
- Полноценные превью для изображений, аудио и видео файлов
- Локализация
- Сортировка файлов по различным параметрам
- Редактирование изображений с помощью Aviary image editor
- и много других интересных функций
Responsive filemanager для Silex
Бонусом прилагаю адаптированную для использования фреймворком Silex версию плагина responsivefilemanager. Скачать можно в github. Версия немного не доработана, но большинство функций работают хорошо. Если есть желание поддержать разработку, то можно смело делать свои коммиты в репозиторий.
Вариант плагина управления файлами для TinyMCE 3
Кто использует старую версию редактора (TinyMCE 3.x) можно попробовать использовать плагин Open Manager