Плагин template в TinyMCE

Визуальный редактор используется как спасительная палочка-выручалочка, когда нужно дать возможность редактору добавлять на сайт информацию произвольной структуры. К сожалению, это требует навыков владения html. Даже если редактор знаком с html - это довольно нудно каждый раз писать HTML код вручную в слепом, лишенном подсветки синтаксиса, окне просмотра исходного кода.
Было бы удобно иметь возможность вставлять некие готовые HTML-сниппеты.
Для таких случаев в tinyMCE есть плагин templates. Рассмотрим как его подключить к TinyMCE

В ЮМИ конфигурация редактора задается в /js/tinymce/jscripts/tiny_mce/tinymce_defs.js
К сожалению, у меня не получилось подключить дополнительный плагин в кастомном файле, поэтому придется править системный.
В параметре "plugins" необходимо добавить плагин "template", в желаемой панели инструментов, например, toolbar_standart, добавить кнопку плагина, также указав "template". Теперь на в редакторе появится кнопочка для вставки шаблонов - Insert templates. (Скрины взяты не из ЮМИ, а из cms моего сайта, но суть та же)

Кнопка "Вставить шаблон"

Оставшиеся настройки будет производить в кастомном файле /js/tinymce/jscripts/tiny_mce/tinymce_custom.js

Готовим шаблоны. Каждый шаблон представляет собой html-файл, лежащие в определенной папке. Пусть это будет папка /js/tinymce/templates/

Для конкретики беру простой шаблон: картинка слева с подписью.
HTML-код

    <div class="image_left_block autoclear">
        <div class="tpl_image">
            <img src="/images/demo/diana.jpg">
            <p class="tpl_image_podpis">Подпись</p>
        </div>
        <p>Некий текст</p>
    </div>
    <p>Текст за изображением</p> 

Создаем js-файл, в котором перечисляется список шаблонов с указанием пути к файлам.

    var tinyMCETemplateList = [
        // Name, URL, Description
        ["Картинка слева", "/js/tinymce/templates/image_left.html", "Текст с описанием"],
        ["Код", "/js/tinymce/templates/code.html", ""]
     ]; 

Теперь указываем в настройках tinymce путь к файлу со списком шаблонов. Пусть он лежит в тойж папке, где шаблоны:
template_external_list_url : "/js/tinymce/templates/templatelist.js"

Создаем стили для шаблонов
CSS

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}
/*-== Clear ==-*/
.autoclear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.autoclear {display: inline-block;}
.autoclear {display: block;}

.tpl_image {
    float: left;
    margin-right: 10px;
}

.tpl_image .tpl_image_podpis {
    font-size: 0.9em;
    color: #7a7a7a;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
 } 

Указываем путь к стилям следующим параметром в настройках:
content_css : "/css/tinymce/templates.css", // enable custom CSS,

Стили нужны для того, что в визуальном редакторе наш сниппет отображался корректно, так, как будет выглядеть на сайте.

Что имеем в итоге.

По нажатию на кнопку "Вставить шаблон" откроется окно выбора шаблона

Выбор шаблона

Выбрать нужный, вставить. Сниппет с сохранением форматирования добавится в редактор

Добавленный сниппет

Остается отредактировать текст и изображение

Вид на клиентской части сайта

В итоге результат получается вполне соответствующим виду в редакторе