.. / Настройка jWYSIWYG (WYSIWYG jQuery plugin)

Длинное-длинное предисловие

Год назад я расписал как прикручивать TinyMCE и FCKEditor к CodeIgniter. Для тех задач, которые решал год назад вариантов в выборе WYSIWYG не было. Большие тексты со сложным форматированием лучше всего делать в FCKEditor под MS IE.

Однако, tempora mutantur, и задачи тоже поменялись. Актуален очень легкий редактор для правки небольших фрагментов HTML, c минимальными возможностями форматирования. Поскольку я пользуюсь jQuery, вариантов точно также как и с FCKEditor не было. На запрос "WYSIWYG jquery" Google выплюнул ссылку на jwysiwyg

Скачал - понравилось. Но из описания непонятно как настроить интструментальную панель. Увы. Пришлось ковырять код. Оказалось, что инструментальная панель может содержать более двух десятков опций, которые в демонстрационных примерах отсутствуют.

Впрочем нафиг мне не уперлись дополнительные опции, мне те что есть как можно дальше, потому как лишние инструменты форматирования в умелых ручках моих редакторов превращаются в страшное оружие. Чудовищная сила - красота текста оформленного с применением десятка гарнитур, кеглей, цветов и вариантов написаний. Брррр.

Коротко. Как подключить и настроить jWYSIWYG

Подключение:

<textarea id="wysiwyg" > Здесь редактируемый текст</textarea > <script language="JavaScript" type="text/javascript"> $(function(){$('#wysiwyg').wysiwyg();}); </ script >

Подключение jWYSIWYG с пользовательской настройкой панели инструментов

$('#text').wysiwyg({ controls : { toolbarElement1 : { visible : true }, toolbarElement2 : { visible : false }, toolbarElement3 : { visible : true }, .................................... } });

toolbarElement1,toolbarElement2.... - имена контролов в тулбаре. Если хотите включить какой-нибудь контрол (например increaseFontSize) пишите в перечне параметров:

increaseFontSize : {visible:true},

Если хотите погасить - increaseFontSize : {visible:false},

Перечень доступных в jWYSIWYG контролов приведен в следующей таблице:

Перечень элементов ToolBar jWYSIWYG:

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**** :	+

Примечания.

* - Красным крестиком в таблице обозначены те элементы ToolBar которые по умолчанию включены.
** - Мозилла почему-то не может обойтись без каких-нибудь заморочек в WYSIWYG.
*** - Ахтунг. HTML-код показывается, но редактировать через него не получается. Нужно допиливать напильником. Впрочем для моих целей HTML вообще не нужен.
**** Еще один Ахтунг. removeFormat выполняет двойную роль - он уничтожает форматирование и убивает ссылки. Не промахнитесь.

Демонстрационный пример jWYSIWYG со всеми опциями

/doc/jwisiwyg/index.htm