总览与选型：自研 vs ProseMirror/Slate/Lexical/TipTap

目标

走到这里你已经具备自研编辑器的全部零件。最后一节做选型总览：什么时候该自己造、什么时候用框架，并给一个用 TipTap（基于 ProseMirror）10 行搭编辑器的对照。

运行环境：浏览器（需联网加载 CDN）。
运行方式：保存为下面的 tiptap.html，用浏览器打开即可看到带工具栏的编辑器。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>TipTap 最小编辑器</title>
  <script src="https://unpkg.com/@tiptap/core@2/dist/tiptap.umd.js"></script>
  <script src="https://unpkg.com/@tiptap/starter-kit@2/dist/starter-kit.umd.js"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    const editor = Tiptap.Editor.create({
      element: document.getElementById('app'),
      extensions: [Tiptap.StarterKit],
      content: '<p>你好，这是 TipTap 编辑器</p>',
    })
    // 加粗：editor.chain().focus().toggleBold().run()
  </script>
</body>
</html>

同样"加粗"，自研要手写 toggleBold（第3节），框架一行 toggleBold().run() 搞定——因为框架已经把"模型 + 命令 + 渲染 + 撤销 + 协同"全打包了。

名词解释

ProseMirror：老牌编辑器框架，核心是"严格 schema 的文档模型 + 插件式状态管理"，Notion、Atlassian 系常用。TipTap 是它的上层封装。
Slate：React 友好的"完全可定制"框架，模型就是普通 JSON，适合深度定制 UI。
Lexical：Meta 出品，性能优先、细粒度可插拔，Facebook/Comment 场景常见。
自研 vs 框架：内容简单、要极致控制 → 自研（你已会）；复杂富文本、要协同/多端 → 用框架省下数年工程。

课后练习

练习：假设你要做一个"只支持加粗、斜体、标题"的内部公告编辑器，且团队用 React。请给出选型建议并说理由。

答案：用 TipTap（基于 ProseMirror）+ React 封装最稳：三个格式 StarterKit 已内置，撤销/协同/可访问性开箱即用；自研要自己处理跨浏览器 DOM 差异、撤销栈、schema 校验，投入大且易出 bug。除非有强定制或离线特殊需求，否则不推荐从零自研。

总结

12 节走完，你已经亲手实现了富文本编辑器的每一个核心零件：contentEditable 接收输入、Selection/Range 定位、命令式格式、JSON 数据模型、受控粘贴、块级格式、撤销栈、序列化、媒体插入、协同直觉、节流与增量更新。这正是所有框架内部在做的事——区别只在于它们把这些零件打磨成了"严格 schema + 插件系统 + 协同内核"。选型时记住：框架不是黑盒，是你已经理解的那些概念的工业化封装。简单场景自研可控、零依赖；复杂场景（协同、多端、强 schema）用 ProseMirror/TipTap/Slate/Lexical，把省下的工程力用在业务上。你现在的底气是：哪怕用框架，也知道它每一层在干什么，不会被"开箱即用"蒙住眼睛。