Question

我将简化问题的用例。假设我有一个包含多个段落的文本，并且我想在单击按钮时将#之间的所有内容都加粗。

示例：

Lorem＃ipsum＃dolor＃sit＃amet

保密专家。

Cras＃efficitur＃丝绒

将被“转化”为这样：

Lorem＃ ipsum ＃dolor＃ sit ＃amet

保密专家。

Cras＃效率＃velit

我已经有了UI逻辑，这是页面中的一个按钮，可触发自定义Ckeditor命令。

我的第一个猜测是遍历段落，然后遍历id内的元素，如下所示：

    execute( options ) {
    const { editor } = this;
    const root = editor.model.document.getRoot();
    const paragraphs = Array.from( root.getChildren() );
    paragraphs.forEach( paragraph => {
        const content = Array.from( paragraph.getChildren() );
        content.forEach( element => {
            editor.model.change( writer => {
                const range = /** Create range between # */
                writer.setSelection( range );
                writer.setSelectionAttribute( 'bold', true );

            } );
        } );
    } );
}

但是我不知道在#中选择内容的最佳方法。我尝试使用选择项，例如选择以下内容：

const positionStart = editor.model.createPositionBefore(element);
const positionEnd = editor.model.createPositionAfter(element);
editor.model.change(writer => {
  const range = writer.createRange(positionStart, positionEnd);
  writer.setSelection(range);
  writer.setSelectionAttribute('bold', true);
});

但是它什么都看不见，就像setSelection不起作用一样。我要更改粗体字的唯一方法是这样的：

const positionStart = editor.model.createPositionBefore( element );
const positionEnd = editor.model.createPositionAfter( element );
editor.model.change( writer => {
  const range = writer.createRange( positionStart, positionEnd );
  writer.setAttribute( 'bold', true, range );
} );

但是我不知道如何在内容内部创建范围。在这种情况下，content是：

<TextNode>Lorem #ipsum# dolor #sit# amet</TextNode>

因此，我需要在其“内部”创建2个范围：

<TextNode>Lorem #[ipsum]# dolor #[sit]# amet</TextNode>

然后使用writer.setAttribute(...

也许我应该使用SplitOperation？也许我没有正确使用选择/范围。

如何遍历CKEditor5文本并更改其中某些部分的属性？

0 个答案: