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

Расширенная версия редактора 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
    Скачиваний: 68
  • 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
    Скачиваний: 1
  • nicEdit-extended-ver.1.2-[ru].zip (521.43 Кб)
    Описание: Версия 1.2 локализованная на русский язык.
    Изменения:
    - Добавлен параметр `imanagerPath` - путь к каталогу с которого менеджер изображений начнёт свою работу.
    Тип: Архив ZIP
    Добавлен: 4 марта 2015
    Скачиваний: 15
  • 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
    Скачиваний: 1
  • nicEdit-extended-ver.1.3-[ru].zip (521.54 Кб)
    Описание: Версия 1.3 локализованная на русский язык.
    Изменения:
    - Добавлена регистронезависимая сортировка папок и файлов по имени.
    - Ссылка "Перейти на уровень выше" теперь всегда идёт первым пунктом в списке директорий и файлов.
    Тип: Архив ZIP
    Добавлен: 16 марта 2015
    Скачиваний: 82
  • 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
    Скачиваний: 30
  • nicEdit-extended-ver.1.4-[ru].zip (522.9 Кб)
    Описание: Версия 1.4 локализованная на русский язык.
    Изменения:
    - Добавлена возможность удаления файлов изображений с помощью менеджера изображений
    Тип: Архив ZIP
    Добавлен: 18 июля 2016
    Скачиваний: 240

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

Константин (Гость) 14 января 2020 / 19:30 #51 (236)
собрал и упаковал в архив, кому нужно пишите Telegram: @coder_ex

все что нужно будет сделать для интеграции в свои проекты, это заменить файл edit-success.php на свое ядро движка, т.е. интегрировать запросы $_POST если ваш сервер на php, про другие не в курсе, не работал с ними

ps. архив не могу тут выложить т.к. нет тут такого функционала
Константин (Гость) 14 января 2020 / 19:36 #52 (237)
вот как то так он выглядит вместе с всплывающими сообщениями )))
Lead Pepelats 15 января 2020 / 10:58 #53 (238)
Ну Константин прям взялся за никэдит :) Одобрям-с :) Если будете какие-то принципиальные доработки делать, могу выложить их здесь или можем совместно новый пост написать на тему nicEdit. Будут мысли, пишите мне через обратную связь.
Константин (Гость) 21 января 2020 / 21:16 #54 (239)
Долго я мучился и наконец то реализовал подключение плагином nicEdit

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

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