Как добавить новый стиль в 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

Ещё записи

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

Рассказываю как добавить новый стиль в «Цкэдитор» «Болта».

Управление миниатюрами изображений в Bolt CMS

Краткая памятка. Вольный пересказ оф. документации.

Создание двух слайдеров с нестандартным содержимым: встроенными постами из Инстаграма и видео

Рассказываю как запилить на «Болте» слайдеры с неким содержимым отличным от просто картинки. В тексте: применение slick-слайдера, практическое использование поля типа repeater, немного о переменной цикла loop.index и встраивании видео посредством Youtube API.