Tiptap SITES

// 01 Tiptap 是什么

Tiptap 是一个基于 ProseMirror 的无头（headless）富文本编辑器框架，可与 Vue、React、Svelte 以及纯 JavaScript 无缝集成，帮助开发者在数周内构建出类似 Notion、Ghost 或 Figma 等应用中的富文本编辑体验，而无需从零开发。

核心功能

扩展驱动架构

• 高度可扩展：提供 100 多个官方扩展（如 StarterKit、Link、Image、Table、Collaboration）和大量社区插件；开发者也可自定义节点、标记和输入规则。

• Pro 扩展：付费功能包括实时协作（基于 Yjs 的 Hocuspocus 后端）、文档评论、AI 内容建议和 DOCX 导入/导出等。

现代开发体验

• TypeScript 强化：3.0 Beta 引入对扩展存储和配置选项的严格类型支持，减少运行时错误。

• 无 DOM 服务器渲染：在服务端生成和操作编辑器内容，无需依赖浏览器环境。

• JSX 节点定义：允许使用 React/Vue 风格的 JSX 语法来描述自定义节点输出，提高可读性和复用性 。

• Floating UI 弹出层：取代 tippy.js，提供更可靠、可定制的工具提示和浮动面板。

AI 与协作功能

• Content AI：内置云端 AI 扩展，可实时生成文字建议、摘要、翻译或语气优化。

• 实时协作：与 Tiptap Cloud 或自托管 Hocuspocus 后端配合，实现多光标、多用户离线编辑同步。

• 内嵌评论：支持逐节点评论、线程式讨论，并可与文档内容一同存储与回放。

架构与生态

Tiptap 的核心是一个“编辑器核心 + 扩展”模式，编辑器本身不渲染任何 UI，而是通过扩展和第三方组件来构建界面。官方提供 React、Vue、Svelte 和原生 JS 的基本组件，也有社区维护的 MUI、Mantine、Tailwind UI 等集成包。

• UI 模板：官方提供“Notion 样式”、“简单编辑器”和“评论模板”等预构建 UI，可快速启动项目。

• 后端支持：开源协作后端 Hocuspocus 与 Yjs 结合，提供可扩展的 CRDT 同步层。

• 社区与文档：拥有活跃的 Discord 社区、完整的在线文档和丰富的 CodeSandbox 示例。

使用场景

• 协作编辑应用：构建在线笔记、文档管理或协作文档工具（如 Notion、Coda）。

• 内容管理系统（CMS）：为博客平台或企业 CMS 提供高级编辑器体验。

• 富文本表单：用在表单中需要富文本输入的场景，如评论区、富媒体邮件编辑器。

• 定制化编辑：需要完全掌控编辑体验与样式的产品，如电子学习平台或内部知识库。

快速上手

1. 安装核心包：

   bash

   复制编辑

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


2. 初始化编辑器（React 示例）：

   js

   复制编辑

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

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

   return<EditorContenteditor={editor} />


   tiptap.dev

3. 添加扩展：在 extensions 数组中引入所需插件，如 @tiptap/extension-link、@tiptap/extension-image 等。

许可与定价

• 开源核心：MIT 许可证，免费使用与修改。

• Tiptap Cloud / Pro 功能：实时协作、AI 扩展、评论、文档 API 等需付费订阅。个人和企业计划可根据编辑量和并发用户数定制。

竞品对比

Tiptap 的开源核心与商业云服务相结合，为各种规模的产品提供了从原型到生产级的完整富文本编辑解决方案。无论您是需要快速集成还是深度定制，Tiptap 的扩展驱动模式和现代开发体验都能满足您的需求。

// 04 常见 问题

// 05 资料 来源