Drupal + WYSIWIG + TinyMCE 3. Как добавить свою кнопку на панель?

      При набивании этого сайта контентом, я использовал много разметки и тегов, такие как подсветка синтаксиса через Syntax Highlighter, вставка информационных колонок и т.д. И все время приходилось переключаться в HTML режим редактора TinyMCE. Со временем этот процесс превратился в рутину и я стал частенько избегать использования всех этих наворотов из-за нежелания тратить время на однотипные операции.

      Тут пришла в голову идея автоматизировать этот процесс путем написания функционала на javascript и прикрутки его на обработчик новых кнопок, чтобы все делалось одним нажатием. Как человек, никогда не писавший под TinyMCE, да и вообще на javascript, потратил около половины дня на безрезультатные поиски мануалов и howto для создания кнопок и плагинов под TinyMCE. В принципе, документация на официальном сайте довольно легкая в понимании, но вот тот факт, что tinymce использовался не в чистом виде, а через drupal, да еще к тому же он использовался через модуль-контейнер для редакторов - WYSIWIG.

Для связки Drupal + WYSIWIG + TinyMCE 3.x ничего путевого не нашел.

Поэтому, решил рассмотреть все мельчайшие вопросы и подробности, которые могут заинтересовать человека, связавшегося с drupal-wysiwig-tinymce.

Как добавить свою собственную кнопку в TinyMCE 3 или как создать свой плагин для TinyMCE 3?

В первую очередь, при использовании модуля WYSIWIG (который к тому же очень удобен при использовании множества редакторов), необходимо отредактировать файл tinymce.inc. У меня на сайте он находится в папке  /modules/wysiwyg/editors/.

Дописываем в конце функции, которая находится в конце файла

function wysiwyg_tinymce_plugins($editor);

следующий код:

$plugins['insertinfo'] = array( // insertinfo - имя плагина 'path' => $editor['library path'] .'/plugins/insertinfo', // /plugins/insertinfo - это путь к папке с плагином // относительно папки, в которой установлен tinymce. // в случае использования wysiwig + tinymce это путь относительно // /sites/all/libraries/tinymce/jscripts/tiny_mce/ 'extensions' => array('insertinfo' => t('Insert Info Picture as description')), 'buttons' => array('insertinfo' => t('Insert info image')), 'internal' => TRUE, 'load' => TRUE, );

Заменяем все вхождения insertinfo на имя своего модуля. При чем имя папки модуля = имени модуля. 

Структура папок модуля:

editor_plugin.js будет автоматически подтягиваться tinymce.

info.png - это картинка для кнопки

в editor_plugin.js содержится вся логика плагина.

(function() { tinymce.create('tinymce.plugins.insertinfo', { init : function(ed, url) { var htmlContent = '<table border="0"><tr><td><img src="/images/service/info.png" mce_src="/images/service/info.png" alt="info picture"/></td><td>...</td></tr></table>'; ed.addCommand('mceinsertinfo', function() { ed.execCommand('mceInsertContent', 0, htmlContent); }); ed.addButton('insertinfo', { title : 'Insert Info Picture', cmd : 'mceinsertinfo', image : url + '/img/info.png' }); } }); // Register plugin tinymce.PluginManager.add('insertinfo', tinymce.plugins.insertinfo); })();

А теперь подробно, что творится в этом файле.

Плагин является очень примитивным и вставляет в tinymce вот такую табличку:

Где шаблонный текст вставляется редактором.

Я часто использую его при создании контента и мне приятно иметь у себя такую кнопочку.

И так,  вернемся к editor_plugin.js

(function() { tinymce.create('tinymce.plugins.insertinfo', { // объявляем плагин в папке insertinfo init : function(ed, url) { // переменная htmlContent содержит статический текст, создающий таблицу с картинкой, как показано выше var htmlContent = '<table border="0"><tr><td><img src="/images/service/info.png" mce_src="/images/service/info.png" alt="info picture"/></td><td>...</td></tr></table>'; // добавляем команду 'mceinsertinfo', она же функция, которая будет привязана к нашей кнопке и будет выполнятся при нажатии на нее. ed.addCommand('mceinsertinfo', function() { // mceInsertContent - системный метод tinymce, позволяющий вставить контент. ed.execCommand('mceInsertContent', 0, htmlContent); }); // добавляем кнопку ed.addButton('insertinfo', { title : 'Insert Info Picture', cmd : 'mceinsertinfo', image : url + '/img/info.png' }); } }); // Ну и, наконец, регистрируем плагин tinymce.PluginManager.add('insertinfo', tinymce.plugins.insertinfo); })();

Когда все действия совершены,  в настройках tinymce должна появится наша кнопка:

Переходим в режим создания контента (story, page и т.д.) и видим на панели нашу кнопку: