BlockNote的核心功能有哪些？

如果你正在寻找一个既能提供 Notion 般的优雅编辑体验，又能让你像搭积木一样自由控制内容的 React 富文本编辑器，BlockNote 就是那个“开箱即用”又“深度可控”的答案。它的核心功能围绕“块（Block）”这一原子单位展开，将传统编辑器从混乱的 HTML 结构解放出来，让开发者可以像操作数据一样操作文档。

BlockNote 到底是什么？

BlockNote 是一个基于“块”的 React 富文本编辑器框架，同时也是一款面向开发者的 AI 工具。它的设计哲学是：编辑器不应该是一团难以解析的 HTML 字符串，而应该是一个结构化的 JSON 块数组。这意味着你可以轻松地对文档进行程序化操作、版本控制，甚至无缝接入 AI 能力。

它由 TypeScript 社区主导开发（核心贡献者包括 Yousef、Matthew 等），目前是完全开源且免费的（MIT 协议），没有企业版或收费墙。你可以在 BlockNote 官网 体验在线 Demo，也可以在 GitHub 仓库 查看源码。

核心功能深度拆解

下面我从“块操作”、“AI 增强”、“开发者接口”三个维度，把它的核心功能掰开揉碎讲清楚。

1. 块（Block）体系：从“排版”到“数据”的革命

BlockNote 的基石是 Block 对象。每个段落、标题、列表、代码块都是一个独立的 Block，拥有自己的 id、type、content 和 props。这带来了几个杀手级功能：

• 块级拖拽与重排：用户可以像在 Notion 里一样，长按块左侧的“拖拽手柄”随意移动块的位置，甚至跨层级移动。这在传统编辑器中需要复杂的 DOM 操作才能实现。
• 块类型一键切换：输入“/”可以唤起斜杠菜单，快速将当前块切换为标题、引用、待办列表、代码块、有序/无序列表等。切换时内容自动保留，无需手动复制粘贴。
• 嵌套与分组：块可以无限嵌套。例如，你可以在一个“待办列表”块里嵌套一个“代码块”，或者在一个“引用”块里嵌套一个“标题”。这种能力让大纲笔记、复杂文档结构变得极其自然。
• 纯 JSON 输出：编辑器最终产出的不是混乱的 HTML，而是一个干净的 BlockNote JSON 树。你可以直接将其存入数据库、传给后端、进行 diff 对比，或者用 AI 模型直接解析。

2. AI 原生功能：不仅仅是“写”，更是“改”和“想”

作为一款 AI 开发工具，BlockNote 并没有在 UI 层面强行绑定某个大模型，而是提供了 AI 扩展接口，让开发者可以自由接入 OpenAI、Claude 或本地模型。预置的 AI 功能包括：

• 智能补全与续写：用户输入后，AI 可以生成符合上下文的后续内容。与传统“写完再改”不同，它是在编辑过程中实时建议。
• 块级 AI 操作：你可以选中一个或多个块，然后执行“扩写”、“总结”、“改写语气”、“翻译”等操作。AI 会直接替换或生成新的块内容，而不是在弹窗里展示。
• 自定义 AI 指令：开发者可以通过简单的配置，添加自己的 AI 指令（例如“生成一份待办事项”、“将这段文字转为诗歌”），这些指令会直接出现在斜杠菜单中。
• 上下文感知：AI 能够理解当前光标所在的块类型和层级。例如，在一个“代码块”里调用 AI 补全，它会更倾向于生成代码而非散文。

3. 开发者核心接口：比 ProseMirror 更友好，比 Slate 更稳定

BlockNote 底层基于 ProseMirror，但封装了一层极其简洁的 React 接口。对于开发者来说，最实用的功能包括：

• React Hooks 式操作：你可以通过 useBlockNote() 这个 Hook 获取 editor 实例，然后用 editor.insertBlocks()、editor.removeBlocks()、editor.updateBlock() 等 API 直接操作文档树。这比传统编辑器“获取选区 -> 修改 DOM 节点”的方式高效一个数量级。
• 自定义块类型：你可以注册自己的 React 组件作为块类型。例如，创建一个“表格块”、“图表块”或“视频块”。BlockNote 会自动处理这些自定义块的拖拽、嵌套、序列化。
• 双向绑定与受控模式：你可以将编辑器的内容（JSON）绑定到 React 状态中，实现“数据驱动 UI”。这在协同编辑、自动保存、预览切换等场景下非常实用。
• 插件系统：支持通过插件扩展菜单、工具栏、快捷键。例如，你可以写一个插件，在用户输入“@”时弹出用户选择器。

与同类工具的关键对比

为了让你更直观地理解 BlockNote 的定位，我把它和几个主流方案做了对比：

收费与生态

BlockNote 目前完全免费且开源，没有付费版本或功能限制。它不属于任何商业公司，而是由 TypeCell 团队（一个专注于协作和类型安全工具的社区）维护。你可以直接通过 npm 安装：npm install @blocknote/core @blocknote/react。

官方提供了丰富的 文档 和 示例，包括如何集成 AI、如何添加自定义块、如何实现协同编辑（基于 Yjs）。

相关问题

• BlockNote 和 Notion 的编辑器有何异同？ 两者都基于块模型，但 Notion 是闭源 SaaS，BlockNote 是开源框架。BlockNote 更灵活，你可以完全控制 UI 和数据结构，但需要自己搭建后端和托管服务。
• BlockNote 适合做在线文档编辑器（如 Google Docs 替代品）吗？ 非常适合。它的块级操作、JSON 输出和 AI 集成能力，让构建一个类 Notion 或类 Coda 的文档工具变得简单。但如果你需要严格的页面排版（如印刷级 PDF 输出），它可能不如 Slate 灵活。
• BlockNote 的 AI 功能是否依赖特定模型？ 不依赖。它只提供接口，你可以自由接入 OpenAI、Anthropic、Gemini 或本地运行的 Llama 模型。官方示例默认使用 OpenAI，但你可以通过自定义 AI 回调函数替换。
• BlockNote 的性能如何？适合长文档吗？ 性能优秀。由于它只渲染视口内的块（虚拟列表），即使文档包含数千个块，滚动和编辑依然流畅。但如果你需要处理百万字级的长文档，建议配合分页或懒加载策略。
• BlockNote 能导出为 Markdown 或 Word 吗？ 可以。官方提供了 @blocknote/xl-docx-exporter 和 @blocknote/xl-md-exporter 等扩展包，可以一键将块 JSON 转换为 Markdown、HTML 或 Word 文档。