Создание собственных стилей для Ckeditor
Это продвинутая версия, которая позволяет создавать и добавлять стили из темы прямо в оформление содержимого.
Для этого создадим в css-файле theme.css активного шаблона, например, класс:
p.code-line { opacity: 0.65; }
Теперь перейдем в настройки текстовых форматов /admin/config/content/formats и выберем любой формат с включенным Ckeditor 5, добавим в активный тулбар кнопку Style и в настройки стилей ниже добавим строку:
p.code-line|code-line
Сохраним конфигурацию и создадим ноду с HTML-полем. Выделим кусок текста и применим созданный нами ранее стиль, выбрав его из выпадающего списка "Стили". Сохранив ноду, мы сразу заметим, что текст, к которому мы применили стиль теперь имеет прозрачность 0.65.
Такиим же способом можно добавлять любые классы к базовым элементам, типа span, div, code, H1 и т.д. в формате div.css-класс|название в списке стилей.
Теперь подключим файл стилей для отображения содержимого редактора сразу со стилями, то есть при добавлении текста и применении стилей мы сразу сможем видеть изменения. Для этого в файл темы mytheme.info.yml добавим секцию:
ckeditor5-stylesheets:
- css/theme.css
Заметьте, что мы указали тот же css-файл, в который добавили ранее класс для нашего кастомного стиля. То есть Ckeditor теперь берет стили именно из указанного нами файла. Но он может быть другим, содержать другое оформление, если вам нужно, чтобы в редакторе и на странице содержимое отображалось по разному.
