jQuery WYSIWYG

Категория JavaScripts (jQuery, AJAX)

jquery WYSIWYG - визуальный редактор HTML

Урок отвечает на вопрос “Как легко поставить WYSIWYG на textarea?“. Если вы незнаете html тегов или же хотите работать с удобным визуальным редактором, то вам нужен WYSIWYG редактор. Сегодня мы поставим на textarea (хотя, можно на input) визуальный редактор jWYSIWYG. Это плагин к библиотеке jQuery. Он очень удобен, прост в установке и в настройке.

Подключаем JS

Сам плагин можете скачать отсюда http://code.google.com/p/jwysiwyg/. И подключаем его к нашей странице <script src=”jquery.wysiwyg.js” type=”text/javascript”></script> и не забудьте подключить сам jQuery.

HTML часть

Создайте textarea:

<textarea id="wysiwyg"></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 : +

Постовые:

  1. интернет-магазин автозапчастей
  2. кулинарные рецепты

Другие посты, близкие по теме:

  1. Развертывание / сворачивание блока с текстом на jQuery
  2. checkbox в стиле iPhone
  3. Загрузка файла одним кликом
  4. Вводный курс jQuery – Тест
  5. Движение картинки при наведении курсора
]]>

Добавить в закладки
Memori БобрДобр Google Яндекс Твиттер del.icio.us Мистер Вонг МоёМесто MyScoop RuSpace Сто закладок

]]>

Теги: ,

февраля 15, 2010

1 комментарий по “jQuery WYSIWYG”

  1. ]]>Дмитрий]]> сказал:
    апреля 30, 2010 в 11:54

    Спасибо за урок. Давно хотел, прицепить такую “штуку” на сайте, теперь все будет легко сделать :) ))

Оставьте комментарий: