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

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

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

  1. В «Болте» «Цкэдитор» сильно доработан и как многие советы по кастомизации этого редактора не работают в этой ЦМС, так и описанное мной решение может оказаться бесполезным в других случаях.
  2. Описываю решение, применимое к версии «Болта» 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":"Подпись к фото",

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

comments powered by HyperComments

Ещё записи

Как я создаю хлебные крошки в Bolt CMS + немного о таксономии

Как я городил хлебные крошки на этом сайте. Показательный пример, осваивающим «Болт».

Почему не запускается Adobe Experience Design после обновления

Короткое описание возникшей проблемы

Письмо без темы из далёкого 1970 года. Mozilla Thunderbird

Снова трабблы с почтовым клиентом заставляют меня писать заметку в лабораторию.