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

NicEdit с менеджером изображений

7 ноября 2013

Обновление от 20 января 2015:

В моём блоге опубликована расширенная версия редактора NicEdit

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

Ознакомиться с расширенной версией NicEdit и посмотреть демо можно здесь.



Недавно я опубликовал пост «NicEdit с проводником изображений», который был посвящён проделанной мной доработке визуального редактора HTML-кода NicEdit, по части работы с изображениями. В указанной заметке кроме перечисления достоинств и недостатков этого редактора, я также привел соображения, которые подтолкнули меня к написанию дополнительного функционала для него. В результате NicEdit получил дополнительный инструмент – «Проводник изображений», который позволяет просматривать каталоги на сервере на предмет наличия в них изображений и вставлять выбранное изображение на страницу одним кликом мышки. Как известно, «аппетит приходит во время еды», вот так и в моём случае - написав новый функционал, я понял, что могу его существенно улучшить.

Коль скоро имеющийся в NicEdit инструмент «Загрузить изображение» (upload) не работает в браузере Internet Explorer, и, к тому же, он не позволяет пользователю выбрать директорию на сервере, в которую тот желает загрузить изображение, я решил, что новый инструмент должен исправить оба эти недостатка NicEdit.

Как с этим работать

  • Установите курсор в то место в тексте, куда Вы желаете вставить изображение.
  • Кликните на кнопке «Менеджер изображений» на панели инструментов NicEdit.
  • В появившемся окне Вы можете перемещаться по каталогам на сервере, просматривая их содержимое в поисках требуемого файла изображения. Если Вы хотите загрузить в выбранную директорию какое-либо изображение для последующей вставки его на страницу, Вам нужно будет обратиться к секции «Загрузить изображение». Кликните на кнопке выбора файла с жёсткого диска вашего компьютера и выберите нужный файл изображения. По окончанию загрузки файла на сервер, он появится в списке файлов изображений текущей директории, после чего Вы сможете вставить его на страницу, просто кликнув на нём мышкой.

Технические детали

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

В прикрепленном к статье архиве имеется написанный мной на PHP скрипт, содержащий в себе функцию, обеспечиваюшую работу менеджера изображений на стороне сервера. Данную функцию, при необходимости, можно легко интегрировать в нужную Вам систему (с проверкой доступа пользователя к просмотру содержимого директорий и загрузки файлов) или использовать «сольно».

Быстрый старт

Чтобы запустить 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=imanager',
            iconsPath: 'nicEdit/nicEditorIcons.gif'
        }).panelInstance('test');
    });
</script>

На самой странице должно иметься текстовое поле с соответствующим id:

<textarea cols="60" id="test"></textarea>

* - Все настройки и прочую информацию по NicEdit Вы можете найти на сайте проекта - http://nicedit.com/, здесь же Вам нужно обратить внимание только на параметр imanagerURI. Без правильного указания этого параметра, «Менеджер изображений» работать не будет.

Дополнительная информация

Как и в прошлый раз, за основу я взял NicEdit версии 0.9 r24 (релиз от 7 июня 2012). Кроме добавления указанного инструмента, представленная мной версия отличается от исходной тем, что я перевёл её на русский язык и переделал таблицы цветов у кнопок «Изменить цвет текста» и «Изменить цвет фона».

Демо

К сожалению, на это раз «живого демо» не будет, так как я не хочу, чтобы шутники определённого рода бесконтрольно накидывали мне кучу картинок на хост. Так что, если хотите опробовать этот инструмент, Вам придётся скачать приложенный к статье архив и распаковать его у себя на хосте или просто посмотреть GIF-демонстрацию :)

nicEdit.png

Если появятся какие-нибудь вопросы, Вы можете смело мне их задавать в комментариях к данной статье, а я постараюсь на них ответить.

Метки: JavaScript, NicEdit, PHP, WYSIWYG

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

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

iluha (Гость) 21 ноября 2014 / 07:43 #26 (82)
не, ну да, согласен про хтмл редактор. но удобства ради, к примеру как в TinyMCE, жмакнул кнопочку и добавил выравнивание, масштаб и др.
Lead Pepelats 21 ноября 2014 / 13:52 #27 (83)
iluha, да конечно Вы правы. Конечно удобнее на кнопочки жмакать чем в HTML кодярнике лазить :) Удивительно что автор NicEdit этот функционал не заложил. Добавить эту фичу не сложно, но у меня сегодня времени не будет на это, а вот на следующей неделе (в начале) я собираюсь запостить версию NicEdit с расширенным функционалом по части управления параметрами изображений.

P.S. - только новую версию запощу не на этой стр. а на странице посвящённой NicEdit со второй версией менеджера изображений ( http://lead-pepelats.ru/blog/images-manager-2.0-for-nicedit/ ).
Lead Pepelats 24 ноября 2014 / 10:44 #28 (84)
Как и обещал, докрутил управление дополнительными атрибутами: width, height, hspace, vspace, class и style.

Скачать: http://lead-pepelats.ru/attachments/15/nicEdit-%5Bimages-manager-2.0-and-advanced-features-for-images%5D.zip

Читать: http://lead-pepelats.ru/blog/images-manager-2.0-for-nicedit/
iluha (Гость) 2 декабря 2014 / 15:47 #29 (85)
Ну вот за это спасибо вам огромаднейшее!!!
Энтузиазму вашему завидую.
Lead Pepelats 2 декабря 2014 / 18:19 #30 (86)
Повинуясь своему, как Вы выразились, энтузиазму я в настоящий момент пишу для NicEdit инструменты для работы с таблицами (ну там всякие TABLE, TR, TD, TH, ...)! Ну никак меня NicEdit не отпускает :) Хочется его окончательно до ума довести (что бы TinyMCE не уступал). Кому это интересно - ждите публикаций -> http://lead-pepelats.ru/blog/tag/NicEdit :)
Аноним (Гость) 12 июля 2017 / 04:32 #31 (204)
Нужная вещь спасибо.

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

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