.. / Превращаем jwysiwyg в fCKEditor

В 98% случаев  jWysiwyg хватает за глаза. Особенно если удалить из него совершенно лишние функции. Но в 2% приходится ставить монстроподобного FCKEditor (или TinyMCE). 1% - тогда когда приходится иметь дело со сложным форматированием, и 1% - с тупым клиентом, который "за свои деньги хочет иметь полное удовольствие".  Кстати в большинстве распространенных CMS типа Joomla или Drupal  можно ставить любой редактор из нескольких десятков. Но только один.  А чтобы переключиться  приходится лезть в настройки, что не всякому клиенту под силу. Вот я и решил сделать плагин для jwysiwyg   который по нажатию кнопки загружает (естественно динамически)   CKEditor, который является jQuery-клоном самого распространенного редактора FCKEditor. 
Если вам он не нравится - подгрузите другой. Методика та же.
Рассмотрим код:

HTML:

<div class="editor">           
 <textarea>Всё - одна маята</textarea>
 </div>

<div class="editor">           
 <textarea>Бегут все реки в море переполнится </textarea>
</div>

JavaScript

$(function(){
jQuery.ajaxSettings.cache=true;
if ($('.editor').size())
{
   $.getScript('js/common/jwysiwyg/jquery.wysiwyg.js',
   function(){
         $('.editor textarea').each(
          function(i)
           {
            var e=$(this).wysiwyg({controls: {fullEditor : {visible : true,exec: function() {
                // сохраняем контент в textarea
                e.wysiwyg("saveContent").val();              
                // проверяем наличие загруженного CKEditor
                if (window.CKEDITOR)
                  $(e).ckeditor();  // переключаем jwysiwyg на ckeditor
                  else        // загружаем ckeditor
                  {
                  var script = document.createElement('script');
                  script.setAttribute('type', 'text/javascript');
                  script.setAttribute('src', "js/common/ckeditor/ckeditor.js");
                  var head = document.getElementsByTagName('head').item(0);
                  head.insertBefore(script, head.firstChild);
                  // по таймеру отслеживаем загрузку CKEditor
                  var max=0;
                  var intervalID=setInterval(
                  function(){
                      if (max++>100)
                        alert('CK loading error') // ошибка при ожидании > 25 секунд
                        else
                      if (!window.CKEDITOR)
                        return; // продолжаем ожидание загрузки
                        else
 { 
 // переключаем jwysiwyg на ckeditor 
 e.parent().find('div').hide();
                         $(e).ckeditor(); 
 }
                      clearInterval(intervalID); // сбрасываем таймер
                      }, 250);
                  };
            }}}});
           });
        });
}
})

Если в примере плагином Clear MS Word я поступил по-хамски и вкрячил код непосредственно в исходник, здесь я поступил как культурный человек и расширил возможности редактора законным путем. Рассмотри шаг за шагом.

1.  jwisiwg  загружается динамически. Подробно об этом см. здесь. Каждый textarea обрабатывается отдельно в цикле $.each
2. новую кнопку я создал законным путем, так же как добавлялись или убирались кнопки здесь
   но в примере с настройками было все просто - там  определялись кнопки с командами встроенными в режим designMode (визивиг). Здесь я создаю новую команду. Новая команда задается следующим образом:
   $('#text').wysiwyg({controls : {Element : { visible : true,exec: function(){бла-бла}}}});  
   Т.е. кроме видимости элемента (кнопки) тулбара задается функция, которая будет выполняться при нажатии на нее. 
3. Далее идут две команды с коментариями: 
   e.wysiwyg("saveContent").val(); // сохраняем контент в textarea
   e.show().parent().find('div').hide(); // прячем jwisiwig/ Именно для этого textarea завернут в контейнер, хотя конечно можно было бы и без него обойтись. 
4. поскольку на странице может быть несколько редакторов, кнопка вызова FCKEditor может быть нажата несколько раз. Неизвестно надо это или не надо, но если ранее FCKEditor был загружен, достаточно проверить этот факт и навесить этот редактор на  texarea:
    if (window.CKEDITOR)  $(e).ckeditor(); 
5. Далее идет код, слабопонятный большинству юзеров jQuery и не заставших времена, когда приходилось писать на голом JavaScript . Четыре строки начиная с
   document.createElement('script')
   создают в head html-страницы элемент  
   <script language="JavaScript" src="бла-бла-бла" type="text/javascript"></script>
   который обеспечивает загрузку CKEditor. Увы, традиционным способом jquery подключить его не получается из-за проявления в этом случае   бага CKEditor'а. Надеюсь, когда-нибудь его исправят. 
6. После того как был создан элемент обеспечивающий подгрузку CKEditor необходимо ждать, когда броузер погрузит и обработает этот скрипт. В зависимости от можности компьютера и канала может пройти до нескольких секунд. 
   Чтобы не лезть в код CKEditor'а  в примере я запускаю таймер и дожидаюсь в течение 25 секунд появления в DOM   CKEditor. Как только обнаруживаю его  запускаю переопределение редактора, подключенного к textarea
   Способ жутковатый, и вообще проще приписать дополнительный код в CKEditor, который перегружает jwysiwyg что собственно я и сделал в реальном приложении. Возможно, что TinyMCE возможно подключить более естественно, но я не пробовал. Мне он не нравится.

Исходники можно найти в архиве wysiwyg.zip
Демо-версия