Angular+TypeScript环境下CKEditor5按键输入捕获问题

我完全懂你的困扰——CKEditor5的事件机制和CKEditor4确实有不小的差异，之前熟悉的key事件用法在新版本里没法直接套用了。下面给你两种适配CKEditor5的解决方案，分别对应不同的需求场景：

1. 监听编辑器内容变化（推荐用于获取完整输入内容） #

如果你需要捕获每次内容修改后的完整编辑器数据（比如输入文字、删除内容、粘贴内容等操作），CKEditor5的模型层提供了change:data事件，这是最常用的方式：

// 假设你已经在Angular组件中成功初始化了ClassicEditor实例
import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic';

// 组件类中
private editorInstance: ClassicEditor | undefined;

// 初始化编辑器的回调里（比如afterViewInit或者自定义的初始化方法）
initEditor(): void {
  ClassicEditor.create(document.getElementById('editor')!)
    .then(editor => {
      this.editorInstance = editor;
      
      // 监听内容变化事件
      editor.model.document.on('change:data', () => {
        // 获取当前编辑器的HTML内容
        const currentContent = editor.getData();
        // 这里可以把内容同步到你的Angular组件变量，比如双向绑定的表单字段
        // this.formControl.setValue(currentContent);
        console.log('编辑器内容已更新:', currentContent);
      });
    })
    .catch(error => {
      console.error('编辑器初始化失败:', error);
    });
}

2. 细粒度监听按键操作（模拟CKEditor4的key事件） #

如果需要像CKEditor4那样监听单个按键的按下/抬起动作，你需要直接给编辑器的可编辑DOM元素绑定原生键盘事件：

// 同样在编辑器初始化成功的回调里
ClassicEditor.create(document.getElementById('editor')!)
  .then(editor => {
    this.editorInstance = editor;
    // 获取编辑器的可编辑区域DOM元素
    const editableElement = editor.ui.getEditableElement();
    
    if (editableElement) {
      // 监听keydown事件
      editableElement.addEventListener('keydown', (event: KeyboardEvent) => {
        console.log('按下的按键:', event.key);
        // 这里可以添加自定义逻辑，比如阻止特定按键、触发快捷操作等
        // if (event.key === 'Enter') {
        //   event.preventDefault();
        //   // 执行你的自定义逻辑
        // }
      });

      // 也可以监听keyup事件
      editableElement.addEventListener('keyup', (event: KeyboardEvent) => {
        console.log('抬起的按键:', event.key);
      });
    }
  })
  .catch(error => {
    console.error('编辑器初始化失败:', error);
  });

注意事项（Angular组件内存泄漏防护） #

在Angular组件销毁时，一定要记得移除这些事件监听，避免内存泄漏：

import { OnDestroy } from '@angular/core';

export class YourEditorComponent implements OnDestroy {
  private editorInstance: ClassicEditor | undefined;
  private dataChangeListener: (() => void) | undefined;
  private keyDownListener: ((event: KeyboardEvent) => void) | undefined;

  // ... 初始化编辑器的代码 ...

  ngOnDestroy(): void {
    // 移除模型层的内容变化监听
    if (this.editorInstance && this.dataChangeListener) {
      this.editorInstance.model.document.off('change:data', this.dataChangeListener);
    }

    // 移除DOM层面的按键监听
    const editableElement = this.editorInstance?.ui.getEditableElement();
    if (editableElement && this.keyDownListener) {
      editableElement.removeEventListener('keydown', this.keyDownListener);
    }

    // 销毁编辑器实例
    this.editorInstance?.destroy();
  }
}

为什么CKEditor4的方法无效？ #

CKEditor5彻底重构了架构，采用了**模型-视图-控制器（MVC）**的分层设计，原来CKEditor4直接挂载在编辑器实例上的key事件，在新版本中被拆分到了模型层（内容变化）和视图层（DOM按键），所以不能再用旧的方式直接监听啦。

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