Chrome扩展中CKEditor5实例如何替换插入点前的缩写文本

你需要在插入新文本前，先定位到原缩写的范围并删除它。CKEditor5的模型操作需通过writer对象完成，具体修改如下：

修正后的代码 #

function injectScript(text, shortcut) {
    const ckEditorElement = document.querySelector('.ck-editor__editable');
    const ckEditorInstance = ckEditorElement?.ckeditorInstance;

    if (ckEditorInstance) {
        ckEditorInstance.model.change( writer => {
            const insertPosition = ckEditorInstance.model.document.selection.getFirstPosition();
            const selectionAttributes = ckEditorInstance.model.document.selection.getAttributes();
            
            // 计算原缩写的删除范围，避免越界
            const deleteStartOffset = insertPosition.offset - shortcut.length;
            if (deleteStartOffset >= 0) {
                const deleteStart = writer.createPositionAt(insertPosition.parent, deleteStartOffset);
                const deleteRange = writer.createRange(deleteStart, insertPosition);
                // 删除原缩写内容
                writer.delete(deleteRange);
            }

            // 插入替换后的文本
            ckEditorInstance.model.insertContent( writer.createText( text, selectionAttributes ), insertPosition );
        });
    }
}

核心逻辑说明 #

1. 定位删除范围：从当前光标位置（insertPosition）往前偏移shortcut.length个字符，确定原缩写的起始位置，再创建包含整个缩写的范围。
2. 安全删除：先判断偏移量非负，避免光标在内容开头时出现越界错误，再调用writer.delete()删除原缩写。
3. 插入新内容：删除完成后再插入替换文本，即可实现//brb替换为be right back的效果。

内容的提问来源于stack exchange，提问作者mrzalais