TipTap & ProseMirror 富文本编辑

返回 相关私有笔记 · 相关私有笔记

目标读者：有浏览器与前端工程经验，但第一次系统学习富文本编辑器。这里不要求你先背 API；先建立“内容、状态、浏览器 DOM、扩展点”各自的边界，再进入 ProseMirror 和 TipTap 的细节。

先从这里开始

1. ProseMirror 入门 - 从 contentEditable 到一次编辑闭环 —— 5–10 分钟，建立 DOM 与文档模型、Schema、Node、Mark、State、Transaction、View 的职责边界。
2. 富文本编辑器选型对比 —— 如果你还没确定栈，先看“数据模型 / Schema / 协同 / 框架耦合 / 场景决策”；已确定用 TipTap / ProseMirror 可直接跳过。

产品构建路线：先跑起来，再理解每一层

这条路线适合“我要做一个编辑器，但不想先读一整本内核手册”。每篇都回到同一条输入闭环：内容格式 → 文档值 → 状态变化 → DOM 同步 → 扩展。

1. TipTap 实战与自定义扩展 —— 先读“起步”和“内容初始化”：用 StarterKit 跑起编辑器，理解 JSON / HTML / 纯文本的存储边界。
2. ProseMirror Schema —— 定义哪些内容能保存、怎样嵌套；这是自定义编辑器的内容契约。
3. ProseMirror 核心模型 —— 理解 Node、Mark、不可变文档和位置为何不是 DOM offset。
4. EditorState 与 Transaction —— 理解输入如何产生新的 state。
5. EditorView 与 NodeView —— 理解 state 怎样与 contentEditable、选区和 IME 共存。
6. Plugin 系统与 Decoration —— 决定功能属于持久内容、临时 UI，还是行为扩展。
7. 回到 TipTap 实战与自定义扩展 的自定义扩展、命令和 NodeView 部分。

内核深入路线：从文档语言到扩展机制

这条路线适合需要直接写 ProseMirror plugin、结构命令或自定义编辑行为的读者。不要跳过先导页。

1. 先导：一次编辑闭环
2. Schema：文档语言与合法性
3. 核心模型：文档值、位置与切片
4. State 与 Transaction：文档如何变化
5. View 与 NodeView：浏览器如何编辑它
6. Plugin 与 Decoration：怎样扩展行为与表现
7. TipTap 架构 —— 现在再看 Extension 如何把这些原语收敛成声明式接口。

按问题进入专题

概念边界速查

• 要保存、复制、导出、协同的内容：用 Schema 中的 Node / Mark / attrs 表达。
• 由文档派生、但不应写进内容的运行时数据：通常放 Plugin state。
• 仅当前用户可见的高亮、光标、占位或批注外观：优先考虑 Decoration。
• 某一类文档节点需要复杂的编辑期 DOM：才使用 NodeView。
• 工具栏开关、弹窗、接口请求等应用业务状态：留在应用层，不伪装成编辑器文档状态。

---

ℹ️ 本专题子笔记均由 AI 辅助调研官方文档(prosemirror.net / tiptap.dev / yjs 等)成稿，frontmatter 标记为 status: draft，关键 API 已对照来源校验并在各篇“## 参考”列出来源。复核认可后可将 status 改为 evergreen。