Сделайте свой Drupal 9 CKEditor популярным - 7 полезных модулей, о существовании которых вы не знали

Редактор контента - это, по сути, самая важная функция CMS. А с помощью такого мощного инструмента, как CKEditor, в качестве инструмента редактирования форматированного текста по умолчанию, Drupal значительно улучшил свою игру управления контентом, добавив несколько новых функций для Drupal 8/9, таких как система виджетов CKEditor и расширенный фильтр контента (ACF). Так что да, он довольно мощный даже с функциями по умолчанию ... Но вы действительно можете улучшить свою игру CKEditor с помощью некоторых дополнительных модулей и подключаемых модулей. Читайте дальше, чтобы узнать о лучших и наиболее интересных дополнениях, расширяющих возможности и удобство использования CKEditor.

Drupal 9 CKEditor

Во-первых, для тех, кто плохо знаком с Drupal, CKEditor 4.5 является стандартным редактором WYSIWYG (то, что вы видите, то и получаете) в Drupal 8/9. Это текстовый редактор, который помогает администраторам веб-сайтов писать и редактировать контент прямо на веб-страницах. Как и Drupal, CKEditor - это проект с открытым исходным кодом, который недавно был обновлен множеством мощных новых функций, которые будут продолжать улучшаться. В рамках инициативы по обеспечению готовности Drupal 10 участники Drupal работают над внедрением последней и самой современной версии - CKEditor 5 - в Drupal 10.

Теперь, когда у нас есть основы, давайте перейдем к обновлениям!

Расширение CKEditor с помощью этих фантастических модулей Drupal 9

1. CKEditor Подробнее

Вы знаете те моменты, когда вы хотите дать читателю возможность просмотреть остальную часть большого количества текста? Это ваш сигнал к использованию функции CKEditor Read More, которая предлагает вашим пользователям «читать дальше», при этом сохраняя компактный макет вашей страницы. Чтобы добавить его, Drupal 9 предоставляет простой и легкий способ включить функцию «Читать больше / меньше показывать» после установки модуля участника.

Реализация модуля:

После установки этого модуля вам нужно будет настроить несколько параметров:

1. Отредактируйте предпочтительный текстовый формат и включите «Ограничить разрешенные HTML-теги».
2. Добавьте <div data-readmore-less-text data-readmore-more-text data-readmore-type class = "ckeditor-readmore"> в «Разрешенные теги HTML». Отключите «Ограничение разрешенных HTML-тегов» и нажмите «Сохранить».
3. Теперь перетащите значок «Подробнее» с доступных кнопок на активную панель инструментов (как показано на изображении выше) и нажмите «Сохранить».
4. После очистки кеша вы найдете значок « Подробнее » в текстовом редакторе, когда выберете «Предпочитаемый текстовый формат».

Как это использовать:

В области содержимого щелкните значок « Текстовый формат ». У вас получится прямоугольная коробка. Добавьте остальной контент, который вы хотите показать после того, как пользователь нажмет «Подробнее».

FAQ: Могу ли я изменить текст «Читать дальше»?

Абсолютно! Просто нажмите на вкладку «Подробнее» в «Настройках плагина CKEditor» и измените текст.

2. Цветная кнопка CKEditor

По умолчанию CKEditor не предлагает вам изменить цвет текста из редактора. Но если вы действительно хотите изменить цвет определенного текста или даже выделить текст разными цветами, модуль Drupal 9 CKEditor Color Button должен быть в вашем списке. Обратите внимание, что для этого модуля также требуется установка модуля кнопок панели, и для обоих этих модулей необходимо установить библиотеки, библиотеку кнопок цвета и библиотеку кнопок панели. После установки модулей и добавления библиотек в папку с библиотеками темы мы можем переместить кнопку цветов с Доступных кнопок на Активную панель инструментов в предпочтительном текстовом формате.

FAQ: Могу ли я добавить собственный цвет?

Да! Если вы не хотите использовать какие-либо из уже доступных цветов по умолчанию, вы также можете установить собственный цвет. Вы можете сделать это в разделе «Формат текстовых редакторов», где вы активировали параметры цвета. Найдите кнопку «Цвет CKEditor» в разделе «Настройка плагинов CKEditor» в «Формате текстовых редакторов» и добавьте цвет в текстовую область «Цвета текста» через запятую и без знака #.

3. CKEditor Youtube

Модуль Drupal 9 CKEditor Youtube помогает вам добавлять видео Youtube в ваш контент без длинного кода для встраивания. После установки и перемещения формы значка Youtube с Доступных кнопок на Активную панель инструментов вы можете найти значки Youtube в текстовом редакторе в предпочтительном текстовом формате. Этот модуль зависит от библиотеки.

Одна из лучших особенностей этого модуля - его гибкость. Как показано на скриншоте выше, вы можете «Вставить встроенный код» или вставить URL-адрес Youtube, указав ширину и высоту. Также у вас есть удобные опции, такие как «Автозапуск», «Начать в (определенное время)» и «Показать элементы управления проигрывателем».

4. Пользовательский интерфейс шаблонов CKEditor и шаблонов CKEditor.

У вас много одинаковой структуры контента для страниц или сообщений вашего веб-сайта? Модули пользовательского интерфейса CKEditor Templates и CKEditor Templates User Interface - ваш билет к простому копированию. Оба модуля зависят от библиотек, которые можно загрузить и установить в соответствии с инструкциями на страницах модуля. После установки этих библиотек вы можете переместить значок шаблона с Доступных кнопок на Активную панель инструментов, как показано на изображении ниже.

Модуль CKEditor Templates предоставляет всплывающее диалоговое окно с предопределенными шаблонами. Когда вы нажмете на значок шаблона (как показано на скриншоте выше), вы увидите всплывающее окно, в котором вы выберете любой из ваших предопределенных шаблонов. Затем шаблон будет вставлен с включенными «текстовым форматом и стилями».

Модуль пользовательского интерфейса шаблонов CKEditor - это то, что вы используете для создания шаблонов, которые вы выбираете в модуле шаблонов CKEditor . После включения модуля вы найдете опцию в разделе Config> Content Authoring> CKEditor Templates .

Когда вы щелкнете по шаблонам CKEditor в конфигурации, вы будете перенаправлены на страницу шаблонов конфигурации CKEditor . Теперь вы можете добавлять или редактировать шаблоны.

5. CKEditor CodeSnippet

Используя модуль CKEditor CodeSnippet, вы можете добавить свой «кодовый контент» в контент, чтобы он был выделен и хорошо отформатирован. Этот модуль использует библиотеку highlight-js и все доступные для нее стили. Установка этого модуля с помощью composer автоматически установит библиотеку. После установки этого модуля вы можете переместить значок «фрагмент кода» с кнопки «Доступно» на активную панель инструментов.

Теперь вы найдете вкладку Code Snippet в настройках плагина CKEditor текстового формата. Здесь вы можете отметить / снять отметку с поддерживаемых языков программирования.

FAQ: Как им пользоваться?

После установки модуля вы можете вставить функцию CodeSnippet в свой контент из CKEditor. При нажатии на значок фрагмента кода появляется всплывающее окно. Здесь вы можете вставить свой код и выбрать язык кода.

6. CKEditor Wordcount

Итак, вы работаете с ограничением количества слов / символов ... Это обычная ситуация на сильно стилизованных сайтах с динамическими макетами. И это может стать особенно запутанным, если несколько рук работают над одним и тем же контентом. В этих случаях полезно видеть количество символов и слов прямо в вашем CKEditor в нижнем колонтитуле самого редактора (как и в MS Word). Именно тогда вы должны установить модуль CKEditor Wordcount. После установки модуля и библиотеки вы можете найти «количество слов и количество символов» в настройках плагина CKEditor текстового формата. Здесь вы можете отмечать / снимать отметки с функций в соответствии с вашими требованиями. Вы также найдете счетчик в CKEditor в его нижней правой части.

7. Текст в Твиттере CKEditor

Пытаетесь заработать очки в Интернете? Используя модуль CKEditor Tweetable Text, вы можете дать своим пользователям возможность твитнуть определенный фрагмент текста, щелкнув слово или синтаксис. Просто установите модуль и библиотеку в соответствии с инструкциями на странице модуля и переместите текстовый значок в виде твита с кнопки «Доступно» на активную панель инструментов. Затем вы найдете значок твита в текстовом редакторе. При нажатии на этот значок откроется всплывающее окно. Здесь вы можете добавить отображаемый текст (для каких слов вы хотите добавить значок твита) и текст для твита (текст, который будет отображаться в твите). Когда пользователь нажимает « Показать текст», он перенаправляется в Twitter, и отображается текст в твиттере.