Плагин 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,
Стили нужны для того, что в визуальном редакторе наш сниппет отображался корректно, так, как будет выглядеть на сайте.
Что имеем в итоге.
По нажатию на кнопку "Вставить шаблон" откроется окно выбора шаблона

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

Добавленный сниппет
Остается отредактировать текст и изображение

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