Пример работы в экосистеме CKE5. Реализуем в нашем плагине обработку изменения данных в модели редактора. При удалении всего текста в инлайновом элементе, удалим сам inline контейнер.
Зацепку поместим в init секцию плагина.
|
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 |
export default class MyPlugin extends Plugin { /** * @inheritDoc */ init() { const editor = this.editor; editor.model.document.on('change:data', () => { this._removeEmptyElms(editor, editor.model.document.getRoot()); }); } /** * Remove empty span containers * @param {CKEditor object} editor * @param {Element object} element */ _removeEmptyElms(editor, element) { const elms = element.getChildren(); elms.forEach(elm => { if (elm.is('element', 'span') && !elm.childCount) { editor.model.change(writer => { writer.remove(elm); }); } else if (elm.is('element')) { this._removeEmptyElms(editor, elm); } }); } } |
В данном случае в роли inline элемента у нас выступает SPAN. Мы цепляемся за событие «change:data» и каждый раз проходим по всему дереву документа в поисках пустых SPAN элементов.
Так конечно же делать не стоит, на практике надо рассматривать лишь окрестность модели, где происходит редактирование.