Angular 15中CKEditor 5动态添加内容后无法滚动到底部问题

问题描述 #

在Angular 15项目中使用CKEditor 5时，动态插入文本并将光标设置到内容末尾后，编辑器无法自动滚动到光标位置或底部。尝试过以下代码但未生效：

this.noteEditor.editorInstance.setData(editorData.replace(regExMatch, res.Result.Text.trim()));
this.noteEditor.editorInstance.model.change((writer:any) => {
  writer.setSelection(writer.createPositionAt( this.noteEditor.editorInstance.model.document.getRoot(), 'end' ));
  // this.noteEditor.editorInstance.editing.view.scrollToTheSelection({viewportOffset:300,alignToTop:false})
  // console.log(`consult-notes.component::this.noteEditor.editorInstance - `,this.noteEditor.editorInstance);
  // document.getElementById("ck-scroll").scrollIntoView();
});

需求仅为：动态添加内容后滚动到CKEditor视图底部。

解决方案 #

问题核心在于setData是异步操作，直接在其后执行光标设置和滚动时，编辑器DOM尚未完成更新，导致滚动逻辑失效。需等待setData执行完成后再处理光标与滚动：

修正后的代码 #

// 等待setData异步操作完成后再处理光标和滚动
this.noteEditor.editorInstance.setData(editorData.replace(regExMatch, res.Result.Text.trim()))
  .then(() => {
    // 设置光标到内容末尾
    this.noteEditor.editorInstance.model.change((writer: any) => {
      const root = this.noteEditor.editorInstance.model.document.getRoot();
      writer.setSelection(writer.createPositionAt(root, 'end'));
    });
    // 调用CKEditor内置方法滚动到选中位置（即内容末尾）
    this.noteEditor.editorInstance.editing.view.scrollToTheSelection({
      alignToTop: false, // 强制滚动到底部而非顶部
      viewportOffset: 20 // 可选：设置与视口底部的偏移量
    });
  });

备选方案（直接操作DOM） #

如果上述方法仍不生效，可直接操作编辑器的滚动容器DOM：

this.noteEditor.editorInstance.setData(editorData.replace(regExMatch, res.Result.Text.trim()))
  .then(() => {
    // 设置光标到末尾（同上）
    this.noteEditor.editorInstance.model.change((writer: any) => {
      const root = this.noteEditor.editorInstance.model.document.getRoot();
      writer.setSelection(writer.createPositionAt(root, 'end'));
    });
    // 获取编辑器滚动容器并滚动到底部
    const scrollContainer = this.noteEditor.editorInstance.ui.view.editableElement.parentElement;
    if (scrollContainer) {
      scrollContainer.scrollTop = scrollContainer.scrollHeight;
    }
  });

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