TypeScript Tiptap 为Web开发者打造的无头富文本编辑器

要在 Web 应用里做一个好用的富文本编辑器，传统方案两难：用 contenteditable 从零造，坑多到怀疑人生；用现成大组件，样式和行为又被绑死，想做个“自己品牌风格”的编辑器比登天还难。
更现实的需求是“无头（headless）”——我只想要编辑器的逻辑与 API，渲染和样式我自己来。这样既能和 React、Vue 任意集成，又能把设计权牢牢抓在手里。Tiptap 就是为这个诉求而生的。

项目基本信息

一、项目介绍

ueberdosis/tiptap 是一个无头（headless）的富文本编辑器框架，TypeScript 编写，MIT 协议。它构建在 ProseMirror 之上，把编辑器的“能力（节点、标记、扩展）”和“渲染”解耦：你用官方或自写的扩展声明功能，再用 React/Vue/原生任意框架去渲染。Tiptap 现在由 Linux Foundation 健康评分背书，提供 core、starter-kit、若干 UI 扩展与官方文档，是 Notion 式可定制编辑器最常见的底座之一。

二、核心优势

1. 无头可定制：逻辑与渲染分离，样式与 UI 完全由你掌控。
2. 框架无关：官方支持 React、Vue 与原生 JS，也能接入其它视图层。
3. 扩展生态：基于 ProseMirror，节点/标记/扩展可组合，官方与社区扩展丰富。
4. 渐进采用：从 starter-kit 起步，按需叠加表格、图片、协同等扩展。
5. 纯前端：以 npm 包形式分发，浏览器内运行，适合 Web 项目直接引用。

三、适用场景

• 需要品牌化、强定制的富文本编辑（文章、笔记、CMS）。
• 在 React/Vue 应用里嵌入可协同、可扩展的编辑器。
• 做 Notion 类块编辑器，需要灵活节点与命令。
• 对默认 UI 不满意、希望完全重写交互与外观的团队。

四、安装教程

核心包与起步套件：

npm install @tiptap/core @tiptap/starter-kit

也可通过 skills 方式添加官方能力：

npx skills add ueberdosis/tiptap --skill tiptap

常见报错：React 项目若报 hooks/peer 依赖冲突，确认 @tiptap 版本与 React 版本匹配；SSR 项目注意在客户端挂载编辑器，避免服务端访问 document。

五、使用示例

最简 React 编辑器：

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

const editor = useEditor({ extensions: [StarterKit], content: '<p>Hello Tiptap</p>' })

return <EditorContent editor={editor} />

真实效果：渲染出一个可执行加粗、标题、列表等基础操作的编辑器，外观完全由你写的 CSS 决定——这正是 headless 的意义：功能归 Tiptap，长相归你。

六、常见问题

Q：Tiptap 和 ProseMirror 什么关系？
A：Tiptap 是 ProseMirror 之上的更易用封装，提供扩展 API 与框架绑定，底层仍是 ProseMirror。
Q：能做多人协同吗？
A：官方提供协同扩展（基于 Yjs），可在起步套件之外接入实现实时协作。
Q：一定要用 React 吗？
A：不必须，Vue 与原生 JS 都有官方绑定，也可只用 core 自接视图层。

七、总结

Tiptap 用 headless 思路把“编辑器该有什么能力”和“长什么样”彻底分开，让 Web 开发者既能享受成熟内核，又能百分百掌控外观。对需要深度定制富文本的应用，它几乎是 React/Vue 生态里最稳的底座；MIT 协议、社区活跃，值得作为编辑器首选评估。