CKEditor调用setData后调用editor.focus()无法恢复焦点求助

我之前也踩过类似的坑，尤其是在Firefox浏览器里，这种焦点设置无效的情况特别让人头疼，咱们来一步步拆解问题和解决办法：

问题根源 #

当你在key事件中调用setData()时，CKEditor会完全重建编辑区域的DOM结构——原来的焦点元素会被直接销毁。虽然你在setData的回调里调用了editor.focus()，但这个回调执行时，浏览器的键盘事件处理流程还没走完，你的焦点设置会被浏览器的默认行为覆盖，这就是为什么在Firefox里失效的核心原因。

可行的解决方法 #

方法1：用setTimeout延迟执行focus #

通过把focus()放到setTimeout里，让浏览器先完成当前的事件循环，再执行焦点设置，就能避开默认行为的覆盖：

editor.on('key', function(e) {
    editor.setData('test', function() {
        setTimeout(() => {
            editor.focus();
        }, 0);
    });
});

方法2：避免全量替换内容（推荐） #

如果你的需求不是完全替换编辑器的所有内容，只是修改部分内容，建议直接操作选区和节点，这样不会触发整个DOM的重建，自然也不会丢失焦点：

editor.on('key', function(e) {
    // 获取当前编辑器的选区
    const selection = editor.getSelection();
    const range = selection.getRanges()[0];
    
    // 删除选中的内容（如果有的话）
    range.deleteContents();
    
    // 创建并插入新的文本节点
    const textNode = editor.document.createText('test');
    range.insertNode(textNode);
    
    // 把选区定位到新内容的末尾，保持输入连贯性
    range.setStartAfter(textNode);
    range.setEndAfter(textNode);
    selection.selectRanges([range]);
});

方法3：更换触发事件的时机 #

把key事件换成input事件，input事件是在内容变化完成后触发的，时机更合理，配合setTimeout使用效果更稳定：

editor.on('input', function(e) {
    editor.setData('test', function() {
        setTimeout(() => {
            editor.focus();
        }, 0);
    });
});

额外提示 #

频繁调用setData()会严重影响编辑器的性能和用户体验，因为每次都会重新渲染整个编辑区域。如果是做实时内容处理，尽量只修改需要变更的部分，而不是全量替换。

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