CKEditor и div: как предотвратить удаление классов

Быстрый ответ

Для предотвращения автоматического удаления классов из <div> CKEditor'ом, следует изменить конфигурационный параметр allowedContent:

CKEditor.replace('editor', {
    allowedContent: 'div(!myClass)' // "myClass" теперь разрешён для div
});

Этот параметр позволит использовать теги div, добавив класс .myClass. Если нужно допустить все классы для всех тегов, значение allowedContent должно быть установлено в true:

CKEditor.replace('editor', {
   allowedContent: true // Все классы разрешены
});

Эти настройки позволяют CKEditor сохранять ваши классы, но будьте аккуратны с командой разрешения всего, так как она может сделать сайт уязвимым для атак.

Детальные настройки для сохранения классов

CKEditor иногда убирает классы по причине работы функции Advanced Content Filter (ACF), которая предназначена для обеспечения безопасности и правильности контента. Чтобы сконфигурировать сохранение необходимых классов и устранение лишних, следуйте следующим советам:

Подробная фильтрация с использованием config.js

Измените поведение CKEditor, точно настроив файл config.js. Пример конфигурации:

config.allowedContent = {
    'div': {
        classes: 'myClass' // только "myClass" допустим для div
    }
};

Примечание: Замените 'myClass' на название класса, который вы хотите сохранить, или использовать символ '*' для разрешения всех классов.

Подробнее об этом расскажет наш спикер на видео

Дополнительное разрешение с помощью extraAllowedContent

extraAllowedContent позволяет определить дополнительные элементы и атрибуты, которые следует сохранить:

config.extraAllowedContent = 'div(myClass)'; // "myClass" разрешён только для div

Для разрешения всех стилей, классов и идентификаторов для любых элементов, примените:

config.extraAllowedContent = '*(*);*{*}'; // Все разрешено

Использование индивидуальных параметров для разрешения уникальных ситуаций

Для точного контроля используйте индивидуальные настройки:

Для разрешения использования идентификаторов во всех элементах:

config.extraAllowedContent = '*[id]'; // ID разрешены для всех элементов

Настраиваемые разрешения для конкретного содержимого:

config.extraAllowedContent = 'p(margin, padding);div(row, column)'; // Разрешения задаются для выбранных элементов

Реализация и аспекты тестирования

Тестирование, проверка и очистка кэша

Проводите тестирование ваших настроек и проверяйте результаты после внесения изменений:

1. Очистите кэш браузера: Это поможет убедиться, что все изменения применены и CKEditor не работает с кэшированными данными.
2. Проверьте разнообразные типы контента: Убедитесь, что сохранены все нужные вам классы и стили.

Рекомендации по безопасности

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

Конфигурации, специфичные для Drupal

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

Визуализация

CKEditor можно представить как пазл, где каждый кусочек контента — это часть пазла, а контейнеры (<div>) — это коробки для этих частей. Правила фильтрации иногда могут усложнить воссоздание полной картины.

Коробка (📦) 
Розовый фрагмент (🌹) в коробке (👷‍♂️🎨) = Контент с соответствующими классами

После применения правил фильтрации выходит:

До (🌹📦👷‍♂️🎨): Контент внутри div с классами.
После (🌹📦): Классы исключены, остался только контент.

🌹💈: CKEditor меняет "коробки", удаляя классы. Понимание настроек возвращает нам общую картину пазла.

Полезные материалы

1. Введение | Документация CKEditor 4 – официальное руководство по Advanced Content Filter.
2. Конфигурация классов (CKEDITOR.config) | Документация API CKEditor 4 – ключ к пониманию как сохранять классы.
3. Проблемы · ckeditor/ckeditor4 — обсуждение и решение проблем с ACF на GitHub.
4. Селекторы классов – CSS: Cascading Style Sheets | MDN – основы применения классов от MDN.
5. HTML div tag – все, что нужно знать о теге <div> и его управлении.