Поставить визуальный редактор на сайт (WYSIWYG)
Бывает так, что начинающие разработчики уклоняются от маневренности с визуальными редакторами (WYSIWYG) — часто используют то, что дают, т.е. визуальный редактор, вмонтированный в готовую CMS. Но что делать, когда речь идет о собственной разработке? Или, если визуальный редактор на готовой CMS «глючит»? На самом деле, поставить визуальный редактор на сайт довольно просто. Сейчас я занимаюсь написанием класса галереи на PHP, и мне понадобилось поставить визуальный редактор. Здесь я хочу поделиться общими принципами работы и монтажа визуальных редакторов.
Я искала визуальный редактор, приятный глазу, чтобы не пришлось переделывать дизайн и лишний раз тратить время. В процессе, я нашла и испытала несколько визуальных редакторов.Монтаж визуальных редакторов на сайт представляет простую систему действий. Нужно поставить в тег HEAD ряд запросов на скрипты (предварительно загрузив всю папку с визуальным редактором на сервер). В скаченных файлах обычно предоставляется демо-версия использования, именно из кода этой страницы легко получить названия нужных скриптов. Здесь же небольшой код, употребляемый в BODY страницы, для непостредственного использования редактора. Его мы будем размещать на место в html-форме, где нам нужно. Визуальные редакторы делятся на виды, используя различную обработку. Так, я встретила визуальные редакторы, основанные на jQuery, MooTools, ActiveX и просто JavaScript.
Визуальные редакторы с использованием MooTools Мне попались весьма интересные визуальные редакторы, основанные на этой технологии. Однако, из-за несовместимости со скриптами jQuery, уже употребляемыми на сайте для других нужд, я продолжила поиски чего-то более универсального.
Пример визуального редактора MooEditable с использованием MooTools
Скрипты, вставляемые между тегами
:
Следует обратить внимание, что ссылки на скрипты относительны — они запрашиваются из папки «Demos». Для использования на сайте, поставьте нужный путь к скриптам на вашем сервере.
Использование в
Здесь используется стандартный тег формы TEXTAREA, что сделает поле ввода рабочим даже при условии отключеия JavaScript у пользователя (хотя все опции визуального редактора работать не будут). Скачать визуальный редактор MooEditable
Пример ggEdit, визуальный редактор на основе MooTools В FireFox этот визуальный редактор («ggEdit») отказался работать вовсе. Как пользователю Mozilla, меня это совершенно не устроило. Впрочем, интерфейс у такого визуального редактора (пример «ggEdit» (исходник можно скачать здесь)) мне понравился.
Визуальные редакторы на основе jQuery Этот визуальный редактор (WKRTE), возможно, был бы хорош, если бы модульные окна (вставка изображения, ссылки) не всплывали за рамкой экрана Пример WKRTE, визуальный редактор на основе jQuery:
Примечательно, что основные скрипты вставляются не в
…, где, в основном, запросы на стили (CSS):
Основные скрипты окажутся перед закрывающим тегом