如何在React组件中集成CKEditor的editor.on事件监听代码？

直接把你的editor.on事件监听代码放到组件的onReady回调里就行，这是编辑器初始化完成后唯一能安全拿到可用editor实例的地方。

修改后的完整代码如下：

<CKEditor
      editor={CustomEditor}
      data={defaultValue || ""}
      config={{placeholder, ...DEFAULT_CONFIG.current, ...config}}
      ref={ckeditor}
      disableWatchdog={false}
      onReady={(editor) => {
        ckeditor.current = editor;
        // 在这里添加事件监听
        editor.on( 'key', function( event ) {
          if ( event.data.keyCode == 13 ) {
            event.cancel();
          }
        });
      }}

      onChange={(_e, editor: Editor) => {
        const val = editor.data.get();
        onChange(val);
      }}
   />

说明 #

• onReady是CKEditor的就绪钩子，只有当编辑器完全初始化完毕，才会触发这个回调并传入有效的editor实例，此时绑定事件不会出现实例未定义的问题。
• 这段代码的作用是阻止回车键的默认行为，如果你的编辑器有依赖回车键的功能（比如自动换行、列表缩进），需要注意冲突。

内容的提问来源于stack exchange，提问作者Gaini Alfred Richards