代码语言

知识点思维导图

13 个知识节点

参考资料

Tiptap extension 快速集成：extension 文档
starterKit 包含的 extension：starterKit 文档
Tiptap 官方示例：Examples
Tiptap extension 配置：extension 文档、extension node 文档、extension mark 文档

参考资料

富文本编辑器（01） - 入门指南

读完后，你应能完成以下任务：

绘制“富文本编辑器（01） - 入门指南 / 为什么选择 TipTap？”的关键对象与数据流，解释“无头设计 - 你想要什么样的界面，自己说了算 -> 上手容易 - API 设计简洁，学习成本低 -> 扩展能力强 - 插件生态丰富，也可以自己写插件 -> 框架兼容 - React、Vue、Svelte 都支持”，并用源码位置、日志或 Trace 标注证据。

为“富文本编辑器（01） - 入门指南 / 市面上的富文本编辑器都有啥？”设计正常与异常输入，验证“适合：企业应用、内容管理系统”，输出首个偏差位置与回归测试结果。

实现“富文本编辑器（01） - 入门指南 / 怎么开始用 TipTap？”的最小代码或配置，检验“注意：Notion 风格的模板需要付费，不过你可以基于 simple template 自己改。”，输出命令、结果与 Diff，并说明不适用边界。

一、为什么选择 TipTap？

TipTap 是一个基于 ProseMirror 的现代富文本编辑器。它最大的特点就是"无头"设计，啥意思呢？就是它不给你预设好的界面，你可以完全自定义编辑器长什么样、怎么交互，自由度特别高。

1.1 市面上的富文本编辑器都有啥？

咱们先看看市面上主流的富文本编辑器，对比一下它们的优缺点：

Quill.js（基于 DOM）

优点：简单易用，轻量级，新手友好
缺点：功能扩展受限，复杂场景不好搞
适合：简单的文档编辑

TinyMCE（基于 DOM）

优点：成熟稳定，功能全面，插件丰富
缺点：体积大，深度定制比较麻烦
适合：企业应用、内容管理系统

CKEditor（基于 DOM）

优点：功能强大，支持多种文件格式，容易集成
缺点：商业授权比较复杂，定制能力有限
适合：富文本内容管理、复杂文档编辑

Slate.js（基于 JSON）

优点：扩展性强，基于 React，适合深度定制
缺点：学习曲线陡峭，生态不如 DOM 方案成熟
适合：高度自定义编辑器、知识管理系统

ProseMirror（基于 JSON）

优点：数据结构化，功能强大，定制能力极高，支持协作
缺点：学习成本高，初期开发复杂
适合：高性能编辑器、协作文档系统

Tiptap（基于 ProseMirror）

优点：基于 ProseMirror 封装更友好，Vue/React 都能用
缺点：生态还在完善中
适合：快速开发现代富文本编辑器

1.2 TipTap 有什么好处？

总结一下 TipTap 的优势：

无头设计 - 你想要什么样的界面，自己说了算
上手容易 - API 设计简洁，学习成本低
扩展能力强 - 插件生态丰富，也可以自己写插件
框架兼容 - React、Vue、Svelte 都支持
TypeScript 支持 - 类型定义完整，开发体验好
社区活跃 - 持续更新，社区模板支持 Next.js

二、怎么开始用 TipTap？

2.1 安装依赖

首先安装必要的包：

# 核心包
pnpm install @tiptap/core @tiptap/pm

# 基础扩展
pnpm install @tiptap/starter-kit

# 框架集成（这里用 Next.js，也支持 Vue3 等其他框架）
pnpm install @tiptap/react @tiptap/pm @tiptap/starter-kit

2.2 创建最简单的编辑器

有了 starterKit 就有了编辑器的基础功能（starterKit 文档），我们在页面里加一个最简单的编辑器组件：

"use client"

import { useEditor, EditorContent } from "@tiptap/react"
import StarterKit from "@tiptap/starter-kit"

const Tiptap = () => {
  const editor = useEditor({
    extensions: [StarterKit],
    content: "<p>Hello World! 🌎️</p>",
    immediatelyRender: false, // SSR 不马上渲染，防止水合问题
    editorProps: {
      attributes: {
        class: "focus:outline-none" // 去掉编辑器边框
      }
    }
  })

  return <EditorContent editor={editor} />
}

export default Tiptap

2.3 使用官方提供的简单模板

TipTap 提供了简单模板，不是 Notion 那种风格（不支持 slash command），操作栏在页面顶部：

# 现有项目中使用
npx @tiptap/cli@latest add simple-editor

# 新项目
npx @tiptap/cli@latest init simple-editor

然后在代码里引入：

import { SimpleEditor } from "@/components/tiptap-templates/simple/simple-editor"

export default function App() {
  return <SimpleEditor />
}

注意：Notion 风格的模板需要付费，不过你可以基于 simple template 自己改。

三、富文本编辑器是怎么发展过来的？

Web 富文本编辑器的发展史，其实就是一个从严重依赖浏览器原生能力（比如 document.execCommand），到逐步构建更独立、更可控的编辑模型，甚至最终"抛弃"浏览器原生编辑能力的过程。

3.1 L0 阶段：完全依赖浏览器

技术方案： contenteditable + document.execCommand

核心特点： 直接使用浏览器原生编辑能力

代表产品： CKEditor 1-4

优点：

实现简单
输入流畅

缺点：

浏览器兼容性差
DOM 结构不可控
难以协同

3.2 L1 阶段：引入数据模型

技术方案： contenteditable + 自定义数据模型

核心特点： 引入抽象数据模型，实现视图与模型分离

代表产品： Quill（打不开）、Draft.js（不更新了）、Slate（学习曲线陡峭）、Prosemirror、CKEditor 5、Lexical（新但还不稳定）

优点：

内容可控
支持协同
跨浏览器一致性

缺点：

技术复杂
需处理组合输入等问题

3.3 L2 阶段：完全自研排版引擎

技术方案： 自研排版引擎（完全脱离 contenteditable）

核心特点： 完全掌控从输入、选区到渲染的全过程

代表产品： Google Docs、Office Online

优点：

极致的一致性
性能优秀
支持高阶功能

缺点：

开发难度极高
工程浩大

四、总结

为什么选择 TipTap？：无头设计 - 你想要什么样的界面，自己说了算 -> 上手容易 - API 设计简洁，学习成本低 -> 扩展能力强 - 插件生态丰富，也可以自己写插件 -> 框架兼容 - React、Vue、Svelte 都支持
富文本编辑器是怎么发展过来的？：Web 富文本编辑器的发展史，其实就是一个从严重依赖浏览器原生能力（比如 document.execCommand），到逐步构建更独立、更可控的编辑模型，甚至最终"抛弃"浏览器原生编辑能力的过程。
市面上的富文本编辑器都有啥？：适合：企业应用、内容管理系统
L2 阶段：完全自研排版引擎：核心特点：完全掌控从输入、选区到渲染的全过程

参考资料

参考资料

富文本编辑器（01） - 入门指南

一、为什么选择 TipTap？

1.1 市面上的富文本编辑器都有啥？

1.2 TipTap 有什么好处？

二、怎么开始用 TipTap？

2.1 安装依赖

2.2 创建最简单的编辑器

2.3 使用官方提供的简单模板

三、富文本编辑器是怎么发展过来的？

3.1 L0 阶段：完全依赖浏览器

3.2 L1 阶段：引入数据模型

3.3 L2 阶段：完全自研排版引擎

四、总结

学完自测