React项目中EditorJS段落换行时onChange事件无法触发

问题分析 #

在EditorJS 2.28.2版本中，Paragraph工具默认通过回车键换行时会创建新的Paragraph块，但这个动作不会触发全局onChange事件——因为EditorJS的onChange默认仅在块内容修改时触发，而换行创建新块属于块结构变更，原生Paragraph工具未针对该动作触发变更通知。

修复方案 #

方法1：自定义Paragraph工具监听换行事件 #

重写Paragraph工具的渲染逻辑，监听回车键并手动触发Editor的变更事件：

// 自定义Paragraph工具，继承原生工具
class CustomParagraph extends ParagraphTool {
  render() {
    const element = super.render();
    const editableElement = element.querySelector('[contenteditable]');

    editableElement.addEventListener('keydown', (e) => {
      // 监听非Shift+Enter的普通换行
      if (e.key === 'Enter' && !e.shiftKey) {
        // 延迟执行，确保新块已完成创建
        setTimeout(() => {
          this.api.dispatch('block-change');
        }, 100);
      }
    });

    return element;
  }
}

在Editor配置中替换原Paragraph工具：

tools: {
  // ...其他工具配置
  paragraph: {
    class: CustomParagraph,
    inlineToolbar: true,
    tunes: ["textAlignment"],
  },
  // ...其他工具配置
}

方法2：监听Editor的blockAdded事件 #

在Editor初始化完成后，添加块新增事件监听，触发保存逻辑：

// 抽离重复的保存逻辑为独立函数
const saveEditorContent = async (editor, noteId) => {
  const content = await editor.saver.save();
  try {
    await fetch(`http://localhost:8080/notes/${noteId}`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        editorContent: content,
      }),
    });
  } catch (error) {
    console.error("保存失败:", error);
  }
};

// 初始化Editor时配置
const editor = new EditorJS({
  holder: "editorjs",
  onReady: () => {
    ejInstance.current = editor;
    // 监听新块添加事件
    editor.on('blockAdded', async () => {
      await saveEditorContent(editor, id);
    });
  },
  autofocus: true,
  data: data,
  onChange: async () => {
    await saveEditorContent(editor, id);
  },
  // ...其他工具配置
});

核心原因 #

EditorJS的全局onChange事件依赖于各工具内部触发的变更通知，原生Paragraph工具仅在编辑现有文本内容时触发该通知，而通过回车键创建新块的动作属于Editor核心层的块管理逻辑，工具本身未绑定对应的变更触发逻辑，导致全局onChange无响应。

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