用途:Tiptap 是构建富文本编辑器的无头框架,基于 ProseMirror,通过模块化扩展拼装功能,适合在 React 中开发博客编辑器、评论系统、文档工具或类 Notion 应用。支持 React 19、Tailwind v4 及 Next.js 等 SSR 框架。
主要能力:核心依赖包括 @tiptap/react(React 集成)、@tiptap/starter-kit(内置扩展)、@tiptap/pm(ProseMirror 必需的对等依赖,不会自动安装)、@tailwindcss/typography(标题、列表、链接的排版样式)。StarterKit v3 含加粗、斜体、删除线、行内代码、链接、下划线等标记,文档/段落/文本/标题/列表/引用/代码块/分割线/换行等节点,以及撤销重做、拖放光标、间隙光标、列表键位映射、尾部节点等功能。可按需添加图片、颜色、排版智能符号、占位符、表格、任务列表、代码高亮、Y.js 协作、双向 Markdown 等扩展。
使用方式:用 useEditor({ extensions: [StarterKit], immediatelyRender: false }) 创建编辑器,用 <EditorContent editor={editor} /> 渲染;容器加 className="prose dark:prose-invert max-w-none" 获得排版样式;通过 StarterKit.configure({...}) 配置标题层级等;Y.js 协作时需设 undoRedo: false。shadcn 组件可通过 npx shadcn@latest add https://raw.githubusercontent.com/Aslam97/shadcn-minimal-tiptap/main/registry/block-registry.json 安装;Markdown 用 import { Markdown } from '@tiptap/markdown'。
适用场景:博客与内容编辑、评论、文档、协作型富文本界面。
限制与常见错误:不要与 Create React App 搭配(CRA 与 v3 的 ESM 模块结构不兼容,应改用 Vite);SSR/Next.js 必须设置 immediatelyRender: false;图片不应存为 base64,应设 allowBase64: false 并用上传处理替换为 URL;勿同时用 EditorProvider 与 useEditor;useEditor() 返回 Editor | null,调用方法前需判空;注意 ProseMirror 版本冲突,可在 package.json 中加 resolutions;v3 中协作的历史配置键已由 history 改名为 undoRedo;Markdown 包名是 @tiptap/markdown,不是 @tiptap/extension-markdown。价格与收费信息暂未提供。