CKEditor5 光标在粘贴的图片下一行

CKEdtor5 在粘贴图片后，默认会选中图片，若用户想继续输入时，还得再手动按下方向键中的右键，将光标移动到下一行。

但在 IM 的聊天中，其实我们更希望是在粘贴后，光标能自动在图片的下一行。让用户继续进行输入。

那么如何修改编辑器的默认行为呢？

其实是不难，我们这里扩展一个 CKEditor5 的插件，在图片粘贴后，将光标移动到图片的下一行。

import Plugin from "@ckeditor/ckeditor5-core/src/plugin";

class ObjectURLUploadAdapterPlugin extends Plugin {
  init() {
    this.editor.plugins.get("ImageUploadEditing").on("uploadComplete", (_, { imageElement }) => {
      this.editor.model.change((writer) => {
        // 创建新段落
        const softBreak = writer.createElement("softBreak");

        // 将段落插入到图片之后
        writer.insert(softBreak, imageElement, "after");

        // 将光标定位到新段落
        writer.setSelection(softBreak, 0);
      });
    });
  }
}

export default ObjectURLUploadAdapterPlugin;

获取图片上传插件后，然后监听图片加载成功后，在该位置的下面插入一个换行符 softBreak 。

然后再把这个插件插入到 CKEditor 中。

import { CKEditor } from "@ckeditor/ckeditor5-react";
import { ClassicEditor } from "@ckeditor/ckeditor5-editor-classic";

const App = () => {
  return <CKEditor editor={ClassicEditor} extraPlugins={[ObjectURLUploadAdapterPlugin]} />;
};

大功告成！！！