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

Неприятная особенность CKEditor — добавляет в пустые контейнера (в <div>,<p> и т.п.) html код неразрывного пробела.

Покажу как можно от этого избавиться через код в кастомном плагине для CKEditor 5 в экосистеме Drupal 8+.

Нам понадобится скелет плагина. Можно взять какой то простой плагин как шаблон и убрать от туда лишний код. Один из файлов-исходников для билда js плагина, обычно содержит класс, расширяющий ckeditor5/src/core/Plugin.

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

Разберем следующий код:

Мы цепляемся к трансформации из модели в HTML код (downcast converstion) для элемента модели htmlDivParagraph, который представляет контейнер div в модели CKE5.

Я беру некоторые атрибуты модели — классы и стили, в данном случае. Если вам нужны какие то еще атрибуты, просто добавьте их в массив htmlAttrs.

Мы знаем, что если контейнер пустой, то CKE добавит nbsp филлер, потому нам нужно обмануть редактор. Я добавляю в контейнер пустую ноду с текстом. Таким образом у контейнера появляется дочерний элемент, а nbsp уже не добавляется.

При этом, если вы вручную добавите внутрь div ‘&nbps;’, то этот текст будет сохранен, по крайней мере на этапе фильтрации текста.

Важен приоритет выполнения конверсии, он должен быть выше normal.


Если вам нужно готовое решение, то можете использовать плагин ckenbsp. Там я реализовал фикс для DIV и P. Можно настроить для каждого текстового формата, использовать или нет NBSP филлер отдельно для DIV и P тегов.

Написать комментарий

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

Добавляем свои стили в CKEditor на Drupal

Ноябрь 16, 2017 г.

Задача не для программиста, а больше для системного администратора, т.к. речь пойдет о правильной настройке. Типично, CKeditor имеет компонент Форматирование ...

Читать

Подключаем wysiwyg CKeditor к нашим формам в Drupal 7

Декабрь 20, 2014 г.

Как подключить CKeditor к Drupal 7 я рассказывал ранее. После настройки модуль подключит редактор CKeditor к полям редактирования публикаций. А как подключить wysiwyg к собственным формам? В 6-й версии Drupal редактор с помощью модуля CKeditor подключался ...

Читать

 

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

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



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