如何在CKEditor5中将光标聚焦到插入文本的末尾？

嘿，我来帮你搞定这个光标定位的问题！你之前的代码里，直接调用setData后马上focus，会出现光标跑到开头的情况——这是因为setData是异步操作，编辑器还没完全处理好新内容就被聚焦了，而且默认聚焦行为会把光标放在内容起始位置。

下面是修改后的完整代码，我会标注关键改动的部分：

<div id="editor"> <p>Editor content goes here.</p> </div> <br> <button id="focusSet">Focus</button>
<script>
// Editor configuration.
ClassicEditor
  .create( document.querySelector( '#editor' ))
  .then( editor => {
    window.editor = editor;
  })
  .catch( error => {
    console.error( error );
  });

document.getElementById('focusSet').onclick = function(e) {
  // 关键：利用setData返回的Promise，确保内容更新完成后再操作光标
  window.editor.setData('text')
    .then(() => {
      const model = window.editor.model;
      // CKEditor的模型操作必须在change会话中执行
      model.change(writer => {
        // 创建一个指向文档根节点末尾的位置
        const endPosition = model.createPositionAt(model.document.getRoot(), 'end');
        // 将选区设置到这个末尾位置
        writer.setSelection(endPosition);
      });
      // 最后聚焦编辑器视图
      window.editor.editing.view.focus();
    });
};
</script>

关键改动说明： #

• 用setData返回的Promise来等待内容完全更新，避免操作时机过早
• 通过CKEditor的Model API来精准控制光标位置：
  1. 先获取编辑器的模型实例
  2. 在model.change()会话中创建末尾位置
  3. 用writer.setSelection()把光标定位到该位置
• 最后再调用focus()确保编辑器获得焦点

这样修改后，点击按钮插入文本后，光标就会自动定位到插入内容的末尾啦！

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