Настройка кастомных стилей TinyMCE4

В настройках плагина tinymce есть поле Custom Style Formats, в котором можно указать название своего стиля и класс, который будет присвоен текущему элементу.
Есть ли возможность указать не только класс, но и тип элемента?

Например если я создам кастомный стиль "Важный блок,important-block", и в редакторе применю его к абзацу, то у меня будет:
<p class="important-block">...</p>

Можно ли указать чтобы он преобразовывал p в div?
<div class="important-block">...</div>


UPD
Немного разобрался. Без доработки плагина не обойтись — синтаксис Custom Style Formats не предполагает других параметров, кроме заголовка и класса. Поэтому немного доработал плагин, чтобы он смог понимать третий параметр — элемент, в который нужно завернуть выделенный текст или весь блок.

Обработка конфига плагина происходит в файле
assets/plugins/tinymce4/bridge.tinymce4.inc.php
в методе bridge_style_formats

При парсинге раздела Custom Style Formats, формируется двумерный массив sfArray, каждая запись которого содержит описание одного кастомного стиля в виде массива:

[
    'title' => 'Важный блок',
    'selector' => список_селекторов,
    'classes' => 'important-block'
]

Затем этот массив преобразуется в конфиг TinyMCE (где и как не разбирался).
Покопавшись в доках TinyMCE, выяснил, что в этот массив можно добавить запись вида 'inline' => 'span' и тогда при применении моего стиля в редакторе, выделенный текст будет завернут в span с классом important-block. Ура!

Правда есть нюанс: если указать 'inline' => 'div', фокус не сработает. При применении стиля ничего не произойдет. Для этого нужно указывать другой параметр 'block' => 'div', в этом случае в div будет звернут весь блок текста и добавлен наш класс. Отлично!

Осталось научить плагин читать третий параметр в конфиге, где я буду указывать в какой элемент нужно заворачивать выделенный текст (или блок). Т.е. в конфиге плагина, в поле Custom Style Formats, я буду писать что-то вроде:
Важный блок,important-block,div|Зеленый текст,green-text,span

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

Я сделал этот так:
В файле bridge.tinymce4.inc.php, в методе bridge_style_formats (строка 100), после комментария:
"Set in plugin-configuration, format: Title,cssClass,div|Title2,cssClass"
добавил два массива со строчными и блочными элементами:
$inline_el = array('b','big','i','small','abbr','acronym','cite','code','em','strong','a','br','map','q','span','sub','sup');
$block_el = array('address','article','aside','blockquote','div','footer','h1','h2','h3','h4','h5','h6','header','hr','main','p','pre','section');
а код, который идет дальше, немного доработал.
Было:

if (isset($this->pluginParams['styleFormats'])) {
    $styles_formats = explode('|', $this->pluginParams['styleFormats']);
    foreach ($styles_formats as $val) {
        $style = explode(',', $val);
        $sfArray[] = array('title' => $style['0'], 'selector' => 'a,strong,em,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,tr,span,img', 'classes' => $style['1']);
    }
}

Стало:

if (isset($this->pluginParams['styleFormats'])) {
    $styles_formats = explode('|', $this->pluginParams['styleFormats']);
    foreach ($styles_formats as $val) {
        $style = explode(',', $val);
        $format = in_array(trim($style['2']),$inline_el) ? 'inline' : (in_array(trim($style['2']),$block_el) ? 'block' : '');
        $sfArray[] = array('title' => $style[0], 'selector' => 'a,strong,em,p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,tr,span,img', 'classes' => trim($style[1]), $format => trim($style[2]));
    }
}

Не все работает идеально (в частности есть некоторые косяки с HTML5-элементами), но меня такое решение пока устраивает.

3 комментария

avatar
Я не нашел, когда было нужно :(
Если не подскажете способ, то проще будет сделать
.important-block{display:block;}
  • 1px
  • 0
avatar
В версии плагина 4.3.7.1 код, отвечающий за обработку кастомных форматов находится в файле
assets/plugins/tinymce4/plugin.class.inc.php
в функции get_mce_script (строка 21) и там есть ошибка в проверке наличия кастомных форматов и обращении к этому полю:
$params['style_formats'] в то время, как это поле $params['styleFormats']
т.е. перед добавлением кода из поста нужно сначала исправить эту ошибку.
avatar
Похожая проблема была.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.