Неприятная особенность CKEditor — добавляет в пустые контейнера (в <div>,<p> и т.п.) html код неразрывного пробела.
Покажу как можно от этого избавиться через код в кастомном плагине для CKEditor 5 в экосистеме Drupal 8+.
Нам понадобится скелет плагина. Можно взять какой то простой плагин как шаблон и убрать от туда лишний код. Один из файлов-исходников для билда js плагина, обычно содержит класс, расширяющий ckeditor5/src/core/Plugin.
Не останавливаюсь подробно на создании архитектуры плагина, т.к. это отдельная тема для разговора, и у меня уже есть статья на эту тему. Потому перейду сразу к нашей цели.
Разберем следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
import {Plugin} from 'ckeditor5/src/core'; /** * The editing feature. * * @extends module:core/plugin~Plugin */ export default class MyPlugin extends Plugin { /** * @inheritDoc */ init() { const {conversion} = this.editor; conversion.for('downcast').elementToElement({ model: 'htmlDivParagraph', converterPriority: 'high', view: (modelElement, { writer }) => { let htmlAttrs = { class: modelElement.getAttribute('class') || null, style: modelElement.getAttribute('style') || null, } const div = writer.createContainerElement('div', htmlAttrs ); const text = writer.createText(''); writer.insert(writer.createPositionAt(div, 0), [text]); return div } }); } } |
Мы цепляемся к трансформации из модели в HTML код (downcast converstion) для элемента модели htmlDivParagraph, который представляет контейнер div в модели CKE5.
Я беру некоторые атрибуты модели — классы и стили, в данном случае. Если вам нужны какие то еще атрибуты, просто добавьте их в массив htmlAttrs.
Мы знаем, что если контейнер пустой, то CKE добавит nbsp филлер, потому нам нужно обмануть редактор. Я добавляю в контейнер пустую ноду с текстом. Таким образом у контейнера появляется дочерний элемент, а nbsp уже не добавляется.
При этом, если вы вручную добавите внутрь div ‘&nbps;’, то этот текст будет сохранен, по крайней мере на этапе фильтрации текста.
Важен приоритет выполнения конверсии, он должен быть выше normal.
Если вам нужно готовое решение, то можете использовать плагин ckenbsp. Там я реализовал фикс для DIV и P. Можно настроить для каждого текстового формата, использовать или нет NBSP филлер отдельно для DIV и P тегов.