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

Расширенная версия редактора 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
    Скачиваний: 56
  • 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
    Скачиваний: 75
  • 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
    Скачиваний: 106

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

Илья (Гость)
25 февраля 2015 / 00:08
#1 (130)
Не заню ошибка это или я чего то не понимаю, но вот к примеру если я хочу загружать изображения в индивидуальную папку статьи. Т.е. к примеру в папке images при создании статьи у меня создается директория с номером статьи, поэтому папка images у меня содержит папки 200, 201, 202, 203... Так вот nicEdit их не видит вместо этого он выдает название папок 1,2,3,4,5 может быть я что то не понимаю, разъясните пожалуйста. И еще могу ли я как то передавать GET или POST в nicedit.lib в для $path что бы он мне сразу предлагал директорию статьи для загрузки изображения. Спасибо, жду вашего ответа.
Илья (Гость)
25 февраля 2015 / 09:39
#2 (131)
Вот к моему комментарию выше прикладываю скриншот
Lead Pepelats
25 февраля 2015 / 10:04
#3 (132)
Здравствуйте, Илья!

Вы уже второй человек который высказывается о том что неплохо бы добавить возможность передавать менеджеру изображений $path чтобы сразу открывалась определённая директория. Похоже придётся это докрутить :)

По поводу названий папок (1,2,3,4,5) - странно конечно. Похоже РНР часть чудит. Попробую у себя локально эту ситуацию сымитировать - отпишусь о результатах эксперимента.
Lead Pepelats
25 февраля 2015 / 10:12
#4 (133)
Ха! Действительно 1,2,3,4,5... Ща буду разбираться :)
Илья (Гость)
25 февраля 2015 / 10:26
#5 (134)
Заметил кое что, если увеличить имя папки до 11 символов ( было к примеру 201, 202, 203 а сделать 20001110001, 20001110002, 20001110003 ) то название будет отображаться правильно, на 10 символах в имени папки уже не работает.
Илья (Гость)
25 февраля 2015 / 10:28
#6 (135)
Ну и прикрутите на сайте донат - не нашел как поддержать проект ? :)
Lead Pepelats
25 февраля 2015 / 10:53
#7 (136)
Проблема с числовыми названиями папок возникла из-за использования в файле nicedit.lib.php в строке 117 ф-ции array_merge(). Вместо неё для "слития" двух массивов с сохранением ключей нужно использовать "+".

Было:
array_merge($folders, $this->files)

Стало:
$folders + $this->files

Ошибку исправил (версия 1.1), прикрепил к статье архив с версией 1.1, демо обновил.

Илье спасибо за сигнал :)
Lead Pepelats
25 февраля 2015 / 12:05
#8 (137)
Добавил в конце статьи кнопу "Поддержи проект" :)
Lead Pepelats
4 марта 2015 / 15:25
#9 (141)
Обновление до версии 1.2 - В соответствии с пожеланиями пользователей менеджеру изображений добавлен параметр `imanagerPath` - путь к каталогу с которого менеджер изображений начинает свою работу. Читайте описание и смотрите демо.
Lead Pepelats
16 марта 2015 / 15:28
#10 (142)
Обновление до версии 1.3 (демо обновил)
Alexey (Гость)
15 июля 2015 / 10:58
#11 (152)
Здравствуйте, вышлите, пожалуйста, последнюю русскую версию на мейл... А то обрывает скачивание... Спасибо!
Николай (Гость)
30 июня 2016 / 20:56
#12 (167)
пробую интегрировать в CRM .
одна точка входа - все запросы на index.php
класс менеджера положил
lib/nicedit.lib.php
js положил в js/nicEdit.js
подключение класса через гет перенес в index.php
if (@$_GET['q'] == 'imgr') {....
-------------------
параметры так
imanagerURI: '?q=imgr',
imanagerPath: '/files'
---------------------
в итоге- файл загружается .
а вот список каталога не читается- Не удалось получить список файлов из-за некорректного ответа сервера
Не подскажете где и что подправить.
Lead Pepelats
1 июля 2016 / 10:16
#13 (168)
Приветствую!
Вам надо посмотреть что получает редактор от сервера при запросе содержимого каталога менеджером изображений. Там должен быть JSON без всяких там HTML тегов и прочего. Чтобы проверить ответ сервера можно добавить в файле nicEdit.js после строки 1693 (это для nicEdit-extended-ver.1.3-[ru].zip) перед(!) try добавить строчку:

console.log(this.responseText);

и после этого, хорошенько обновив страницу (лучше с CTRL + F5), попробовать вызвать менеджер изображений и посмотреть что высыпалось в отладчик браузера. Там должен быть JSON. Если там что-то ещё кроме JSON (например нотисы, варнинги и прочие ошибки PHP), то менеджер изобр. говорит что сервер ответил некорректно.

Проверьте и отпишитесь пожалуйста о результатах.
Николай (Гость)
1 июля 2016 / 13:58
#14 (169)
В консоль упало JSON.+ весь хтмл код текущей страницы
Где в этом случае копать?

{"error":"","path":"files\/","items":{"..":{"type":"folder"},"test-1.jpg":{"hash":"f431f4b0efe1197d02bca4114a7dfa9a","type":"jpg","width":370,"height":220,"preview":false,"thumb":true},"test-2.jpg":{"hash":"3ef0bf1b57cea6447150c56bb6d0a9a8","type":"jpg","width":1366,"height":768,"preview":true,"thumb":true,"preview_height":281,"preview_width":500}}}<div id="top-info">
<div class="user_in">
и т.д.хтмл ...
Lead Pepelats
1 июля 2016 / 14:43
#15 (170)
как вариант после

$p = new NicEdit(dirname(__FILE__));
$p->imanager();

поставить

exit;
Николай (Гость)
1 июля 2016 / 14:55
#16 (171)
Помогло. Спасибо большое
Lead Pepelats
1 июля 2016 / 15:07
#17 (172)
Ну отлично :)
Николай (Гость)
1 июля 2016 / 15:28
#18 (173)
Подкинул вам чуток на развитие проекта. :) думаю не последний раз :)
А кнопку Поддержать и Демо передвиньте на самый верх.
Походу еще вопрос . как можно и как лучше закрыть доступ на верхний уровень папки с изображениями.
чтобы выше, в корень сайта не выходило и не давать гулять по системным папкам
Lead Pepelats
1 июля 2016 / 15:41
#19 (174)
Спасибо :) Не ожидал :)

По поводу запрета выхода в корень сайта... Если честно давно не мучил этот плагин. Нужно подумать как лучше сделать. Это не проблема :) Докручу через пару-тройку недель (в отпуск уезжаю). Следите за релизами :)
Николай (Гость)
1 июля 2016 / 16:06
#20 (175)
Было бы супер если до конца июля сделаете!
мне нужно сдать CRMку на последней неделе июля :) гы

А потом конечно (писал ранее) в менеджере надо докрутить функционал удаления с сервера изображения. если это будет это будет бомба!

Насколько я понимаю это не сильно сложно . в том же списке возле каждого изображения выводить кнопку удалить. при клике передавать имя файла в класс в функцию, которая будет удалять этот файл ...
Николай (Гость)
1 июля 2016 / 16:17
#21 (176)
Еще заметил . что src прописан без слеша
<img src="files/test.jpg" alt="test.jpg" height="220" width="370">
куда добавить чтобы было так
src="/files/test.jpg"
Lead Pepelats
1 июля 2016 / 16:20
#22 (177)
Да по поводу удаления это понятно что не сложно, но опасно :) (если с проверкой авторизации облажаешься).
Николай (Гость)
1 июля 2016 / 16:54
#23 (178)
по поводу удаления - тогда сделайте это кастомно.
при вызове редактора с патчами передавать подключать функцию удаления или нет.
кто не хочет будет без функции удаления.

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

И еще раз подскажите по поводу src="/files/test.jpg" выше пост написла
Николай (Гость)
1 июля 2016 / 17:59
#24 (179)
и еще ТЗ в развитие :)
после загрузки изображения если их уже много в одной папке очень не удобно найти его. чтобы вставить потом.
посему думаю нужно или
сразу после загрузки js-сом находить его в списке и ставить выбор на него .
или
в самом классе добавить $time = filemtime($path . "/" . $file); и сортировать по дате
последние загруженные сверху списка.
а в идеале
добавить сортировку в списке - по алфавиту/ по дате загрузки

Жду реализации и готов дальше бросать в копилку проекта
Николай (Гость)
1 июля 2016 / 18:32
#25 (180)
А это глюк?
не пойму в каких случаях но иногда вставляет чисто изображение а иногда ссылку (это кстати с демки вашей)
<a href="images/allfonsru-15915.jpg" target="_blank" rel="lightbox"><img src="images/.thumbs/e2e962b524cfff0707e0c710a4b57da6.jpg" alt="allfonsru-15915.jpg" height="417" width="500"></a>
Как это убрать?