Добавить кнопку (плагин) в JCE

Поговорим о том, как можно сделать свою кнопку в панели инструментов JCE Editor. А лучше сделаем плагин сразу с двумя кнопками, поскольку именно с этим моментом у меня возникал затык. Допустим, нам нужны две кнопки: одна добавляет в текст смайлик ^_^, вторая - смайлик >_<. Пусть наш плагин называется "smiles". Поехали.

1) Создаём папку для плагина. В ней размещаем следующую структуру:

/img
--icon.gif
/langs
--en.js
smiles.xml
editor_plugin.js

2) Файл smiles.xml описывает наш плагин (цветом выделены значения, которые нужно заменить на собственные):


<?xml version="1.0" ?>
<install version="2.2.0" type="plugin" plugin="smiles"> // 2.2.0 - это версия JCE. 
   <name>Example</name>
   <version>2.2.0</version>
   <creationDate>2013</creationDate>
   <author>Anonym</author>
   <icon>good,bad</icon> // здесь нужно перечислить идентификаторы всех кнопок
   <layout>smiles</layout>
   <files>
        <file>editor_plugin.js</file>
<file>langs/en.js</file>
<file>img/icon_good.gif</file>
                 <file>img/icon_bad.gif</file>
    </files>
</install>

3) en.js - это наш файл локализации. Если язык редактора другой, файл будет называться, к примеру, ru.js. Содержание:

tinyMCE.addI18n('en.smiles',{

good_smile: 'Add good smile',
bad_smile: 'Add bas smile'
});

Надеюсь, здесь всё понятно. Задаём константы имён кнопочек. Конечно, можно и не использовать локализацию, но будем следовать правилам хорошего тона.

4) И, наконец, editor_plugin.js - собственно, код плагина.


(function() {
tinymce.PluginManager.requireLangPack('smiles'); // подключили нашу локализацию
 
tinymce.create('tinymce.plugins.Smiles', {
init : function(ed, url) {
var t = this;
t.editor = ed;

// добавляем кнопки
ed.addButton('good', {
title : 'smiles.good_smile', // локализованный заголовок кнопки
cmd : 'mceSmileGood',  // команда, которая будет выполняться по щелчку на кнопку
image : url + '/img/icon_good.gif' // иконка кнопки
});

// и вторая кнопка
ed.addButton('bad', {
title : 'smiles.bad_smile',
cmd : 'mceSmileBad',
image : url + '/img/icon_bad.gif'
});

// теперь добавляем команды, привязанные к кнопкам

ed.addCommand('mceSmileGood', function() {
var html = '^_^'; // вот и наш смайл (или любой другой текст, который вы хотите вставить)
ed.execCommand("mceInsertContent", false, html);
return true;
});

ed.addCommand('mceSmileBad', function() {
var html = '>_<';
ed.execCommand("mceInsertContent", false, html);
return true;
});
}
});
// Register plugin
tinymce.PluginManager.add('smiles', tinymce.plugins.Smiles);

})();


Вот, собственно, и всё. Пакуем папку в zip-архив и устанавливаем аддон в JCE. Не забываем зайти в настройки профиля (Editor Profiles) и перетащить наши кнопки на панель инструментов. Возможно, в настройках не будут отображаться иконки - у меня получилось именно так - но в редакторе они должны показываться нормально и работать. Удачи!

Joomla 2.5 режет javascript в параметрах плагина

Допустим, вам позарез нужно вставить код javascript (например, какой-нибудь Adsense) в параметры вашего модуля или плагина Joomla. Решение простое до идиотизма. В xml описании плагина поле должно выглядеть так:


<field name="js" filter="RAW" type="textarea" description="" label="Код js" />