Question

我有以下代码在当前位置插入文本：

editor.model.change( writer => {
                    editor.model.insertContent( writer.createText('[Insert]') );
                });

在大多数情况下，例如在段落或标题中插入，此方法效果很好。给出示例：

之前：

<h2>Sample</h2>

插入后：

<h2>Samp[Insert]le</h2>

但是，例如，如果文本使用自定义字体大小进行了预格式化，则会破坏html元素：

之前：

<p><span class="text-huge">Sample formatted text</span></p>

插入后：

<p><span class="text-huge">Sample fo</span>[Insert]<span class="text-huge">rmatted text</span></p>

请注意，元素被拆分，并且在不应用自定义样式的情况下插入了文本。 [插入]设置在两个跨度之间...

如何在不修改html结构的情况下直接插入文本？

Answer 1

之所以会这样，是因为创建的文本节点未设置属性。为此，您需要get current selection's attributes并将其传递给writer.createText()方法。然后，创建的文本节点将具有以下属性：

const model = editor.model;

model.change( writer => {
    const currentAttributes = model.document.selection.getAttributes();

    model.insertContent( writer.createText( '[Foo]', currentAttributes ) );
} );

或者，如果要插入文本，则可以使用writer.insertText()方法：

editor.model.change( writer => {
    const selection = editor.model.document.selection;

    const currentAttributes = selection.getAttributes();
    const insertPosition = selection.focus;

    writer.insertText( '[Foo]', currentAttributes, insertPosition );
} );

CKEditor5插入文本而不会破坏当前元素

1 个答案: