Блог / Расширенная версия редактора 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):
> У меня не загружается изображение, если это делать не через менеджер.
Ну, мне нужны подробности :) Какой у Вас браузер, что вы делаете и что после своих действий видите в редакторе?
для выбора цветов я бы прикрутил такой Color Picker
http://jscolor.com/examples/
на мой взгляд он самый удобный
Здравствуйте,исправьте пожалуйста ссылку на скачивание,вместо файла скачивается страница
Всё нормально скачивается, только надо иметь ввиду, что для скачивания сначала попадаешь на страницу с где капчу надо ввести.
Будьте внимательнее.
Да действительно скачивает,только через браузер,а вот через DownloadMaster ссылке добавляется .htm и качает страницу с каптчей
Ошибка в менеджере об некорректном ответе сервера.
Вот такое выдает в отладчике браузера
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)
Подскажите пожалуйста как исправить!
Спасибо, и с наступающим новым годом. Как мало таких добрых людей, это не легко написать библиотеку на 300 строк
Здравствуйте, Lead Pepelats!
Хороший скрипт вы написали, спасибо. Работает как надо. Хотел его применить на своём сайте (сайт пока в проекте), но вот папку для картинок не получается задать в корне сайта. Желательно чтобы менеджер видел только эту папку и подпапки в ней. Подскажите, пожалуйста, как это сделать. Спасибо!
Приветствую, Art!
Давно не трогал эту скриптину (работает в проектах и не требует внимания :)), так что не очень помню нюансов. По поводу указания директории с картинками - а при создании экземпляра класса NicEdit Вы пробовали указать эту директорию (см. картинку)?
Да, пробовал, не получается. Знаний про адресацию у меня маловато. Буду осваивать.
Art, вот Вы пишите "не получается", а что конкретно Вы указали в этом параметре? Давайте попробуем разобраться вместе.
Здравствуйте, Lead Pepelats!
После вынужденного перерыва возвращаюсь к своей проблеме.
Вот структура сайта:
index.ext
page1.ext
pageN.ext
article/
- article1.ext
- articleN.ext
modules/
- pagesedit.ext
- pagesedit/
- - nicEdit.js
- - nicedit.lib.php
- - nicEditorIcons.gif
- - script.php
images/
- img1.ext
- imgN.ext
Ссылки на страницы такие: ?page = pageN.ext или ?page = article/article1.ext и есть возможность чпу.
Сейчас в файле script.php строки:
if (@$_GET['q'] == 'imgr') {
include(dirname(__FILE__) . '/nicedit.lib.php');
chdir('../../');
$p = new NicEdit(getcwd());
$p->imanager();
}
В редактируемых страницах есть нужные js-строки, в том числе:
iconsPath: 'modules/pagesedit/nicEditorIcons.gif',
imanagerURI: 'modules/pagesedit/script.php?q=imgr',
imanagerPath: 'images'
Если положить весь сайт в папку, то работает нормально, но можно выйти на уровень выше и перейти в любые папки и туда качать и там удалять.
Если положить сайт в корень, то тоже работает, но в менеджере если кликнуть на папке Вверх (две точки), получаем окно с сообщением красным "Не удалось получить список файлов с сервера" без списка картинок и вложенных папок.
Надеюсь, понятно изложил, что есть, а хотелось бы не пускать за пределы images не зависимо от того, где лежит сайт.
Возможно ли это?
не получается запустить нормально, выкидывает ошибку
Fatal error: Cannot redeclare imagecreatefrombmp() in /var/www/html/test/edit/nicEdit/nicedit.lib.php on line 329
пробовал v 1.3 и 1.4, результат тот же, при чем если смотреть файл nicedit.lib.php то ошибка расположена на закрывающей скобке функции imagecreatefrombmp()
Константин, попробуйте добавить такие строки чтобы избежать "редиклара" ф-ции imagecreatefrombmp
ну это то я понимаю, не понимаю только откуда она еще инклюдится? уже весь код просмотрел, она случайно не из интернета тянется?
Константин, "из интернета"? — шаманите :))))
у меня вроде такой ошибки не возникало. используйте везде include_once на всякий случай
[quote]Lead Pepelats 14 января 2020 / 12:51#44 (229)
Константин, "из интернета"? — шаманите :))))
у меня вроде такой ошибки не возникало. используйте везде include_once на всякий случай[/quote]
))) есть немного, вот думаю как в свой проект подключить )))
кстати стоит заменить split() на explode() тем кто использует на бек php > 7.0
по поводу explode — велком :) всё что вашей душе угодно :) можете потом о результатах здесь отписать. удачи
я конечно же split() заменил, у меня на бек стоит php v7.2 и я получал ошибку о неизвестной функции, т.к. split на сколько я знаю с версии 7.0 уже не включается )))
так что смело можно менять у кого версия 7.0 и выше
еще вот задумываюсь XMLHttpRequest на fetch, у меня в проекте на нем запросы используются