.. / Динамичеческая загрузка jWYSIWYG

  1. wysiwyg
  2. jquery
  3. fckeditor
Поскольку те кто сюда попал уже знакомы с jQuery (или аналогичных библиотек), им должно быть совершенно очевидно, как правильно подгружать компоненты, избегая мешанины javascript и HTML.  Методика обычная и привычная:

1. Каждому компоненту  textarea, к которому нужно подлключить  jwisiwig присваивается определенный класс, например .jwisiwig
2. После загрузки  дерева всем элементам с классом   jwisiwig скопом подключается jwisiwig-редактор:

HTML:
......
<textarea class="jwisiwig" name="one"></textarea>
........
<textarea class="jwisiwig" name="next"></textarea>
........
<textarea class="jwisiwig" name="last"></textarea>
........
Javascript
$(function(){$('.jwisiwig')});
Точно так же подключаются и другие компоненты - файловые загрузчики, suggest-подсказки, tooltips и прочая. В результате как правило в header выносится куча нужных и ненужных  javascript -блоков. Чтобы избежать ненужного - строится какой-нибудь умный шаблонизатор, позволяющий из 100 ненужных плагинов отобрать 10 и засунуть их в header. Уже лучше, но тоже не очень. 
Мне больше нравится динамическая загрузка. Благо при наличии jquery  это делается легко и непринужденно. Рассмотрим подробнее.
HTML-код остается без изменений. А JavaScript будет следующим:
$(function(){
if ($('.jwisiwig').size())
{
$.getScript('js/common/jwysiwyg/jquery.wysiwyg.js',
function(){$('.jwisiwig').wysiwyg();});
}
});
В самом начале проверяется наличие  компонентов  с классом jwisiwig. Если такие компоненты есть, производится Ajax-загрузка необходимого плагина для компонента (подробнее см. http://api.jquery.com/jQuery.getScript/) . После того как плагин  будет загружен вызывается функция, в которой к  jwisiwig-компонентам применяется загруженный плагин.

Демонстрационный пример
Коды можно найти в архиве wysiwyg.zip

Прим.
  1. По умолчанию в jquery  getScript работает без кэширования. Чтобы отключить кэширование необходимо его выключить принудительно. Делается это следующей командой:
    jQuery.ajaxSettings.cache=true; 
  2. Рассмотренный  способ работает во всех броузерах, кроме ie6. В ie6 необходим немного другой подход. 
  1. 2010-02-12
  2. wysiwyg
  3. jquery
  4. fckeditor
  1. code.google.com/p/jwysiwyg/ - Домашняя страница jWYSIWYG
  2. erum.ru/article/39 - динамическая загрузка FCKEditor
Go Index Test