Как добавить новый стиль в CKeditor. Применительно к Bolt CMS

Встроенных в «Цкэдитор» стилей часто не хватает. Так, например я использую для подписей к фотографиям абзац с отдельным классом. Чтобы не добавлять классы вручную есть смысл просто добавить новый стиль в набор указанный на скриншоте.

Оговорю важные нюансы.

В «Болте» «Цкэдитор» сильно доработан и как многие советы по кастомизации этого редактора не работают в этой ЦМС, так и описанное мной решение может оказаться бесполезным в других случаях.
Описываю решение, применимое к версии «Болта» 3.3.3. Для других версий, особенно для второй нюансы могут отличаться.

Сперва открываем файл ckeditor. js, расположенный в «public/bolt-public/view/js/ckeditor/».

Скрипт велик и минимизирован, поэтому в однострочном коде придётся прибегнуть к помощи поиска. Ищем строчку «CKEDITOR. config. format_p», по ней наверняка найдёте нужный участок кода. Нас интересует следующий фрагмент (привёл его к читаемому виду при помощи плагина «Бьютифи» для «Брэкетса»).

format_tags = "p;h1;h2;h3;h4;h5;h6;pre;address;div";
CKEDITOR.config.format_p = {
    element: "p"
};
CKEDITOR.config.format_div = {
    element: "div"
};
CKEDITOR.config.format_pre = {
    element: "pre"
};
CKEDITOR.config.format_address = {
    element: "address"
};
CKEDITOR.config.format_h1 = {
    element: "h1"
};
CKEDITOR.config.format_h2 = {
    element: "h2"
};
CKEDITOR.config.format_h3 = {
    element: "h3"
};
CKEDITOR.config.format_h4 = {
    element: "h4"
};
CKEDITOR.config.format_h5 = {
    element: "h5"
};
CKEDITOR.config.format_h6 = {
    element: "h6"
};

Добавляем в format_tags новый стиль и описываем его ниже по образу и подобию стоковых, добавляя класс, то есть атрибут, соответствующим параметром.

Вот так выглядит добавленный новый стиль (все стоковые в примере выпилены).

format_tags = "imagetitle";
CKEDITOR.config.format_imagetitle = {
    element: "p",
    attributes: {'class':'image-title'}
};

Но это мы только добавили описание стиля, теперь нужно его добавить в само диалоговое меню. Для этого открываем файл ru. js, расположенный в «public/bolt-public/view/js/locale/ckeditor/».

Ищем по слову «Обычное», описанию одного из стоковых стилей. Сразу находим место, где нам нужно вставить следующую конструкцию.

"tag_imagetitle":"Подпись к фото",

Чистим кэш браузера и обновляем страницу. Новый стиль добавлен. По аналогии можно добавлять и другие конструкции.