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 怎么选?
| Tiptap | BlockNote | |
|---|---|---|
| 定制深度 | 深,学习曲线陡 | 封装层级高,快速出活 |
| 上手难度 | 需要理解 ProseMirror Schema 和插件体系 | 不配置也能直接用 |
| AI 集成 | 需自己实现 | 原生 xl-ai 包 |
| 适用场景 | 需要深度定制编辑器行为 | 想快速出活、不想在编辑器底层花太多时间 |
Editor + AI 集成的轮子不用自己造了。但注意 xl- 包是 GPL-3.0,闭源商业项目需要买商业许可。