Добавляем свои стили в CKEditor на Drupal

Задача не для программиста, а больше для системного администратора, т.к. речь пойдет о правильной настройке.

Типично, CKeditor имеет компонент Форматирование (Format), который содержит мало чего полезного для практического применения и даже кое что «вредное» (например, Heading 1 — это вставка H1). Потому мы наполним этот список стилей нужными нам форматами.

На самом деле, мы заменим этот компонент другим, который называется стили.

Что для это нужно сделать:

  • Подключить ваш скрипт с объявлением необходимых стилей;
  • настроить конфигурацию модуля CKEditor в Drupal так, чтобы он подключал ваш скрипт;
  • настроить панель инструментов профиля (или профилей), добавив в неё компонент «Стили», а компонент «Форматирование» убрать.

Создаём и подключаем скрипт с объявлением необходимых стилей

За шаблон можете взять файл ckeditor.styles.js, который лежит в корневой папке модуля CKeditor. Настройте список форматов как вам нужно, там есть примеры и описания.

Куда сохранить получившийся файл?

Вы можете разместить его почти где угодно в вашем drupal проекте. Я рекомендую положить в папку основной темы оформления, к примеру в подкаталог /js.

Подключаем кастомный список стилей

Итак, у вас есть файл, наступило время сообщить об этом CKeditor.

Открываем global settings — /admin/config/content/ckeditor, выбираем профиль в котором будет работать данная настройка. В принципе, вы можете сделать разные настройки для разных профилей.

Пусть это будет Advanced profile, типично ассоциированный с Filtered HTML — /admin/config/content/ckeditor/edit/Advanced. Нам нужна секция — CSS.

Первые два параметра относятся к CSS стилям, которые применяются к тексту в режиме WYSIWYG, а вторые — то что нужно настроить.

Выберите значение для Predefined styles — Define path to ckeditor.styles.js. А в следующем поле задайте путь. Я использовал шаблон для подстановки — %t, который подставляет путь для активной темы. Не имеет значения, что вы можете использовать для админки другой шаблон. Да, между %t и js/ckeditor.styles.js нет слеша. Выглядит не красиво, но работает :).

Настраиваем панель инструментов профиля

Все что мы проделали, позволяет нам загрузить список стилей в компонент «стили». Нам нужно добавить его в панели инструментов. Это делается тут же в настройках профиля — Editor Appearance.

Добавляем Styles, убираем Format. И самое главное — сохраняем настройки :).

Пример файла стилей

Добавляю для полноты описания пример файла стилей.

Использованы — Drupal 7.56, модуль CKEditor 7.x-1.18.

Мало букафф? Читайте есчо !

Вставка html entites в текстовые ноды

Апрель 5, 2025 г.

Делюсь еще одним лайфхаков, как в плагине CKE5 вставить htmlentity. При вставке текста в модель, CKEditor будет преобразовывать html символы вроде '&' и '>'. Но что делать, если нужно вставить символ в виде html кода? Рассмотрим следующий ...

Читать

CKE5 функция создания контейнера-обертки в модели

Март 20, 2025 г.

Делюсь примером кода, для создания обертки в модели экосистемы CKEditor 5. Здесь есть несколько нюансов. Во-первых, нужно проверить, являются ли оборачиваемые элементы валидными по отношению к обертке, в которую мы их помещаем. У CKE элементов ...

Читать

Убираем вставку   в пустые div контейнеры в CKEditor 5

Апрель 9, 2025 г.

Неприятная особенность CKEditor - добавляет в пустые контейнера (в <div>,<p> и т.п.) html код неразрывного пробела. Покажу как можно от этого избавиться через код в кастомном плагине для CKEditor 5 в экосистеме Drupal 8+. Нам понадобится ...

Читать

CKEditor не включается в при загрузке страницы

Август 30, 2018 г.

Редактор подключен и настроен, но почему то не включается при загрузке страницы. Как быть? Если вы уверены, что все настроено верно, а именно: ...

Читать
 

Комментарии к «Добавляем свои стили в CKEditor на Drupal»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: