字数 1460，阅读大约需 8 分钟

别再自己造编辑器了：这个开源项目，几行代码就能做出 Notion + AI 体验

最近看到一个很值得推荐的开源项目：BlockNote。

如果你做过内容管理、知识库、AI 写作、项目文档这类产品，大概率都踩过一个坑：富文本编辑器看起来只是个输入框，真做起来却像个无底洞。

一开始只是想让用户“能写东西”，结果很快需求就来了：

• • 要支持拖拽、嵌套、斜杠菜单、格式工具栏
• • 要支持图片、表格、代码块
• • 还想加 AI 改写、总结、续写
• • 后面甚至还要多人协作、导出 PDF / Word

做到最后你会发现，编辑器本身都快被做成一个独立产品了。

而 BlockNote 最让我眼前一亮的地方就在于：它不是一个“能输入文字”的基础组件，而是一个非常接近产品级体验的编辑器底座。

它基于ProseMirror和Tiptap构建，主打Notion 风格的块编辑体验：支持拖拽、块嵌套、斜杠菜单、格式工具栏，React 项目里几行代码就能直接跑起来。

对多数团队来说，这意味着一件很现实的事：

你不需要花几个月自己造轮子，就能把一个像样的编辑体验放进产品。

这也是我为什么会推荐它。

为什么值得关注？

一、它做的不是传统富文本，而是“块编辑”

BlockNote 的核心思路更接近 Notion。用户编辑的不是一整坨文本，而是一块一块可操作的内容。

这件事的意义不只是“界面更高级”，更重要的是它天然适合后续扩展：

• • 一段话可以单独改写
• • 一个列表可以单独重组
• • 一段引用可以单独提炼
• • 一个模块可以直接拖拽重排

如果你的产品未来要接 AI，这种块结构会比传统 textarea 或普通富文本更有价值。

二、它对 React 团队非常友好

很多编辑器方案都很强，但真正上手时门槛并不低。你要理解底层 schema、插件体系、事件机制，最后还得自己拼 UI。

而 BlockNote 提供的是比较完整的 React 集成能力。

说白了，它更像是：

先给你一个能直接用的成品，再允许你慢慢定制。

这很符合真实开发场景。

因为大多数团队并不是想研究“如何做编辑器”，而是想尽快把业务做出来。编辑器只是基础设施，不该吞掉太多研发时间。

三、它把 AI 当成正式能力，而不是外挂

现在很多产品都号称“AI 编辑器”，但真正难的从来不是接一个模型 API，而是：

• • AI 怎么进入编辑流程？
• • 用户怎么知道它改了什么？
• • 改动怎么接受、拒绝、回滚？
• • 能不能接自己的模型和知识库？

BlockNote 官方提供了 AI 扩展思路，支持通过按钮或命令触发 AI，用户还能对结果逐条接受或拒绝。

我觉得这点很重要，因为：

AI 编辑器最关键的不是“会生成”，而是“可控”。

这也是很多 Demo 和真正产品之间最大的差别。

四、协作和导出能力很实用

很多产品前期只想着“先能写”，但上线后用户很快就会问：

• • 能不能多人一起编辑？
• • 能不能导出 PDF？
• • 能不能导出 Word 发客户或领导？

这类需求一旦自己做，往往很耗时。

而 BlockNote 已经把实时协作、格式处理和部分导出能力考虑进去了。对于知识库、内容平台、内部文档系统来说，这能省掉大量重复建设成本。

我真正想说的是：别在这件事上重复发明轮子

今天很多开发者看到编辑器，还是会下意识觉得：

“要不自己做一个轻量版？”

但编辑器这种东西，最贵的从来不是第一版跑起来，而是后面那些细节：

光标行为、复制粘贴、拖拽体验、历史记录、嵌套结构、多人冲突、导出稳定性、AI 改动可视化……

这些每一个单独看都不大，可一旦叠加起来，就会把项目拖进无休止的打磨里。

所以我现在越来越认同一个判断：

凡是用户已经被 Notion 教育过的体验，就尽量别从零自己造。

把成熟底座接进来，把精力放在更贴近业务的创新上，往往更划算。

还有一点必须提醒：注意许可证

BlockNote 很适合评估和落地，但如果你是闭源商业项目，一定要提前看清许可证。

它的核心编辑器能力相对友好，但 AI、PDF / Word 导出等部分扩展能力涉及额外授权规则。这个问题很多人推荐项目时不会提，但真正落地时很关键。

最后

如果你正在做 React 内容产品，又不想把大量时间耗在编辑器上，BlockNote 是一个非常值得认真研究的方案。

它最有价值的，不只是“做出了一个 Notion 风格编辑器”，而是帮很多团队跳过了最耗时、最重复、最不值得反复投入的那一段基础建设。

AI 时代，真正值得卷的，已经不是“会不会做一个编辑器”，而是：

有了这些成熟底座之后，你能在上面做出什么更有价值的产品。

参考链接

• • BlockNote GitHub：https://github.com/TypeCellOS/BlockNote
• • BlockNote 官网：https://www.blocknotejs.org/