CKEditor技术咨询：获取光标前20字符及代码插入后光标位置异常

嗨，我来帮你搞定这两个CKEditor的问题，都是实际开发中经常碰到的场景，给你整理了具体的实现方案：

一、获取当前光标位置前的20个字符 #

要实现这个需求，咱们得用到CKEditor的模型选区API，这里以主流的CKEditor 5为例（如果是CKEditor 4，思路类似但API略有不同）：

首先要确保当前是光标状态（不是选中一段文本），然后从光标位置向前截取最多20个字符：

// 假设你的编辑器实例变量是editor
const selection = editor.model.document.selection;
if (selection.isCollapsed) { // 判断是否是光标（折叠选区）状态
    const cursorPosition = selection.getFirstPosition();
    // 计算向前偏移的步数：最多20步，或者光标前所有字符数（如果不足20）
    const offsetSteps = Math.min(20, cursorPosition.offset);
    const startPosition = cursorPosition.getShiftedBy(-offsetSteps);
    // 创建从起始位置到光标位置的范围
    const textRange = editor.model.createRange(startPosition, cursorPosition);
    // 提取范围内的文本内容
    const textBeforeCursor = Array.from(textRange.getItems())
        .map(item => item.data)
        .join('');
    console.log('光标前20个字符：', textBeforeCursor);
}

这段代码会自动处理光标前字符不足20的情况，直接返回光标前所有内容，不会出现异常。

二、代码添加文字后光标停留在原位置的解决方法 #

这个问题的核心是：你插入文本后没有主动更新光标位置，CKEditor不会自动帮你移动光标。咱们可以在插入文本的操作里，手动把光标定位到插入内容的末尾：

editor.model.change(writer => {
    const selection = editor.model.document.selection;
    const insertPos = selection.getFirstPosition();
    // 创建要插入的文本节点
    const newText = writer.createText('需要添加的文字内容');
    // 插入文本到光标原来的位置
    writer.insert(newText, insertPos);
    // 将光标移动到插入文本的末尾
    writer.setSelection(newText, 'after');
});

注意：CKEditor 5的所有模型修改操作都要放在editor.model.change()的回调里，用writer对象来执行操作，这样才能保证编辑器状态的一致性。如果是插入其他元素（比如段落、链接），也可以用类似的方式，找到元素的末尾位置来设置选区。

如果你的项目用的是CKEditor 4，API会有一些差异，比如用editor.getSelection()和range对象来处理，不过核心思路是一样的：先获取光标位置，截取文本，插入后手动移动光标。

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