Свинцовый пепелац

NicEdit с менеджером изображений (ver. 2.0)

30 октября 2014

Обновление от 20 января 2015:

В моём блоге опубликована расширенная версия редактора NicEdit

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

Ознакомиться с расширенной версией NicEdit и посмотреть демо можно здесь.



Вступление

Теме дополнительного функционала для WYSIWYG редактора NicEdit я уже посвятил пару заметок (здесь и здесь), где описал достоинства и недостатки этого редактора, поэтому не буду на этом останавливаться. По ряду причин снова пришлось вернуться к теме работы с изображениями в NicEdit. Результатом стало написание версии 2.0 плагина «Менеджер изображений».

Тех. задание на доработку плагина

  • При отображении списка изображений имеющихся в директории рядом с названием файла изображения нужно отображать его миниатюру. Если невозможно создать миниатюру изображения (слишком большая картинка, отсутствие библиотеки GD2 в PHP или прочие неполадки), вместо миниатюры следует отображать иконку, соответствующую типу изображения (JPG, GIF, PNG).
  • Если изображение имеет размер по вертикали или по горизонтали больше некоторой величины (по умолчанию 500 пикселей), то на страницу должна вставляться уменьшенная копия этого изображения, обрамлённая ссылкой на оригинал (с атрибутом target="_blank"). Если же высота и ширина изображения не превышают указанного максимально допустимого размера, или не удалось создать уменьшенную копию изображения, то на страницу вставлять оригинальное изображение.
  • При вставке изображения на страницу оно должно иметь атрибуты width и height, соответствующие размеру изображения.
  • При загрузке файла на сервер при помощи «Менеджера изображений» названия файлов должны транслитерироваться, чтобы исключить возможность загрузки на сервер файлов с кириллическими названиями.

Результат

Плагин «Менеджер изображений» для NicEdit был модернизирован в соответствии с тех. заданием. Так же в новой версии плагина был исправлен ряд недочётов и ошибок выявленных в предыдущей версии. Проверил работоспособность в браузерах:

  • FF 32
  • IE 8
  • Opera 12
  • Chrome 38

Как с этим работать

  1. Установите курсор в то место в тексте, куда Вы желаете вставить изображение.
  2. Кликните по иконке «Менеджер изображений» на панели инструментов NicEdit.
  3. В появившемся окне Вы можете перемещаться по каталогам на сервере, просматривая их содержимое в поисках требуемого файла изображения. Если Вы хотите загрузить в выбранную директорию какое-либо изображение для последующей вставки его на страницу, Вам нужно будет обратиться к секции «Загрузить изображение». Кликните на кнопку выбора файла с жёсткого диска вашего компьютера и выберите нужный файл изображения. По окончанию загрузки файла на сервер он появится в списке файлов изображений текущей директории, после чего Вы сможете вставить его на страницу, просто кликнув на нёго мышкой.

Класс NicEdit (PHP)

PHP-класс NicEdit обеспечивает работу «Менеджера изображений» на стороне сервера. Этот класс можно легко интегрировать в нужную Вам систему (с проверкой доступа пользователя к просмотру содержимого директорий и загрузки файлов). При необходимости Вы можете переопределить имеющиеся в нём методы и свойства. Список некоторых свойств, которые Вам, возможно, понадобиться переопределить:

  • $maxDimension – максимальный размер ширины/высоты изображения, при превышении которого будет создана уменьшенная копия изображения для вставки на страницу (по умолчанию установлено 500 пикселей).
  • $memoryLimit - максимальный объем оперативной памяти сервера, который разрешается использовать скрипту при масштабировании изображений в байтах (по умолчанию установлено 128M).
  • $maxUploadSize – максимальный размер файла, разрешённого для загрузки (по умолчанию установлено 10 МБ, при значении 0 параметр игнорируется).
  • $uploadErr – массив содержащий список текстов ошибок возвращаемых классом в случае возникновения оных.

Следует иметь в виду, что при масштабировании анимированных GIF анимация игнорируется, чтобы не «раздувать» код класса. При желании этот недостаток можно устранить, переопределив метод miniatures() соответствующей реализацией.

В приложенном к статье архиве имеется скрипт «script.php», в котором представлен пример использования класса NicEdit.


Смотреть демо


Дополнительная информация

Как и в прошлый раз, за основу я взял NicEdit версии 0.9 r24 (релиз от 7 июня 2012). Кроме добавления указанного инструмента, представленная мной версия отличается от исходной тем, что я перевёл её на русский язык и переделал таблицы цветов у кнопок «Изменить цвет текста» и «Изменить цвет фона».

Добавлено 24 ноября 2014:

Раз уж данная заметка посвящена работе с изображениями в nicEdit, я решил опубликовать в ней же версию nicEdit, которая отличается от версии опубликованой мной на этой странице ранее тем, что для кнопки «Добавить изображение» я дописал функционал, позволяющий управлять такими атрибутами картинки как: ширина (width), высота (height), горизонтальные отступы (hspace), вертикальные отступы (vspace), класс (class) и стиль (style). Удивительно, но почему-то изначально указанный функционал в nicEdit-е отсутствовал, что создавало неприятную ситуацию с тем что для управления этими параметрами картинки приходилось лезть в HTML-код.

P.S. - Демо обновил

P.P.S. - Следует иметь ввиду что в версии nicEdit с расширенным функционалом по управлению атрибутами изображений изменены методы `setAttributes` (line 136) и `addForm` (line 939).

Метки: JavaScript, NicEdit, PHP, WYSIWYG

Прикреплённые файлы

  • nicEdit-[images-manager-2.0].zip (515.3 Кб)
    Тип: Архив ZIP
    Добавлен: 30 октября 2014
    Скачиваний: 20
  • nicEdit-[images-manager-2.0-and-advanced-features-for-images].zip (515.85 Кб)
    Описание: Для кнопки «Добавить изображение» добавлен функционал, позволяющий управлять такими атрибутами картинки как: ширина (width), высота (height), горизонтальные отступы (hspace), вертикальные отступы (vspace), класс (class) и стиль (style)
    Тип: Архив ZIP
    Добавлен: 24 ноября 2014
    Скачиваний: 52

Комментарии посетителей

Илья (Гость) 4 марта 2015 / 12:25 #1 (138)
Добрый день, опять я, подскажите как вставить раздел "смайлики" в редактор ?
Lead Pepelats 4 марта 2015 / 14:16 #2 (140)
Для начала нужно написать плагин который позволит вставлять смайлики на страницу :) Я чёт такого плагина не видел на http://nicedit.com/
Алексей (Гость) 4 января 2016 / 03:08 #3 (153)
Здравствуйте.
Не могу разобраться... Установил на локалку, работает отлично. Устанавливаю на хостинг, при нажатии на иконку загрузки изображения, выдаёт ошибку, некорректный ответ от с рвера. В чем может быть проблема?
Хостинг бесплатный.
Lead Pepelats 4 января 2016 / 12:16 #4 (154)
Алексей, приветствую!

Возможно дело в том, что у Вас не верно указан адрес РНР скрипта который отдает список файлов на сервере. Попробуйте пропишите в параметре imanagerURI не относительный, а абсолютный путь к нужному РНР скрипту.

