null

CKeditor – умный html-редактор: трюки при работе с версткой

В предыдущей статье я рассказывала о преимуществах 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-страницы целиком, настраивая стили и фильтруя содержимое. 

Вперед

Коротко о себе:

Работаю программистом в компании Tune-it.

Занимаюсь какими-то проектами, связанными с чем-то.