如何在CKEditor5中捕获Enter键事件并获取编辑器内容？

问题分析 #

你原有的代码未触发onNoteKeyDownCapture，核心原因是：

• CKEditor内部编辑区域的事件可能被组件自身的事件处理拦截，导致React合成事件（如onKeyDownCapture）无法正确捕获；
• 未添加Enter键的判断逻辑，即使事件触发也会对所有按键响应，但当前场景只需要Enter键触发。

解决方案 #

方案1：使用React合成事件（快速适配） #

直接在onKeyDownCapture（或onKeyDown）中添加Enter键判断，确保仅在按下Enter时执行保存逻辑：

onKeyDownCapture={(event, editor) => {
  // 精准匹配Enter键
  if (event.key === 'Enter') {
    // 可选：若需阻止Enter默认的换行行为，取消下方注释
    // event.preventDefault();
    const data: any = editor.getData();
    void onNoteKeyDownCapture("Editing", data);
  }
}}

方案2：绑定CKEditor内部事件（更可靠） #

通过CKEditor实例直接监听编辑器内部的keydown事件，避免React合成事件的拦截问题，这是官方推荐的事件处理方式：

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import { useState, useEffect } from 'react';

// 组件内部逻辑
const [editorInstance, setEditorInstance] = useState<ClassicEditor | null>(null);

useEffect(() => {
  if (!editorInstance) return;

  const handleKeyDown = (event: KeyboardEvent) => {
    if (event.key === 'Enter') {
      const data = editorInstance.getData();
      void onNoteKeyDownCapture("Editing", data);
      // 可选：阻止默认换行
      // event.preventDefault();
    }
  };

  // 绑定编辑器内部的keydown事件
  editorInstance.editing.view.document.on('keydown', handleKeyDown);

  // 组件卸载时移除监听，避免内存泄漏
  return () => {
    editorInstance.editing.view.document.off('keydown', handleKeyDown);
  };
}, [editorInstance, onNoteKeyDownCapture]);

// 渲染CKEditor组件
<CKEditor
  editor={ClassicEditor}
  onReady={editor => setEditorInstance(editor)}
  // 其他配置项（如initialData等）
/>

关键注意点 #

• 若需保留Enter键的默认换行行为，不要调用event.preventDefault()；
• 方案2的优势在于直接对接CKEditor的事件系统，不会受React事件冒泡机制的影响，兼容性更强。

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