Задался вопросом установки визуального редактора на сайт. Вариантов WYSIWYG редакторов, как оказалось, море. В основном, это монстроподобные сложнейшие скрипты, с установкой которых можно очень сильно запутаться. К тому же, все предложенные в них функции для моего случая не требуются.
Нужен был визуальный редактор с базовыми функциями: жирный, курсив, подчеркнутый, выравнивание слева, выравнивание справа, и выравнивание по центру. Также, было бы хорошо, если бы была возможность создавать свои функции.
В результате поисков и изучений был выбран визуальный редактор на основе jQuery - jHtmlArea.
Этот скрипт поддерживается следующими браузерами:
Пример работы скрипта:
Займемся установкой этого визуального редактора. Для начала посетим сайт проекта и скачаем ахив со скриптом: jHtmlArea-0.7.0.ExamplePlusSource.zip. Если ссылка по каким то причинам не работает, архив можно скачать с нашего портала: jHtmlArea-0.7.0.ExamplePlusSource.zip.
Из архива потребуются следующие файлы:
Эти файлы нужно будет залить на свой хост.
Теперь можно заняться непосредственно внедрением WYSIWYG-редактора на страницу. Если пакет jQuery у вас не подключен, то вставляем следующий код в тело HEAD страницы:
После открывающего тега BODY, или в тело HEAD вставляем следующий код:
Этим кодом мы подключили jHtmlArea к странице.
Далее, нужно выполнить инициализацию скрипта. Это делается следующим кодом:
#jHtmlArea - это селектор элемента TEXTAREA, который используется для ввода текста. В случае с CMS UCOZ, этот селектор заменяется на #brief и/или #message.
Также, можно вывести только определенные кнопки панели инструментов визуального редактора. Для этого используется инициализация скрипта следующего вида:
Все кнопки панели инструментов в следующем списке:
jHtmlArea также позволяет внедрять свои кнопки в панель инструментов со своей обработкой. В примере ниже добавляется кнопка вставки символа ° с классом degree:
Таким образом, комбинируя опции вызова, можно добиться нужного вида визуального редактора jHtmlArea.
На этом все. Удачи в свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Визуальный редактор jHtmlArea на jQuery
Скрипты
Скрипты, инструкции, справочники
Для работы понадобится jQuery.
Категория: | Скрипты |
Просмотрено: | 9482 |
Рейтинг: | 4.5/13 |
Дата добавления: | 2011-06-14 07:40, Вторник |
Добавил: | Szen |
Теги: | WYSIWYG, визуальный редактор, редактор |
№ 0 | 2011-06-14 07:40 |
Szen![]() | Здесь вы можете задать вопрос или оставить комментарий по теме "Визуальный редактор jHtmlArea на jQuery". |
Гость |