Дополнительные модули для редактора CKEditor на Drupal 8

Пример панели инструмента редактора CKEditor в Drupal 8
Пример панели инструментов редактора CKEditor со многими подключёнными модулями
(но не со всеми из представленных в этом обзоре)

В Drupal 8 по сравнению с Drupal 7 произошли огромные изменения. В частности, самый популярный онлайн-редактор CKEditor перекочевал из разряда внешних модулей в ядро. Это имеет и свои плюсы, и свои минусы. Карты оказались перемешаны и информация по настройке CKEditor на 7-ой версии Друпала на 8-ую не переносится. В частности, если вы прочитали, что можно получить какие-то плюшки, дописав пару строк в файл ckeditor/config.js, то знайте, что это применимо только к седьмой версии. Плюс к этому, даже в рамках одной версии API Друпала претерпевает модификацию и поэтому ранее исправно работавшие модули могут начать создавать проблемы.

По умолчанию в CKEditor на свежеустановленном сайте содержит лишь базовый функционал. Ниже рассмотрены многие полезные дополнительные модули, стабильно работающие на сентябрь 2017 под Drupal 8.3.7. В том числе описаны некоторые тонктости их установки и настройки, до которых автор этих строк долго додумывалась. Выложенны два наших собственных небольших патча. В конце статьи приведены небольшие списки горячих клавиш CKEditor и ссылки на статьи по написании своих модулей. В скобках приведены номера последних версий модулей на момент обзора.

 

D8 Editor Advanced link

Окно модуля "D8 Editor Advanced link"(v1.4)
Позволяет вкладывать в тег ссылки дополнительные атрибуты, такие как title, class, id, rel. Наиболее полезен атрибут target, позволяющий открывать ссылку в новом окне. Таким образом пользователь не уходит с вашего сайта до тех пор, пока сам сознательно этого не захочет.

Небольшой трюк для значительного облегчения жизни. Чтобы галочка открытия в новом окне по-умолчанию всегда стояла, необходимо отыскать файл \modules\editor_advanced_link\editor_advanced_link.module и в строке  '#default_value' => $get_default_value('target', FALSE)' заменить FALSE на TRUE.
 (Примечание: модуль Linkit - Enriched linking experience предоставляет больше возможностей, но разобраться с его конфигурированием сложнее.)

D8 Editor File upload

(v1.2)
Позволяет загружать файл на сервер прямо из редактора CKEditor и вставлять в набираемый текст ссылку на него. Если планируете выкладывать на страницах своего сайта архивы или документы, то без этого модуля замучаетесь. В настройках можно задать, куда именно будут помещаться документы, дозволенные расширения и максимальный размер файла.
Меню настройки модуля "D8 Editor File upload"

 

MIME

(v1.6)
Значительно облегчает  повторное использование на страницах уже загруженных на сайт изображений и файлов, создание для них отдельных директорий хранения и т.п.
модуль MIME в работе

 

CKEditor Youtube

(v1.1), требует library.
Для вставки на сайт видео с YouTube. Можно задать много параметров.
Меню настройки модуля "CKEditor Youtube"
(Примечание: для вставки видео с Vimeo возьмите модуль Video Embed Field . Он обеспечивает более глубокую интеграцию и ещё бóльшие возможности. Другая сторона палки - бóльшая сложность и тяжеловесность.)

 

CKEditor Abbreviation

(v1.1)
Вставка в текст абревиатур, таких как PHP .
Окно модуля "CKEditor Abbreviation"

 

CKEditor CodeMirror

(v1.0), требует library, зависит от модуля Libraries API (v3.x)
Цветовая подстветка кода. Его горячие клавиши приведены на w8tcha.github.io. У модуля много настроек, выводимых в окно конфигурации текстового формата. При установке библиотеки её папку codemirror следует переименовать в ckeditor.codemirror и разместить в корневой папке \libraries (если такой нет, то создать) или в \sites\all\libraries.

Пример представления кода в редакторе CKEditor
Пример представления кода

 

 

CKEditor Non-breaking space Plugin

(v1.2)
Вставка в текст неразрывные пробелы. К примеру, если хотите быть уверены, что в словосочетании Drupal 8 цифра ни при каких манипуляциях с шириной экрана на окажется оторванной. Выставляется щелчком на кнопке или по нажатию Ctrl+Space.

 

CKEditor Font Size and Family

(v1.0), требует library
Добавляет в редактор возможность выбора шрифтов и их размера. По умолчанию не работает. Необходимо скачать патч и поместить содержащийся в нём файл по адресу \modules\ckeditor_font\src\Plugin\CKEditorPlugin . Можно задать свой собственный набор шрифтов. Для оценки, какие туда можно добавлять, а какие не стоит, можете воспользоваться нашим тестированием.

Недостаток модуля: кнопки "Font" и "Size" на панели инструментов неадекватно широкие. Видно на скриншоте в начале статьи.

 

CKEditor Description List

(v1.0), требует library
Библиотеку при размещении следует переименовать в descriptionlist. Модуль позволяет вставлять в документ списки определений. Точнее, размещает на панели инструментов кнопки, отвечающие за вставку тегов <dl>, <dt> и <dd>. Теги чередуются автоматически, так что для простых случаев достаточно однократного щелчка по первой из кнопок. Вторая и третья используются лишь при необходимости сгенерировать список с несколькими подряд идущими терминами или определениями.

 

CKEditor List Style

(v1.1), требует library
Расширяет возможности стандартных ненумерованных и нумерованных списков, позволяя задать тип оформления и начальное значение. Данные выбираются посредством контекстного меню.

 

CKEditor Color Button

(v1.0), имеет зависимость от модуля Panel Button (v1.0). Их библиотеки library_Color и library_Panel.
Добавляет в CKEditor кнопки для задания цвета текста и фона. Библиотеки должны быть размещены в папке \libraries в корне сайта. Размещение их в \sites\all\libraries не срабатывает, в том числе не помогает и добавление в название папки "ckeditor.". Вы можете использовать палитру по умолчанию или задать свою. Для выбора цветов можете воспользоваться нашей таблицей.

Цветовая палитра по умолчанию:
Цвета по умолчанию для модуля ColorButton1ABC9C,2ECC71,3498DB,9B59B6,4E5F70,F1C40F,
16A085,27AE60,2980B9,8E44AD,2C3E50,F39C12,
E67E22,E74C3C,ECF0F1,95A5A6,DDDDDD,FFFFFF,
D35400,C0392B,BDC3C7,7F8C8D,999999,000000

Альтернативная цветовая палитра:
Альтернативная палитра для модуля ColorButtonFFEFD5,F1C40F,F39C12,E67E22,D35400,E74C3C,
C0392B,FF0000,FF00FF,8E44AD,8A2BE2,4B0082,
00FFFF,2980B9,0000FF,00008B,00FF00,27AE60,
008000,808000,16A085,2F4F4F,A0522D,8B4513,
FFFFFF,DDDDDD,BDC3C7,999999,4E5F70,000000

Colorbox Inline

(v1.0-rc2), имеет зависимость от Colorbox (v1.4) , которому, возможно, может потребоваться library.
Позволяет выводить изображения внутри статьи во всплывающем окне. Если кликните мышкой по уменьшенным изображениям в этой статье, то увидите модуль в работе.

Проблема с модулем в том, что он по умолчанию выводить изображения точно такого же размера, что и на странице, а не полноразмерные. Стандартными способами это не обойти: захватываются свойства как в HTML-атрибуте, так и в стиле. Единственное решение, которое получилось мне обнаружить, это вручную в коде окружить изображение тегом ссылки, внутри которой прописать class="colorbox" href="путь". Если хотите добавить возможность перелистывания рисунков, то допишите атрибут data-colorbox-gallery="название". Эта технология описана на drupal.org/node/2779659. (для чего там упомянут класс cboxElement - непонятно, без него всё работает также). Это неудобно, но более лёгкого способа обнаружить не получилось. Предположительно можно облегчить вставку выскакивающих рисунок с помощью модуля Insert (v1.0-beta1), но мне не удалось заставить работать его надлежащим образом.

