Убираем вставку   в пустые 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 не включается в при загрузке страницы

Август 30, 2018 г.

Редактор подключен и настроен, но почему то не включается при загрузке страницы. Как быть? Если вы уверены, что все настроено верно, а именно: ...

Читать

Wysiwyg для Drupal 7

Июнь 8, 2011 г.

Аналогичная статья у меня была для 6й версии. Особых проблем для семерки нет, но для тех, кому некогда думать, а надо "просто сделать", данное руководство. ...

Читать

SpecialCharacters плагин в CKE5. Добавляем символы.

Апрель 11, 2025 г.

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

Читать

CKEditor5: удаление элемента при удалении в нем текста (элементов)

Февраль 3, 2025 г.

Пример работы в экосистеме CKE5. Реализуем в нашем плагине обработку изменения данных в модели редактора. При удалении всего текста в инлайновом элементе, удалим сам inline контейнер. Зацепку поместим в init секцию плагина. [crayon-68f21c703c17b858439284/] ...

Читать
 

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

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



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