BlockNote 是一个开源的 React 富文本编辑器,基于 ProseMirror 和 Tiptap 构建,走的是 Notion 风格的 Block 编辑体验,拖拽、嵌套、斜杠菜单、格式工具栏这些开箱即用。

对于需要在自己的应用里嵌入编辑器的开发者来说,它最大的吸引力在两个地方。

核心特点

1. 上手门槛低

几行代码就能跑起来一个带完整 UI 的编辑器,不用像直接用 ProseMirror 或 Tiptap 那样先啃一堆底层概念。Block 类型、键盘快捷键、自定义样式都可以配置,但不配也能直接用。

2. 原生支持 AI 集成

通过 @blocknote/xl-ai 这个扩展包,可以在编辑器里直接接入 AI 能力:

  • 用户选中文字点 AI 按钮,或者在斜杠菜单里输入 /ai,就能让 AI 帮忙写、改、续写内容
  • 后端支持接 OpenAI、Anthropic 或者自己的模型端点
  • 也能接 RAG 管道给 AI 补充知识库
  • AI 的操作过程对用户完全透明,改了哪里、加了什么,用户可以逐条接受或拒绝

这意味着如果你在做一个内容管理系统、知识库、或者任何需要「编辑器 + AI 辅助写作」的产品,BlockNote 省掉了同时造两个轮子的功夫。

实时协作也内置支持(需要借助第三方服务),基于 Yjs 实现多人同时编辑。另外还有导出 PDF、Word、ODT 的扩展包,适合需要生成正式文档的场景。

许可证注意事项

  • 核心编辑器功能:MPL-2.0,商业项目可自由使用
  • AI 集成(@blocknote/xl-ai)、多列布局、文档导出等 xl- 开头的高级包GPL-3.0,闭源商业项目需要购买商业许可

Tiptap vs BlockNote 怎么选?

TiptapBlockNote
定制深度深,学习曲线陡封装层级高,快速出活
上手难度需要理解 ProseMirror Schema 和插件体系不配置也能直接用
AI 集成需自己实现原生 xl-ai 包
适用场景需要深度定制编辑器行为想快速出活、不想在编辑器底层花太多时间

项目信息