jQuery WYSIWYG
Категория JavaScripts (jQuery, AJAX)
Урок отвечает на вопрос “Как легко поставить WYSIWYG на textarea?“. Если вы незнаете html тегов или же хотите работать с удобным визуальным редактором, то вам нужен WYSIWYG редактор. Сегодня мы поставим на textarea (хотя, можно на input) визуальный редактор jWYSIWYG. Это плагин к библиотеке jQuery. Он очень удобен, прост в установке и в настройке.
Подключаем JS
Сам плагин можете скачать отсюда . И подключаем его к нашей странице и не забудьте подключить сам jQuery.
HTML часть
Создайте textarea:
главное тут идентификатор (id) объекта, по нему и ищет jquery куда вставить wysiwyg
Создание WYSIWYG
JS скрипт создания:
$(function()
{
$('#wysiwyg').wysiwyg();
});
Настройка
Этот чудо плагин имеет кучу скрытых кнопок, их можно показывать по своему усмотрению. Например, кнопка редактирование HTML – кода по умолчанию скрыто, его можно показать добавив следующие строки в JS код:
$('#wysiwyg').wysiwyg({
controls : {
cut : { visible : true },
paste : { visible : true },
copy : { visible : true },
html : { visible : true }
}
});
Список кнопок
bold : +
italic : +
strikeThrough : -
underline : -
separator00 : -
justifyLeft : -
justifyCenter : -
justifyRight : -
justifyFull : -
separator01 : -
indent : -
outdent : -
separator02 : -
subscript : -
superscript : -
separator03 : -
undo : -
redo : -
separator04 : -
insertOrderedList : -
insertUnorderedList : -
insertHorizontalRule : -
separator05 :
createLink : +
insertImage : +
separator06 :
h1mozilla: +
h2mozilla: +
h3mozilla: +
h1 : +
h2 : +
h3: +
separator07 : -
cut : -
copy : -
paste : -
separator08 :
increaseFontSize : +
decreaseFontSize : +
separator09 :
html: -
removeFormat : +
Добавить в закладки
Теги: jQuery, юзабилити
1 комментарий по “jQuery WYSIWYG”
-
]]>
]]>
сказал:
апреля 30, 2010 в 11:54Спасибо за урок. Давно хотел, прицепить такую “штуку” на сайте, теперь все будет легко сделать ))
Оставьте комментарий: