Фильтруем нежелательные теги из WORD в CKEditor

Хоть CKEditor и позволяет редактировать тексты, но редакторов сложно приучить готовить их сразу на сайте. Потому первая ревизия текста обычно появляется на сайте как результат копирования из редактора MS WORD.

Вот как может выглядеть HTML код после такого копирования:

Совершенно недопустимые прямые стили и указание на семейство шрифтов, куча не нужных тегов <span> и т.п.

CKEditor имеет мощный инструмент фильтрации тегов и их атрибутов. Требуется правильно задать правила. Указанные правила будут действовать не только при сохранении данных, но и при импорте (вставке CTRL+V) из любимого редакторами MS WORD.

Где настроить разрешенные теги и атрибуты для CKEditor

Задаётся настройка изменением параметра конфигурации allowedContent. Это можно сделать через кастомный js файл настроек модуля, или задать прямо в форме конфигурации профиля (/admin/config/content/ckeditor):

Найдите секцию с дополнительными настройками:

В поле пользовательской конфигурации вы можете добавлять свои настройки CKEditor, если они уже не вынесены как одна из настроек в форме профиля.

Правила фильтрации

Чтобы быстро ввести вас в курс дела, я расскажу немного правилах. Более подробно о них вы можете почитать на сайте ckeditor.com в разделе документации.

Формат следующий:

Сначала вы перечисляете теги, а потом то, что вы разрешаете для этих тегов — а именно, какие атрибуты, стили, классы.

Например, следующее правило разрешает картинки с обязательным атрибутом srс (используется восклицательный знак), необязательным alt и возможно использование стилей width и height:

Все остальные атрибуты и стили будут убраны.

Правила перечисляются через «;», потому вы можете перечислить нужные вам теги и их правила.

Я обычно использую следующее правило:

Как видите, никаких <span> и <div>.

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

Фильтрация тегов на уровне плагина в CKEditor 5

Апрель 7, 2025 г.

Плагин DataFilter позволяет управлять фильтрацией HTML тегов. Он является "родным" для CKE плагином, так что ничего дополнительно устанавливать не нужно. Рассмотрим как им можно управлять на уровне кастомного плагина. Допустим, вы хотите разрешить ...

Читать

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

Апрель 9, 2025 г.

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

Читать

Установить фокус ввода в CKE5

Март 23, 2025 г.

При написании плагина столкнулся с тем, что в момент нажатия кнопки в тулзах, редактор терял фокус ввода. Поведение верное, но пользователю не удобно - нужно курсор возвращать на место "вручную". Вернуть фокус можно так: [crayon-68ccaf724a9dd719100917/] ...

Читать

Создание плагина CKEditor 5 в экосистеме Drupal 10

Февраль 8, 2024 г.

Drupal 10 добавил в ядро модуль wysiwyg CKEditor 5. Т.е. уже из "коробки" у вас есть редактор html кода. API CKEditor 4 и 5 версий значительно отличаются, ...

Читать
 

Комментарии к «Фильтруем нежелательные теги из WORD в CKEditor»

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



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