В предыдущей статье я рассказывала о преимуществах html-редактора CKeditor перед стандартным компонентом textEditor библиотеки Primefaces: умный редактор позволяет легко подключить его к вашему JSF-проекту, настраивать необходимый набор опций toolbar'а, добавлять разнообразные плагины и вообще радоваться жизни, верстая с его помощью страницы и играясь со стилями. Или нет?
Редактируя шаблон курса, который должен быть частью страницы с его описанием, я столкнулась со следующей проблемой: CKeditor игнорирует классы стилей, которые используются в пользовательской верстке. Для исправления ситуации необходимо настроить правила разрешенного содержимого (Allowed Content Rules), которые определяют, какие HTML-элементы, атрибуты, стили и классы разрешены. Если вы как непритязательный пользователь хотите разрешить использование на странице всех типов содержимого (элементы, их атрибуты, стили и классы), то в конфиге редактора необходимо установить истинным значение параметра allowedContent:
config.allowedContent = true;
Для более детальной фильтрации необходимо настроить оба параметра allowedContent и disallowedContent, которые сообщают редактору, какой тип контента разрешает функция в автоматическом режиме. Применение правил происходит по следующему принципу: сначала к элементу применяются правила о запрещенном содержимом, в результате чего может быть отклонен как элемент целиком, так и часть его свойств, при этом они не могут быть возвращены правилами разрешения; затем применяются правила разрешенного содержимого. Если для элемента отсутствуют правила разрешенного содержимого, он удаляется.
Правила можно задавать как в строковом формате с помощью регулярных выражений, так и более привычным способом аналогично стандартному литералу объекта:
allowedContent: 'p h1{text-align}; a[!href]; b i;'
В этом случае разрешенные правила содержимого могут генерироваться динамически с помощью JavaScript или даже храниться в JSON-формате.
Подробнее о настройке правил и примерах можно почитать в соответствующем разделе документации.
Еще один полезный инструмент CKeditor'a при редактировании html-страницы – полностраничный режим (full page mode), который позволяет работать с целыми html-страницами (от <html> до </html>), включая различные метаданные: DOCTYPE, кодировку набора символов, метатеги, текст и цвет фона и т.д. Для отображения всей страницы, включая элементы за пределами раздела, в конфиге редактора необходимо установить истинным значение следующего параметра:
config.fullPage = true;
Белиссимо! Теперь вы можете редактировать html-страницы целиком, настраивая стили и фильтруя содержимое.