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

Расширенная версия редактора 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 не выставлял).
Метки: JavaScript, NicEdit, PHP, WYSIWYG

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

  • nicEdit-extended-ver.1.0-[ru].zip (521.41 Кб)
    Описание: Версия 1.0 локализованная на русский язык
    Тип: Архив ZIP
    Добавлен: 13 января 2015
    Скачиваний: 57
  • nicEdit-extended-ver.1.0-[en].zip (520.31 Кб)
    Описание: English Localization of version 1.0
    Тип: Архив ZIP
    Добавлен: 13 января 2015
    Скачиваний: 12
  • nicEdit-extended-ver.1.1-[ru].zip (521.41 Кб)
    Описание: Версия 1.1 локализованная на русский язык.
    Изменения:
    - Исправлена ошибка отображения папок имеющих числовое имя.
    Тип: Архив ZIP
    Добавлен: 25 февраля 2015
    Скачиваний: 3
  • nicEdit-extended-ver.1.1-[en].zip (520.3 Кб)
    Описание: English Localization of version 1.1
    Changes:
    - Fixed display of folders has a numeric name.
    Тип: Архив ZIP
    Добавлен: 25 февраля 2015
    Скачиваний: 0
  • nicEdit-extended-ver.1.2-[ru].zip (521.43 Кб)
    Описание: Версия 1.2 локализованная на русский язык.
    Изменения:
    - Добавлен параметр `imanagerPath` - путь к каталогу с которого менеджер изображений начнёт свою работу.
    Тип: Архив ZIP
    Добавлен: 4 марта 2015
    Скачиваний: 10
  • nicEdit-extended-ver.1.2-[en].zip (520.32 Кб)
    Описание: English Localization of version 1.2
    Changes:
    - Added an option `imanagerPath` - path of directory from which images manager will begin work.
    Тип: Архив ZIP
    Добавлен: 4 марта 2015
    Скачиваний: 0
  • nicEdit-extended-ver.1.3-[ru].zip (521.54 Кб)
    Описание: Версия 1.3 локализованная на русский язык.
    Изменения:
    - Добавлена регистронезависимая сортировка папок и файлов по имени.
    - Ссылка "Перейти на уровень выше" теперь всегда идёт первым пунктом в списке директорий и файлов.
    Тип: Архив ZIP
    Добавлен: 16 марта 2015
    Скачиваний: 76
  • nicEdit-extended-ver.1.3-[en].zip (520.42 Кб)
    Описание: English Localization of version 1.3
    Changes:
    - Added case-insensitive sorting files and folders by name.
    - Link "Go to level up" is always the first item in the list of directories and files.
    Тип: Архив ZIP
    Добавлен: 16 марта 2015
    Скачиваний: 25
  • nicEdit-extended-ver.1.4-[ru].zip (522.9 Кб)
    Описание: Версия 1.4 локализованная на русский язык.
    Изменения:
    - Добавлена возможность удаления файлов изображений с помощью менеджера изображений
    Тип: Архив ZIP
    Добавлен: 18 июля 2016
    Скачиваний: 118

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

Lead Pepelats
1 июля 2016 / 19:27
#26 (181)
Если изображение имеет размер по вертикали или по горизонтали больше некоторой величины (по умолчанию 500 пикселей), то на страницу должна вставляться уменьшенная копия этого изображения, обрамлённая ссылкой на оригинал (с атрибутом target="_blank"). Если же высота и ширина изображения не превышают указанного максимально допустимого размера, или не удалось создать уменьшенную копию изображения, то на страницу вставлять оригинальное изображение.
Lead Pepelats
18 июля 2016 / 14:07
#27 (182)
Опубликована новая версия редактора nicEdit-extended-ver.1.4-[ru] (см. прикреплённые файлы), в которой добавлен функционал позволяющий удалять файлы изображений прямо через менеджер изображений.
дима (Гость)
27 июля 2016 / 15:24
#28 (183)
Добрый день. Спасибо за доработку. У меня не загружается изображение, если это делать не через менеджер. Как возможно сделать так, что бы изображение сразу загружалась в редактор. Без выбора её из менеджера. Спасибо ))
Lead Pepelats
27 июля 2016 / 15:46
#29 (184)
> У меня не загружается изображение, если это делать не через менеджер.

Ну, мне нужны подробности :) Какой у Вас браузер, что вы делаете и что после своих действий видите в редакторе?
Dmitrij (Гость)
28 декабря 2016 / 23:58
#30 (185)
для выбора цветов я бы прикрутил такой Color Picker
http://jscolor.com/examples/
на мой взгляд он самый удобный
Дмитрий (Гость)
28 июня 2017 / 12:44
#31 (200)
Здравствуйте,исправьте пожалуйста ссылку на скачивание,вместо файла скачивается страница
Lead Pepelats
28 июня 2017 / 14:56
#32 (201)
Всё нормально скачивается, только надо иметь ввиду, что для скачивания сначала попадаешь на страницу с где капчу надо ввести.
Будьте внимательнее.
Дмитрий (Гость)
28 июня 2017 / 17:49
#33 (202)
Да действительно скачивает,только через браузер,а вот через DownloadMaster ссылке добавляется .htm и качает страницу с каптчей
Дмитрий (Гость)
28 июня 2017 / 19:25
#34 (203)
Ошибка в менеджере об некорректном ответе сервера.
Вот такое выдает в отладчике браузера
br />
<b>Warning</b>: include(D:\OpenServer\domains\umicro.test\user_cms\themes\default_admin\redactor/user_cms/themes/default_admin/redactor/nicedit.lib.php) [<a href='function.include'>function.include</a>]: failed to open stream: No such file or directory in <b>D:\OpenServer\domains\umicro.test\user_cms\themes\default_admin\redactor\script.php</b> on line <b>3</b><br />
<br />
<b>Warning</b>: include() [<a href='function.include'>function.include</a>]: Failed opening 'D:\OpenServer\domains\umicro.test\user_cms\themes\default_admin\redactor/user_cms/themes/default_admin/redactor/nicedit.lib.php' for inclusion (include_path='.;d:/openserver/modules/php/PHP-5.3;d:/openserver/modules/php/PHP-5.3/PEAR/pear') in <b>D:\OpenServer\domains\umicro.test\user_cms\themes\default_admin\redactor\script.php</b> on line <b>3</b><br />
<br />
<b>Fatal error</b>: Class 'NicEdit' not found in <b>D:\OpenServer\domains\umicro.test\user_cms\themes\default_admin\redactor\script.php</b> on line <b>4</b><br />

nicEdit.js:1709 SyntaxError: Unexpected token <
at XMLHttpRequest.xmlhttp.onreadystatechange (nicEdit.js:1696)

Подскажите пожалуйста как исправить!

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

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