TinyMCE 4. Краткий "how to" при написании плагина

Краткий "how to" при написании плагина для Wysiwyg редактора TinyMCE 4.

Документация API: https://www.tinymce.com/docs/api/

Список доступных плагинов

newdocument, undo, redo, visualaid, cut, copy, paste, selectall, bold, italic, underline, strikethrough, subscript, superscript, removeformat, formats, restoredraft, link, image, charmap, print, preview, hr, anchor, pagebreak, spellchecker, searchreplace, visualblocks, visualchars, code, fullscreen, insertdatetime, media, nonbreaking, inserttable, tableprops, deletetable, cell, row, column, template, pastetext, fullpage

Список доступных команд

mceresetdesignmode, mcebeginundolevel, mceendundolevel, mceaddundolevel, cut, copy, paste, unlink, justifyleft, justifycenter, justifyright, justifyfull, justifynone, insertunorderedlist, insertorderedlist, bold, italic, underline, strikethrough, superscript, subscript, forecolor, hilitecolor, fontname, fontsize, removeformat, mceblockquote, formatblock, mcecleanup, mceremovenode, mceselectnodedepth, mceselectnode, mceinsertcontent, mceinsertrawhtml, mcetoggleformat, mcesetcontent, indent, outdent, mcerepaint, inserthorizontalrule, mcetogglevisualaid, mcereplacecontent, mceinsertlink, selectall, delete, mcenewdocument, insertlinebreak, undo, redo, mcelink, mceanchor

Добавление плагина

Каркас для создания плагина TinyMCE 4:

tinymce.PluginManager.add('my_plugin_name', function (editor, url) {
  // пишем плагин
});

Получить объект текущего активного редактора:

var editor = tinymce.activeEditor;

Панель инструментов и окна

Создать кнопку для тулбара:

editor.addButton('quick-note', {
  text: 'Текст кнопки',
  stateSelector: 'span.quick-note', // кнопка в тулбаре будет подсвечиваться для заданных элементов
  tooltip: 'Подсказка при наведении на кнопку',
  icon: 'editimage',      // Суффикс иконки из набора TinyMCE: 'mce-ico mce-i-editimage'
  classes: 'quick-note',  // Класс будет добавлен для блока кнопки с префиксом 'mce-'
  shortcut: 'Ctrl+Q',
  onpostrender: function() {
    // Событие срабатывает после рендеринга кнопки
    document.querySelector('.mce-i-quick-note').style.backgroundImage = 'url(' + url + '/quick-note.png)';
  },
  onclick: function() {
    // Событие срабатывает при нажатии на кнопку
  },
});

Создать пункт меню:

editor.addMenuItem('myplugin', {
  text: 'My Plugin',
  context: 'tools',
  onclick: function() {
    var selectedText = editor.selection.getContent();
    editor.insertContent('<code type="php">' + selectedText + '</code>');
  }
});

Создать popup окно с textarea полем для редактирования или вставки текста:

editor.windowManager.open({
  title: 'Примечание',
  body: [{
    type: 'textbox',
    name: 'text',
    label: '',
    value: 'Поместить текст в окно редактирования',
    multiline: true, // textarea
  }],
  onsubmit: function (e) {
    var text = e.data.text;
    editor.insertContent('<span>' + text + '</span>');
  }
});

Показать плавающую панель инструментов (сontext inline toolbar) при выборе определенных элементов в документе:

// Inline panel show
editor.addContextToolbar(
  'span[data-quick-note]',
  'link unlink | undo redo'
);

Создать команду TinyMCE 4:

editor.addCommand('mycommand', function() {
  console.log('mycommand');
});

Выделенный текст

Получить выделенный текст:

var text = editor.selection.getContent();

Получить выделенный или активный DOM элемент:

var node = editor.selection.getNode();

Проверить атрибуты DOM элемента:

editor.dom.is(node, 'span.some-class')

Работаем с элементами внутри фрейма

Подцепить событие на элементы редактируемого текста (которые, внутри фрейма):

tinymce.activeEditor.$('.editable-node-in-iframe').on('mouseover mouseout', function(e) {
  if (e.type == 'mouseover') {
    console.log($(this));
  }
});

Следим за навигацией и отслеживаем события редактирования внутри документа (событие срабатывает при клике на любом участке редактируемого текста):

editor.on('NodeChange', function(e) {
  var quickNoteElement = editor.dom.is(e.element, 'span[data-quick-note]');
  if (quickNoteElement) {
    var quickNoteTooltip = document.getElementById('quick-note-tooltip'),
        quickNoteText = e.element.getAttribute('data-quick-note');

    if (quickNoteTooltip) {
        quickNoteElement.innerHTML = quickNoteText;
    }
  }
});

Стили для элементов внутри фрейма (если нужно задать стили внутри создаваемого плагина):

editor.contentStyles.push('span[data-hothint] { color: red; }');

..или так:

var content_style = editor.settings.content_style ? editor.settings.content_style : '';
    content_style += ' span[data-hothint] { border-bottom: 1px dotted #ccc; }';

editor.settings.content_style = content_style;

Локализация TinyMCE 4

Установить текущий код локализации:

tinymce.util.I18n.setCode('ru_RU'); // en_US, ru_RU, ...

Получить установленный код локализации:

var lang = tinymce.util.I18n.getCode(); // ru_RU

Добавить перевод для определенного языка (в примере - для русского):

tinymce.addI18n('ru_RU', {
  'Example plugin': 'Пример плагина',
  my_plugin_other_text: 'Другой текст'
});

// или так:

tinymce.util.I18n.add('ru_RU', {
  my_plugin_title: 'Заголовок',
  my_plugin_other_text: 'Другой текст'
});

Получить перевод для установленной локали по ключу:

tinymce.translate('quick_note_title')
// или так:
tinymce.util.I18n.translate('quick_note_title');

#TinyMCE 4, #tinymce plugins