Блог / Расширенная версия редактора NicEdit - работа с изображениями, таблицами, поддержка функции обратного вызова и прочее...
20 января 2015
Общее
Являясь поклонником WYSIWYG редактора NicEdit, я написал для него несколько новых плагинов, доработал некоторые имеющиеся плагины и ядро самого редактора. Свои наработки я решил опубликовать, выпустив расширенную версию NicEdit, которой, и посвящена данная заметка.
В настоящий момент дальнейшая доработка NicEdit автором завершена, о чём имеется уведомление на сайте проекта. Получилось так, что дописывая новый функционал для данного редактора, я фактически стал заниматься его дальнейшим развитием и поддержкой (смотри подборку публикация на эту тему в моём блоге).
Расскажу подробнее о доработках, которые включены в представленную здесь расширенную версию NicEdit.
Работа с изображениями
Начал я с того, что добавил в NicEdit функционал для более комфортной работы с изображениями (просмотр директорий на сервере в поисках файлов изображений для вставки их на страницу, а так же кроссбраузерная загрузка изображений на сервер с последующей вставкой на страницу). Результатом эволюции этого функционала стал плагин «Менеджер изображений» (версия 2.0).
Пример запуска NicEdit с «Менеджером изображений».
В тэге <head> вашего HTML документа добавить следующие строки:
<script type="text/javascript" src="nicEdit/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor({
imanagerURI: 'index.php?q=imgr',
iconsPath: 'nicEdit/nicEditorIcons.gif'
}).panelInstance('test');
});
</script>Все настройки и прочую информацию по NicEdit Вы можете найти на сайте проекта - http://nicedit.com/, здесь же Вам нужно обратить внимание только на параметр «imanagerURI». Без правильного указания этого параметра, «Менеджер изображений» работать не будет.
На самой странице должно иметься текстовое поле с соответствующим id:
<textarea cols="60" id="test"></textarea>Работу «Менеджера изображений» на стороне сервера обеспечивает PHP-класс NicEdit (файл nicedit.lib.php). Этот класс можно легко интегрировать в нужную Вам систему (с проверкой доступа пользователя к просмотру содержимого директорий и загрузки файлов). При необходимости Вы можете переопределить имеющиеся в нём методы и свойства. Список некоторых свойств, которые Вам, возможно, понадобиться переопределить:
- $maxDimension – максимальный размер ширины/высоты изображения, при превышении которого будет создана уменьшенная копия изображения для вставки на страницу (по умолчанию установлено 500 пикселей).
- $memoryLimit - максимальный объем оперативной памяти сервера, который разрешается использовать скрипту при масштабировании изображений в байтах (по умолчанию установлено 128M).
- $maxUploadSize – максимальный размер файла, разрешённого для загрузки (по умолчанию установлено 10 МБ, при значении 0 параметр игнорируется).
- $uploadErr – массив содержащий список текстов ошибок возвращаемых классом в случае возникновения оных.
Следует иметь в виду, что при масштабировании анимированных GIF анимация игнорируется, чтобы не «раздувать» код класса. При желании этот недостаток можно устранить, переопределив метод miniatures() соответствующей реализацией.
В приложенном к статье архиве имеется скрипт «script.php», в котором представлен пример использования класса NicEdit.
Также я доработал имеющийся функционал для управления параметрами изображения (добавил управление такими атрибутами картинки как: ширина (width), высота (height), горизонтальные отступы (hspace), вертикальные отступы (vspace), класс (class) и стиль (style)).
Работа с таблицами
Добавлен функционал, позволяющий пользователям не искушённым в HTML легко создавать и редактировать таблицы (включая добавление/удаление строк и столбцов, объединение/разбиение ячеек по вертикали и горизонтали, управление атрибутами таблиц, строк и ячеек). Огромное спасибо форуму сайта JavaScript.ru и конкретно пользователю с ником «Дзен-трансгуманист», опубликовавшему в теме посвящённой работе с таблицами некоторые идеи, которые мне помогли в создании описываемого функционала.
Функция обратного вызова
Теперь при инициализации редактора можно указать функцию обратного вызова, передав её параметром «instance_callback». Эта функция будет вызвана по завершении инициализации редактора.
Данная доработка оказалась очень полезной для решения имеющейся в WebKit браузерах (Google Chrome, Opera 15+ и прочие...) проблемы ресайза изображений и элементов таблиц простым потягивание их мышкой за уголок. Для этого теперь можно использовать JQuery плагин «Webkit Resize» от EditorBoost.
Пример использования NicEdit с плагином «Webkit Resize»:
<!-- Подключаем библиотеку JQuery -->
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<!-- Для JQuery версии 1.9 и выше подключаем jquery.mb.browser.min.js
(из-за отсутствия у этих версий JQuery свойства $.browser) -->
<script type="text/javascript" src="jquery.mb.browser.min.js"></script>
<!-- Подключаем плагин Webkit Resize -->
<script type="text/javascript" src="jquery.webkitresize.nonifrm.js"></script>
<!-- Подключаем NicEdit -->
<script type="text/javascript" src="nicEdit/nicEdit.js"></script>
<!-- Инициализация NicEdit -->
<script type="text/javascript">
bkLib.onDomLoaded(function() {
new nicEditor({
iconsPath: 'nicEdit/nicEditorIcons.gif',
instance_callback: function() {
$(".nicEdit-main").webkitimageresize().webkittableresize().webkittdresize();
}
}).panelInstance('test');
});
</script>Читай подробности на сайте проекта EditorBoost.
По поводу плагина «Webkit Resize» хочу ещё заметить, что у таблиц он работает только с элементами TD и игнорирует элементы TH. Чтобы исправить это досадное упущение разработчиков нужно в файле jquery.webkitresize.nonifrm.js в строке 673 сделать небольшое изменение:
Было:
context.$container.find("td").each(function (i, v) {Стало:
context.$container.find("td, th").each(function (i, v) {Прочие доработки
Кроме перечисленных доработок я ещё поменял в NicEdit набор цветов в таблицах управления цветом шрифта и фона, от чего управление цветом стало удобнее.
Дополнительная информация
За основу я взял NicEdit версии 0.9 r24 (релиз от 7 июня 2012).
Итого
К данной заметке приложен архив, содержащий в себе расширенную версию NicEdit. Если Вы обнаружили в опубликованной здесь версии NicEdit ошибки или у Вас возникли какие-нибудь вопросы или предложения по части дальнейших доработок, сообщите об этом в комментариях к данной странице. Все исправления и новые доработки в дальнейшем будут публиковаться на этой странице (читайте комментарии к статье и описания приложенных файлов).
Обновление до версии 1.2 (4 марта 2015)
В соответствии с пожеланиями пользователей менеджеру изображений добавлен параметр `imanagerPath` - путь к каталогу с которого менеджер изображений начинает свою работу. Если параметр не указан, открывается корневая директория (как раньше). Демо обновил - теперь в нём для демонстрации по умолчанию открывается директория `images`.
Обновление до версии 1.3 (16 марта 2015)
- Добавлена регистронезависимая сортировка папок и файлов по имени.
- Ссылка "Перейти на уровень выше" теперь всегда идёт первым пунктом в списке директорий и файлов.
Обновление до версии 1.4 (18 июля 2016)
- Добавлен функционал позволяющий удалять изображения на сервере через менеджер изображений (в демо версию 1.4 не выставлял).
Читайте также:
Комментарии посетителей (68):
Не заню ошибка это или я чего то не понимаю, но вот к примеру если я хочу загружать изображения в индивидуальную папку статьи. Т.е. к примеру в папке images при создании статьи у меня создается директория с номером статьи, поэтому папка images у меня содержит папки 200, 201, 202, 203... Так вот nicEdit их не видит вместо этого он выдает название папок 1,2,3,4,5 может быть я что то не понимаю, разъясните пожалуйста. И еще могу ли я как то передавать GET или POST в nicedit.lib в для $path что бы он мне сразу предлагал директорию статьи для загрузки изображения. Спасибо, жду вашего ответа.
Вот к моему комментарию выше прикладываю скриншот
Здравствуйте, Илья!
Вы уже второй человек который высказывается о том что неплохо бы добавить возможность передавать менеджеру изображений $path чтобы сразу открывалась определённая директория. Похоже придётся это докрутить :)
По поводу названий папок (1,2,3,4,5) - странно конечно. Похоже РНР часть чудит. Попробую у себя локально эту ситуацию сымитировать - отпишусь о результатах эксперимента.
Ха! Действительно 1,2,3,4,5... Ща буду разбираться :)
Заметил кое что, если увеличить имя папки до 11 символов ( было к примеру 201, 202, 203 а сделать 20001110001, 20001110002, 20001110003 ) то название будет отображаться правильно, на 10 символах в имени папки уже не работает.
Ну и прикрутите на сайте донат - не нашел как поддержать проект ? :)
Проблема с числовыми названиями папок возникла из-за использования в файле nicedit.lib.php в строке 117 ф-ции array_merge(). Вместо неё для "слития" двух массивов с сохранением ключей нужно использовать "+".
Было:
array_merge($folders, $this->files)
Стало:
$folders + $this->files
Ошибку исправил (версия 1.1), прикрепил к статье архив с версией 1.1, демо обновил.
Илье спасибо за сигнал :)
Добавил в конце статьи кнопу "Поддержи проект" :)