А вообще рекомендую использовать более позднюю версию моих доработок nicedit ( http://lead-pepelats.ru/blog/nicedit-extended-version/ ), ибо там исправлены ошибки имеющиеся в версии из этого поста.

Все праздники сижу в интернете с утюга, поэтому мне сложно более подробне ответить на Ваш вопрос.
Aлексей (Гость) 4 января 2016 / 18:00 #5 (155)
Пробовал, прописывал полный путь до script.php... , все тоже самое, при нажатии на иконку файлового менеджера открывается окошко "загрузить изображение, в нем есть кнопка "выберите файл" и сообщение красным шрифтом "Не удалось получить список файлов из-за некорректного ответа сервера".

Может быть дело в этом коде?
include(dirname(__FILE__) . '/nicEdit/nicedit.lib.php');

Расположение файлов на хостинге такое: http://мой_сайт/blog/admin/ . На локалке все работает, а на хостинге нет. Скачал более позднюю версию, все тоже самое.

Очень нравиться данный редактор, да и в настройках легкий.

Может ли быть причиной данной ошибки какие-нибудь запреты на хостинге? И не может ли быть это из-за base_dir?
Lead Pepelats 4 января 2016 / 18:50 #6 (156)
Попробуйте сымитируйте на локальном хосте ситуацию схожую с тем что у Вас на внешнем хосте (вложенность папок). А, кстати может проблема в dirname(__FILE__). Надо подумать, а в праздники чет не выходит ;) Тем более у меня комп не под рукой (с калоши пишу).
Алексей (Гость) 5 января 2016 / 00:38 #7 (157)
Попробовал, сымитировал))), понял, точно дело в путях... Но так и не разобрался( Что самое обидное, сам файл script.php выполняется, а вот когда дело доходит до чтения дириктории, выдаёт некорректный ответ от сервера. Хостер молчит, т. к. бесплатный...
Блин...!
Алексей (Гость) 6 января 2016 / 20:37 #8 (158)
Выяснил что абсолютный путь у меня на хостинге такого вида:
/home/папка_клиента/public_html/

Изменил код файла script.php на:
...
include($_SERVER['DOCUMENT_ROOT'].'blog/admin/nicEdit/nicedit.lib.php');
$p = new NicEdit($_SERVER['DOCUMENT_ROOT']);
...

Бес толку. Все таже ошибка...
Может быть помимо script.php нужно что-то изменить и в nicedit.lib.php ? Может $DocRoot, только не понимаю что именно?
Подскажите?
Lead Pepelats 7 января 2016 / 00:12 #9 (159)
Алексей, волею судеб, я смогу Вам помочь не ранее 11-го января. Уверен что проблема решаема. Потерпите :)
Алексей (Гость) 7 января 2016 / 12:44 #10 (160)
Спасибо. Буду подождать)))
Lead Pepelats 13 января 2016 / 08:19 #11 (161)
Алексей, приветствую!

Начал разбираться с Вашей проблемой :)
Давайте разбираться.
Можете написать пути до расположения файлов nicedit-а, а также путь к странице на которой редактор используется?
Алексей (Гость) 13 января 2016 / 09:16 #12 (162)
Здравствуйте.
Разобрался...)))
Поменял __File__ на DOCUMENT_ROOT, соответсвено прописал $_SERVER['DOCUMENT_ROOT'] = "/home/a1512798/public_html/"; в начале script.php.
Кое что поменял в самой библиотеке, относительно путей. Все заработало как и полагается. Все дело в настройке хостинга, это связанно с защитой, т. к. бесплатный)))
Lead Pepelats 13 января 2016 / 10:28 #13 (163)
Ну отлично!
Когда сам дотумкаешь это всегда лучше чем когда кто-то подсказал :)
Николай (Гость) 3 июня 2016 / 13:07 #14 (164)
Прежде всего респект!
Единственное чего не хватает это возможности
в Менеджере изображений Удалять изображения.
Можете помочь с этим?
Lead Pepelats 3 июня 2016 / 17:03 #15 (165)
Приветствую!

Прежде всего всё таки рекомендую Вам более актуальную версию моих доработок этого редактора (см. http://lead-pepelats.ru/blog/nicedit-extended-version/ ).

Что касается удаления картинок с сервера через редактор, то этого функционала я не делал из соображений что пусть лучше на серваке будет лежать лишняя картинка, чем по ошибке удалят что-то что удалять не стоило :) Да и по секьюрности как-то стремновато :)
Николай (Гость) 4 июня 2016 / 12:21 #16 (166)
Просто Менеджер изображений (файлов) это неотъемлемая часть любого редактора посути. А основные функции менеджера это закачка на сервер и удаление.
По безопасности больше опасна функция закачки . там надо проверять что качают (тип файла... )
А чтобы случайно не удалили то что не нужно то надо рабочие файлы защищать теми или иными способами .
Этот редактор который вы доработали я бы сказал просто суперски! у него не хватает вот этой единственной детали. Иначе для использования в каком либо проекте нужно отдельно реализовывать файловый менеджер вне интеграции с редактором.

Написать комментарий

Имя:
e-mail
(НЕ обязателен, НЕ публикуется на сайте):
Сообщение:
Прикрепить изображение (не более 5 Мб):