CKEditor恢复光标位置时如何避免滚动条跳顶并保留对应位置

现有实现的问题场景 #

为了实现光标位置保留，当前使用的代码逻辑如下：

var range = null;
editor.on( 'blur', function() {
    range = editor.getSelection().getRanges()[ 0 ];
});
someElement.on('click',function() {
    var editor = CKEDITOR.instances.editor1;
    if(editor){
        editor.focus();
        range.select();  
    }
});

当前代码可以正常将光标恢复到失焦前的位置，但执行聚焦和选区恢复操作后，编辑区滚动条会自动回到顶部，无法保留之前的滚动位置。

问题原因 #

CKEditor默认的聚焦、选中文本操作，在编辑器处于失焦状态时，会自动将编辑区滚动位置重置为内容顶部，覆盖原滚动位置，这就是滚动条跳顶的核心原因。

修复实现 #

var range = null;
var savedScrollTop = 0;
editor.on( 'blur', function() {
    range = editor.getSelection().getRanges()[ 0 ];
    // 失焦时同步保存当前编辑区的滚动位置
    const editWindow = editor.window.$;
    savedScrollTop = editWindow.document.documentElement.scrollTop || editWindow.document.body.scrollTop;
});
someElement.on('click',function() {
    const editor = CKEDITOR.instances.editor1;
    if(editor){
        editor.focus();
        // 第二个参数传true，禁止选中操作自动滚动到选区位置
        editor.getSelection().selectRanges([range], true);
        // 下一帧执行滚动恢复，避免被编辑器的默认顶部滚动行为覆盖
        requestAnimationFrame(() => {
            const editWindow = editor.window.$;
            editWindow.document.documentElement.scrollTop = savedScrollTop;
            editWindow.document.body.scrollTop = savedScrollTop;
        });
    }
});

适配说明 #

• 低版本CKEditor如果不支持selectRanges的第二个参数，去掉该参数也可正常生效，滚动位置的恢复逻辑会覆盖默认的跳顶行为。
• 滚动赋值操作必须放在requestAnimationFrame回调中执行，同步赋值会被编辑器内部的默认滚动逻辑覆盖，导致设置失效。

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