Рекомендую в настройках ColorBox пункт Transition Type переставить в None - поведение будет более простым, но и более ожидаемо-понятным. Opacity рекомендую уменьшить с 0.85 до 0.75 .

 (Примечание: смеждный модуль  Colorbox Load позволяет создавать галерею из пристыковываемых к статье изображений. Но это уже не относится к CKEditor.)

 

CKEditor Spoiler

(v1.0), требует library.
Очень интересный и полезный модуль. Но упорно-глючный. Мне всё же удалось найти способ заставить его нормально работать. Рецепт выложила на drupal.org/node/2724139. Здесь опишу его по-русски. К сожалению, способ работает только в том случае, если этот модуль вы ещё на сайте не включали. Иначе он уже успел куда-то занести фрагменты своих глючных CSS и теперь CKEditor будет отображать заголовок спойлеров неадекватно . Не помогает даже полная перестановка всего ядра Друпала.

Установка модуля CKEditor Spoiler

Недостаток модуля: для ввода заголовка спойлера проще залезть в код, чем попасть мышкой по малюсенькому невидимому пробелу.

 

CKEditor Smiley

(v1.0), требует library
Модуль для вставки смайликов.
Окно вставки смайликов модуля CKEditor Smiley
По умолчанию не работает. Мне удалось найти решение, выложила его на drupal.org/node/2716745.

Установка модуля CKEditor Smiley


 

 

 


Краткно опишу ещё несколько модулей. В общем случае ставить не рекомендую, но могут быть полезны для решения отдельных частных задач. Они все рабочие (по состоянию на сентябрь 2017, Drupal 8.3.7).

Layouter - WYSIWYG layout templates (v1.0) - Задаёт схемы размещения материала на странице, предлагая выбрать один из предложенных вариантов.

Inline responsive images (v2.1) - Изображения, отзывающиеся на изменение ширины экрана. Отмечу, что в настройках CKEditor нельзя одновременно задействовать опции "Display image styles" и "Display responsive images".

CKEditor Templates (v1.0), требующий library. - Вставка шаблонов кода, предоставляемых некоторыми темами (см. файл "templates/ckeditor_templates.js"). Их можно написать и самостоятельно.

CKEditor Markdown (v1.0) - позволяет создавать оформление с помощью markdown-разметки.

CKEditor CodeTag (v1.0) - окружает часть текста тегом <code>. Имеет полезность только для обозначения небольшого фрагмента кода внутри строки. Если обернуть им несколько строк, то их разбивка уничтожится.

Symbol (v1.0), library - добавляет в редактор возможность вставлять тысячи различных символов. Пара сотен символов, предоставляемых стандартной комплектацией CKEditor, на этом фоне меркнет. На скриншоте представлена лишь одна из многих десяток вкладок. Но это обилие одновременно является и минусом - в нём трудно разобраться.
Меню стрелок модуля Symbol

 

 


Горячие клавиши CKEditor

Горячие клавиши редактора описаны на docs.ckeditor.com. Их не так много по сравнению с большинством офлайн-редакторов и почти все стандартны. Отдельно отмечу несколько:

^B, ^I, ^U - полужирный шрифт, курсив, подчёркнутый текст
^Home/^End - перескок в начало/конец всего документа
^+3 - добавление текста в формате нового параграфа до проблемного элемента (такого как рисунок, таблица или <div>)
^+4 - после проблемного элемента
^+V - вставка содержимого буфера как простого текста
!0 (ноль) - всплывающее окно "Accessibility Instructions"
Ctrl+правый щелчок - открытие собственного контекстного меню браузера заместо контекстного меню CKEditor. Это нужно для включения-отключения проверки правописания.

Может быть такое, что одна из полезных комбинаций CKEditor будет конфликтовать с горячей клавишей встроенного в браузер плагина. В большинстве случаев горячую клавишу плагина можно удалить или модифицировать, если в адресной строке набрать about:config и далее в поиске название плагина.

 

 


Написание своих плагинов для CKEditor на Drupal 8.

Если у вас более серьёзные запросы, то используйте поиск по drupal.org или освойте написание собственных плагинов. Для старта можете воспользоваться следующими статьями:

 

 

На этой странице нашего сайта можно посмотреть, как реализуются и интерпретируются темой оформления основные функции CKEditor.

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.