вторник, 17 августа 2010 г.

Создание плагина к онлайн HTML редактору TinyMCE, часть 2

В предыдущей статье, я обошёл вниманием несколько важных моментов, а именно взаимодействие с объектной моделью создаваемого документа и использования для работы плагина TinyMCE API. Сейчас хочу восполнить этот пробел, но опять таки, справляться будем с конкретной задачей.
Возникла следующая проблема - стандартный контрол редактора, отвечающий за установку размера шрифта некорректно работал в (наконец -то мёртвом) браузере Internet Explorer 6. А необходимость его работы в этом монстре была.
После недолгого ковыряния в неработающем компоненте, быпло принято решение написать свой плагин, более приспособленный для конкретных задач конкретного приложение. Задача оказалась не очень сложной.
Все действия были абсолютно аналогичны описанным в первой части статьи, вплоть до редактирования файла editor_plugin.js (вернее editor_plugin_src.js, с последующей "компиляцией").
Тогда мы оставили в покое метод createControl, а сейчас именно им и займёмся:


createControl: function(n, cm) {
  switch (n) {
    case 'mylistbox':
      var mlb = cm.createListBox('mylistbox', {
        title : 'Размер шрифта',
        onselect : function(v) {
        st = tinyMCE.activeEditor.selection.getContent({format : 'html'});
        st_tmp=$( ''+st+'');
        $('span', st_tmp).css('font-size','');
        st= $(st_tmp).html();
        st=""+ st +"";
        tinyMCE.activeEditor.execCommand('mceInsertContent', false, st);
        }
      });

     // Добавляем значения в список

     mlb.add('', '0');
     mlb.add('6px', '6');
     mlb.add('8px', '8');
     mlb.add('10px', '10');
     mlb.add('12px', '12');
     mlb.add('14px', '14');
     mlb.add('16px', '16');
     mlb.add('18px', '18');
     mlb.add('24px', '24');
     mlb.add('36px', '36');
     mlb.add('76px', '76');

     ed = tinyMCE.activeEditor;
     ed.onClick.add(function(ed, e) {
     fs=e.target.style.fontSize;
     if(fs!="") {
       mlb.select(substr(fs,0,-2));
       }else  {
       mlb.selectByIndex(0);
       }
    });
  // Возвращаем селект-бокс с заполнеными значениями
  return mlb;
  }

return null;
} 
Тут мы создаём элемент управления стандартного класса ListBox , представляющий собой выпадающий списоки задаём его начальные свойства. В поле onselect, пишим анонимную функцию, изменяющею размер шрифта. Фактически мы окружаем переделенный текст тегами SPAN и устанавливаем значение стиля text-size (с помощью библиотеки jQuery). Далее мы заполняем наш список значениями.
Получив в переменную edактивное окно редктирование, привязываем к нему обработчик
onClick, реагирующий на клик мыши.Смысл этого действия - устанавливать текущий элемент в выпадающем списке в положение, соответствующее текущему шрифту.
Осталось немного - прописать наш плагин в секции подключаемых плагинов, при запуске редактора. Там же, в сек ции  theme_advanced_buttons# добавить элемент управления mylistbox:
theme_advanced_buttons1 : "spellchecker,syntaxhl,...,mylistbox",
Результат на рисунке:

2 комментария:

  1. Во первых, спасибо за очень полезную информацию - действительно все не так сложно:)

    Есть вопрос - так-же по конкретной задаче.
    Как отметить на панели инструментов мою кнопку, когда курсор попадает в область созданную ей.

    Ну и конечно, как потом получить в плагин параметры переданного...

    ОтветитьУдалить
  2. Изобретение велосипеда, зачем так изголятся если есть стандартный способ, задать размер шрифта в TinyMCE

    theme_advanced_font_sizes :
    '10 пикс.=10px,' +
    '11 пикс.=11px,' +
    '12 пикс.=12px,' +
    '13 пикс.=13px,' +
    '14 пикс.=14px,',

    ОтветитьУдалить