Делюсь примером кода, для создания обертки в модели экосистемы CKEditor 5.
Здесь есть несколько нюансов.
Во-первых, нужно проверить, являются ли оборачиваемые элементы валидными по отношению к обертке, в которую мы их помещаем. У CKE элементов есть т.н. схема, где прописывается разрешенные дочерние элементы, а также родительские контейнера, в которые позволено добавлять данный элемент.
При регистрации это выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 |
schema.register('myElement', { allowIn: [ 'paragraph' ], inheritAllFrom: '$inline', isInline: true, isObject: false, isSelectable: true, allowChildren: [ '$inline', '$text', ], }); |
Тут, например, регистрируется инлайновый компонент, который резрешено добавлять внутрь параграфов, а в него можно добавлять другие инлайновые элементы, текст.
Во-вторых, нужно помнить что все изменения модели производятся внутри callback функции, передаваемой внутрь метода модели change(). Она получает объект writer, через который вы и совершаете изменения в модели документа.
|
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 32 33 34 35 |
// получим модель из редактора const { model } = this.editor; // контент для вставки мы, к примеру, // получаем из выделения в документе const selection = model.document.selection; const selectedContent = model.getSelectedContent(selection); const elementName = '....'; model.change((writer) => { // создадим наш элемент-обертку const El = writer.createElement(elementName); // проверяем, какие элементы можно вложить в El const validNodes = []; for (const node of selectedContent.getChildren()) { if (model.schema.checkChild(El, node)) { validNodes.push(node); } } // Если нет валидных элементов, ничего не делаем if (validNodes.length === 0) { console.warn(`В выделении нет элементов, которые можно вложить в ${elementName}!`); return; } // Вставляем валидные элементы внутрь обертки for (const node of validNodes) { writer.append(node, El); } // вставляем обертку (происходит вставка на подобии операции paste) model.insertContent( El ); }); |
