开源项目推荐:BlockNote
BlockNote 是一个开源的 React 富文本编辑器,基于 ProseMirror 和 Tiptap 构建,走的是 Notion 风格的 Block 编辑体验,拖拽、嵌套、斜杠菜单、格式工具栏这些开箱即用。
对于需要在自己的应用里嵌入编辑器的开发者来说,它最大的吸引力在两个地方。
第一是上手门槛低。几行代码就能跑起来一个带完整 UI 的编辑器,不用像直接用 ProseMirror 或 Tiptap 那样先啃一堆底层概念。Block 类型、键盘快捷键、自定义样式都可以配置,但不配也能直接用。
第二是原生支持 AI 集成。通过 @blocknote/xl-ai 这个扩展包,可以在编辑器里直接接入 AI 能力,用户选中文字点 AI 按钮、或者在斜杠菜单里输入 /ai,就能让 AI 帮忙写、改、续写内容。后端支持接 OpenAI、Anthropic 或者自己的模型端点,也能接 RAG 管道给 AI 补充知识库。AI 的操作过程对用户完全透明,改了哪里、加了什么,用户可以逐条接受或拒绝。
这意味着如果你在做一个内容管理系统、知识库、或者任何需要"编辑器 + AI 辅助写作"的产品,BlockNote 省掉了你同时造两个轮子的功夫。
实时协作也内置支持(需要借助第三方服务),基于 Yjs 实现多人同时编辑。另外还有导出 PDF、Word、ODT 的扩展包,适合需要生成正式文档的场景。
许可方面需要注意:核心编辑器功能用的是 MPL-2.0 协议,商业项目可以自由使用。但 AI 集成、多列布局、文档导出这些 xl- 开头的高级包用的是 GPL-3.0,闭源商业项目需要购买商业许可。
如果你现在的选型在 Tiptap 和 BlockNote 之间纠结:Tiptap 更适合需要深度定制编辑器行为的场景,但学习曲线陡,需要理解 ProseMirror 的 Schema 和插件体系。BlockNote 封装层级更高,适合想快速出活、不想在编辑器底层花太多时间的团队。
项目地址:https://t.co/gp9R6ntfmU,文档在 https://t.co/1JWP0odZvO。
点击图片查看原图