Добавляем свои стили в 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.

Написать комментарий

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

Заполнение поля формы через GET в Drupal 7

Июнь 23, 2011 г.

Рассмотрим случай, когда нужно предварительно заполнить поле (ряд полей) формы при переходе на страницу с этой формой в Drupal. Данные для инициализации передаём как часть uri (т.е. метод GET). Подход проверен для Drupal 7. [crayon-5a3648e7d24bf887121102/]

Читать

Настройка ЧПУ в CMS

Август 3, 2015 г.

Как я напишу позднее, ЧПУ - один из факторов учитываемых в SEO. А пока как программист подскажу специалистам в SEO, где искать настройки ЧПУ в популярных CMS. Начну с рассказа о двух хорошо мне знакомых CMS, потом буду по мере возможности дополнять ...

Читать

 

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

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



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