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

Настройка 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

Послесловие

Вообще-то можно настроить прямо в коде. Хотя это очень нехорошо, но если хочется, то можно.

24 September 2008 ключевые слова:
Ссылки на статьи по теме: "
Обсуждение в блоге-форуме тем: ""