Расширенная версия редактора 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):
Обновление до версии 1.2 - В соответствии с пожеланиями пользователей менеджеру изображений добавлен параметр `imanagerPath` - путь к каталогу с которого менеджер изображений начинает свою работу. Читайте описание и смотрите демо.
Обновление до версии 1.3 (демо обновил)
Здравствуйте, вышлите, пожалуйста, последнюю русскую версию на мейл... А то обрывает скачивание... Спасибо!
пробую интегрировать в CRM .
одна точка входа - все запросы на index.php
класс менеджера положил
lib/nicedit.lib.php
js положил в js/nicEdit.js
подключение класса через гет перенес в index.php
if (@$_GET['q'] == 'imgr') {....
-------------------
параметры так
imanagerURI: '?q=imgr',
imanagerPath: '/files'
---------------------
в итоге- файл загружается .
а вот список каталога не читается- Не удалось получить список файлов из-за некорректного ответа сервера
Не подскажете где и что подправить.
Приветствую!
Вам надо посмотреть что получает редактор от сервера при запросе содержимого каталога менеджером изображений. Там должен быть JSON без всяких там HTML тегов и прочего. Чтобы проверить ответ сервера можно добавить в файле nicEdit.js после строки 1693 (это для nicEdit-extended-ver.1.3-[ru].zip) перед(!) try добавить строчку:
console.log(this.responseText);
и после этого, хорошенько обновив страницу (лучше с CTRL + F5), попробовать вызвать менеджер изображений и посмотреть что высыпалось в отладчик браузера. Там должен быть JSON. Если там что-то ещё кроме JSON (например нотисы, варнинги и прочие ошибки PHP), то менеджер изобр. говорит что сервер ответил некорректно.
Проверьте и отпишитесь пожалуйста о результатах.
В консоль упало 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">
и т.д.хтмл ...
как вариант после
$p = new NicEdit(dirname(__FILE__));
$p->imanager();
поставить
exit;
Помогло. Спасибо большое
Ну отлично :)
Подкинул вам чуток на развитие проекта. :) думаю не последний раз :)
А кнопку Поддержать и Демо передвиньте на самый верх.
Походу еще вопрос . как можно и как лучше закрыть доступ на верхний уровень папки с изображениями.
чтобы выше, в корень сайта не выходило и не давать гулять по системным папкам
Спасибо :) Не ожидал :)
По поводу запрета выхода в корень сайта... Если честно давно не мучил этот плагин. Нужно подумать как лучше сделать. Это не проблема :) Докручу через пару-тройку недель (в отпуск уезжаю). Следите за релизами :)
Было бы супер если до конца июля сделаете!
мне нужно сдать CRMку на последней неделе июля :) гы
А потом конечно (писал ранее) в менеджере надо докрутить функционал удаления с сервера изображения. если это будет это будет бомба!
Насколько я понимаю это не сильно сложно . в том же списке возле каждого изображения выводить кнопку удалить. при клике передавать имя файла в класс в функцию, которая будет удалять этот файл ...
Еще заметил . что src прописан без слеша
<img src="files/test.jpg" alt="test.jpg" height="220" width="370">
куда добавить чтобы было так
src="/files/test.jpg"
Да по поводу удаления это понятно что не сложно, но опасно :) (если с проверкой авторизации облажаешься).
по поводу удаления - тогда сделайте это кастомно.
при вызове редактора с патчами передавать подключать функцию удаления или нет.
кто не хочет будет без функции удаления.
да и это ведь плагин который прикручивают уже не совсем деревянные . должны понимать моменты авторизации, безопасности... и т.д.
В тоже время если выше папки с изображениями не дать выходить это практически уберет эту проблему.
И еще раз подскажите по поводу src="/files/test.jpg" выше пост написла
и еще ТЗ в развитие :)
после загрузки изображения если их уже много в одной папке очень не удобно найти его. чтобы вставить потом.
посему думаю нужно или
сразу после загрузки js-сом находить его в списке и ставить выбор на него .
или
в самом классе добавить $time = filemtime($path . "/" . $file); и сортировать по дате
последние загруженные сверху списка.
а в идеале
добавить сортировку в списке - по алфавиту/ по дате загрузки
Жду реализации и готов дальше бросать в копилку проекта
А это глюк?
не пойму в каких случаях но иногда вставляет чисто изображение а иногда ссылку (это кстати с демки вашей)
<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>
Как это убрать?
Если изображение имеет размер по вертикали или по горизонтали больше некоторой величины (по умолчанию 500 пикселей), то на страницу должна вставляться уменьшенная копия этого изображения, обрамлённая ссылкой на оригинал (с атрибутом target="_blank"). Если же высота и ширина изображения не превышают указанного максимально допустимого размера, или не удалось создать уменьшенную копию изображения, то на страницу вставлять оригинальное изображение.
Опубликована новая версия редактора nicEdit-extended-ver.1.4-[ru] (см. прикреплённые файлы), в которой добавлен функционал позволяющий удалять файлы изображений прямо через менеджер изображений.
Добрый день. Спасибо за доработку. У меня не загружается изображение, если это делать не через менеджер. Как возможно сделать так, что бы изображение сразу загружалась в редактор. Без выбора её из менеджера. Спасибо ))