В предыдущей статье, я обошёл вниманием несколько важных моментов, а именно взаимодействие с объектной моделью создаваемого документа и использования для работы плагина TinyMCE API. Сейчас хочу восполнить этот пробел, но опять таки, справляться будем с конкретной задачей.
Возникла следующая проблема - стандартный контрол редактора, отвечающий за установку размера шрифта некорректно работал в (наконец -то мёртвом) браузере Internet Explorer 6. А необходимость его работы в этом монстре была.
Возникла следующая проблема - стандартный контрол редактора, отвечающий за установку размера шрифта некорректно работал в (наконец -то мёртвом) браузере Internet Explorer 6. А необходимость его работы в этом монстре была.
После недолгого ковыряния в неработающем компоненте, быпло принято решение написать свой плагин, более приспособленный для конкретных задач конкретного приложение. Задача оказалась не очень сложной.
Все действия были абсолютно аналогичны описанным в первой части статьи, вплоть до редактирования файла editor_plugin.js (вернее editor_plugin_src.js, с последующей "компиляцией").
Тогда мы оставили в покое метод createControl, а сейчас именно им и займёмся:
Получив в переменную edактивное окно редктирование, привязываем к нему обработчик
onClick, реагирующий на клик мыши.Смысл этого действия - устанавливать текущий элемент в выпадающем списке в положение, соответствующее текущему шрифту.
Осталось немного - прописать наш плагин в секции подключаемых плагинов, при запуске редактора. Там же, в сек ции theme_advanced_buttons# добавить элемент управления mylistbox:
Все действия были абсолютно аналогичны описанным в первой части статьи, вплоть до редактирования файла 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",Результат на рисунке:
Во первых, спасибо за очень полезную информацию - действительно все не так сложно:)
ОтветитьУдалитьЕсть вопрос - так-же по конкретной задаче.
Как отметить на панели инструментов мою кнопку, когда курсор попадает в область созданную ей.
Ну и конечно, как потом получить в плагин параметры переданного...
Изобретение велосипеда, зачем так изголятся если есть стандартный способ, задать размер шрифта в TinyMCE
ОтветитьУдалитьtheme_advanced_font_sizes :
'10 пикс.=10px,' +
'11 пикс.=11px,' +
'12 пикс.=12px,' +
'13 пикс.=13px,' +
'14 пикс.=14px,',