Tiptap 无头富文本编辑器指南3 步跑通你的自定义编辑器【免费下载链接】tiptapThe headless rich text editor framework for web artisans.项目地址: https://gitcode.com/GitHub_Trending/ti/tiptap做内容类产品时你可能遇到过这样的局面评论框想加个加粗文档编辑要标题、列表和引用客户又提出把工具栏挪个位置。如果选的是 UI 和逻辑焊死的编辑器每次改样式都得去抠它的内部代码。Tiptap 走的是另一条路——它是一个基于 ProseMirror 的无头富文本编辑器headless rich text editor核心只负责内容模型、状态和编辑逻辑按钮、工具栏、皮肤全由你自己搭。打个比方Tiptap 像一台没有外壳的编辑引擎你负责给它装什么外壳它负责把编辑这件事做对。这样换来的是核心逻辑不变界面千变万化同一套扩展可以同时挂在 Vue 后台和 React 前台里。项目速览Tiptap 是什么、适合谁一句话定位核心特性清单适用与不适用场景无头、跨框架、靠扩展拼装能力的富文本编辑器基于 ProseMirrorREADME 提到该库已用于 New York Times、The Guardian、Atlassian 等见 packages/core/README.md不含任何内置 UI官方 社区共 100 扩展READMEVue 2/3、React、原生 JS 三种接入方式命令链 APIYjs Hocuspocus 开源协作MIT 协议✅ 需要深度定制编辑界面、多框架复用编辑核心、要做协同编辑的项目❌ 只需要一个简单评论框、或想要开箱即用工具栏 UI 的场景核心概念速览3 个词看懂 Tiptap 的分层Extension扩展像手机的应用商店。加粗、链接、表格、撤销……每个功能都是一个独立扩展编辑器就是核心 一份扩展清单。用不上的功能不注册即可不存在背着一堆用不上的代码。Node 与 Mark节点与标记文档是一棵节点树。Node 是块级结构段落、标题、代码块Mark 是包在文字上的样式加粗、斜体、行内代码。理解这一对就理解了 Tiptap 里 90% 的概念。命令链Command Chain编辑操作像流水线一样串起来。editor.chain().focus().toggleBold().run()读起来就是聚焦然后切换加粗执行比分别调用多个 API 再手动同步状态清爽得多。快速上手2 条命令装好10 行代码出第一个编辑器 先安装核心依赖和框架适配器以 Vue 3 为例React 把最后一行换成tiptap/reactnpm i tiptap/core tiptap/starter-kit tiptap/vue-3StarterKit 是官方打包的基础扩展集包含加粗、斜体、标题、列表、引用、撤销重做等见 packages/starter-kit/src/starter-kit.ts。最小可用配置import { useEditor, EditorContent } from tiptap/vue-3 import StarterKit from tiptap/starter-kit const editor useEditor({ extensions: [StarterKit], content: p你好Tiptap/p, })模板里放一个EditorContent :editoreditor /页面上就会出现一个可编辑的contenteditable区域能打字、能换行。工具栏需要你自己写几个按钮通过editor.chain().toggleBold().run()之类的命令去驱动。建议在项目里这样组织目录后面加自定义扩展不慌src/ └── editor/ ├── extensions/ # 自定义 Node / Mark / Extension ├── components/ # 工具栏等 UI 组件 └── useMyEditor.ts # 编辑器实例与扩展配置跑通后预期效果编辑区可正常输入editor.getHTML()/editor.getJSON()能拿到结构化内容给 StarterKit 传configure({ codeBlock: false })即可按需关掉某个功能。深入解析3 个真正有价值的技术点 扩展机制能力是注册制的为什么重要它决定了编辑器能不能长成业务需要的样子。原理一句话所有扩展统一继承自 Extension 基类可以贡献 schema 节点、命令、按键映射、粘贴规则互不干扰。关键代码自己加一个自定义命令只需几十行import { Extension } from tiptap/core export const QuoteAction Extension.create({ name: quoteAction, addCommands() { return { toggleQuote: () ({ commands }) commands.toggleNode(blockquote), } }, })实际效果任何组件、任何框架里都能editor.commands.toggleQuote()功能调用和 UI 彻底解耦。Node 定义用一棵树描述你的文档结构为什么重要业务内容病历、试卷、产品卡往往不是段落 标题能表达的。原理一句话Node.create()声明节点的名字、分组、可包含内容和属性再给个renderHTML就能进 schema。关键代码import { Node } from tiptap/core export const Figure Node.create({ name: figure, group: block, content: image, addAttributes() { return { caption: { default: } } }, renderHTML({ HTMLAttributes }) { return [figure, { ...HTMLAttributes, data-caption: HTMLAttributes.caption }, 0] }, })实际效果编辑器从此认识图片说明块粘贴进来自动解析序列化出去结构稳定前后端共享同一份 JSON。命令链把多步操作合成一条流水线为什么重要复杂操作聚焦 → 选中 → 加粗 → 设色最容易在状态同步上翻车。原理一句话chain()把命令排成队列前一步失败则后续自动跳过run()时一次性派发事务。关键代码editor .chain() .focus(end) .toggleBold() .run()实际效果工具栏、快捷键、AI 触发脚本可以共用同一套命令写法不用再各自维护当前选区是什么。避坑清单4 个高频问题与解法 ⚠️问题原因解法编辑器空白、无法输入没注册 Document / Paragraph / Text 这些基础节点手写扩展清单时漏了直接用 StarterKit或手动确保这三个节点在列React/Next.js 下报window is not defined编辑器依赖 DOMSSR 阶段提前创建了实例React 端设置immediatelyRender: false只在客户端构建见 packages/react/src/useEditor.ts从 Word/网页粘贴后样式混乱粘贴的 HTML 携带大量 schema 之外的标签和属性超出 schema 的内容解析时会被自动忽略用扩展里的pasteRules做针对性清洗大文档下保存接口被打爆onUpdate每次内容变更都会触发监听事件后自行防抖如 300ms再提交editor.getHTML()性能与安全要点只注册用得到的扩展StarterKit 支持逐项关闭codeBlock: false历史栈长度可通过 undoRedo 配置控制内容出前端后仍应在服务端再做一次净化不要把编辑器 schema 当安全边界。选型参考Tiptap 和另外两条路怎么选维度Tiptap手写 contenteditable商业编辑器带现成工具栏开发成本中核心现成UI 自建高粘贴、选区、移动端光标都要自己兜低开箱即用扩展性高100 扩展 自由定制节点/视图完全自由但全要自己维护受限于厂商插件生态多框架复用Vue 2/3、React、原生 JS 同一套核心天然无框架绑定但代码难迁移各框架版本能力常不一致协同编辑开源方案Yjs Hocuspocus 后端全靠自己多内置但通常绑定其云服务费用MIT 免费部分高级 Pro 扩展需订阅README0按授权收费什么情况下不建议选它如果只是加个简单评论框textarea 就够了引入 Tiptap 是杀鸡用牛刀如果团队只有两个人、要求两三天上线且没有前端精力自建工具栏无头意味着第一天没有现成 UI上手成本会被放大可以参考 demos/ 里的现成页面抄结构如果深度依赖某商业编辑器的云服务和私有插件迁移收益要重新算账。资源与展望两个值得跟进的问题一是 AI 生成内容与实时编辑如何共存——仓库里已经出现 ai-toolkit含流式显示 streaming-reveal 相关实现后续边生成边可编辑的体验还会怎么演进二是多模态内容音频、数学公式、图表越来越多节点扩展的边界会扩展到哪核心源码packages/core/src/官方示例站源码可按需 fork 改demos/入门教程示例demos/src/Tutorials/协作编辑示例demos/src/Examples/CollaborativeEditing/参与贡献CONTRIBUTING.md如果只想验证一下它值不值得进你的技术栈最快的方式是clone 仓库git clone https://gitcode.com/GitHub_Trending/ti/tiptap打开 demos 跑起来挑一个最接近你业务的示例改两天——无头编辑器好不好用两周之内就会有答案。【免费下载链接】tiptapThe headless rich text editor framework for web artisans.项目地址: https://gitcode.com/GitHub_Trending/ti/tiptap创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Tiptap 无头富文本编辑器指南：3 步跑通你的自定义编辑器
Tiptap 无头富文本编辑器指南3 步跑通你的自定义编辑器【免费下载链接】tiptapThe headless rich text editor framework for web artisans.项目地址: https://gitcode.com/GitHub_Trending/ti/tiptap做内容类产品时你可能遇到过这样的局面评论框想加个加粗文档编辑要标题、列表和引用客户又提出把工具栏挪个位置。如果选的是 UI 和逻辑焊死的编辑器每次改样式都得去抠它的内部代码。Tiptap 走的是另一条路——它是一个基于 ProseMirror 的无头富文本编辑器headless rich text editor核心只负责内容模型、状态和编辑逻辑按钮、工具栏、皮肤全由你自己搭。打个比方Tiptap 像一台没有外壳的编辑引擎你负责给它装什么外壳它负责把编辑这件事做对。这样换来的是核心逻辑不变界面千变万化同一套扩展可以同时挂在 Vue 后台和 React 前台里。项目速览Tiptap 是什么、适合谁一句话定位核心特性清单适用与不适用场景无头、跨框架、靠扩展拼装能力的富文本编辑器基于 ProseMirrorREADME 提到该库已用于 New York Times、The Guardian、Atlassian 等见 packages/core/README.md不含任何内置 UI官方 社区共 100 扩展READMEVue 2/3、React、原生 JS 三种接入方式命令链 APIYjs Hocuspocus 开源协作MIT 协议✅ 需要深度定制编辑界面、多框架复用编辑核心、要做协同编辑的项目❌ 只需要一个简单评论框、或想要开箱即用工具栏 UI 的场景核心概念速览3 个词看懂 Tiptap 的分层Extension扩展像手机的应用商店。加粗、链接、表格、撤销……每个功能都是一个独立扩展编辑器就是核心 一份扩展清单。用不上的功能不注册即可不存在背着一堆用不上的代码。Node 与 Mark节点与标记文档是一棵节点树。Node 是块级结构段落、标题、代码块Mark 是包在文字上的样式加粗、斜体、行内代码。理解这一对就理解了 Tiptap 里 90% 的概念。命令链Command Chain编辑操作像流水线一样串起来。editor.chain().focus().toggleBold().run()读起来就是聚焦然后切换加粗执行比分别调用多个 API 再手动同步状态清爽得多。快速上手2 条命令装好10 行代码出第一个编辑器 先安装核心依赖和框架适配器以 Vue 3 为例React 把最后一行换成tiptap/reactnpm i tiptap/core tiptap/starter-kit tiptap/vue-3StarterKit 是官方打包的基础扩展集包含加粗、斜体、标题、列表、引用、撤销重做等见 packages/starter-kit/src/starter-kit.ts。最小可用配置import { useEditor, EditorContent } from tiptap/vue-3 import StarterKit from tiptap/starter-kit const editor useEditor({ extensions: [StarterKit], content: p你好Tiptap/p, })模板里放一个EditorContent :editoreditor /页面上就会出现一个可编辑的contenteditable区域能打字、能换行。工具栏需要你自己写几个按钮通过editor.chain().toggleBold().run()之类的命令去驱动。建议在项目里这样组织目录后面加自定义扩展不慌src/ └── editor/ ├── extensions/ # 自定义 Node / Mark / Extension ├── components/ # 工具栏等 UI 组件 └── useMyEditor.ts # 编辑器实例与扩展配置跑通后预期效果编辑区可正常输入editor.getHTML()/editor.getJSON()能拿到结构化内容给 StarterKit 传configure({ codeBlock: false })即可按需关掉某个功能。深入解析3 个真正有价值的技术点 扩展机制能力是注册制的为什么重要它决定了编辑器能不能长成业务需要的样子。原理一句话所有扩展统一继承自 Extension 基类可以贡献 schema 节点、命令、按键映射、粘贴规则互不干扰。关键代码自己加一个自定义命令只需几十行import { Extension } from tiptap/core export const QuoteAction Extension.create({ name: quoteAction, addCommands() { return { toggleQuote: () ({ commands }) commands.toggleNode(blockquote), } }, })实际效果任何组件、任何框架里都能editor.commands.toggleQuote()功能调用和 UI 彻底解耦。Node 定义用一棵树描述你的文档结构为什么重要业务内容病历、试卷、产品卡往往不是段落 标题能表达的。原理一句话Node.create()声明节点的名字、分组、可包含内容和属性再给个renderHTML就能进 schema。关键代码import { Node } from tiptap/core export const Figure Node.create({ name: figure, group: block, content: image, addAttributes() { return { caption: { default: } } }, renderHTML({ HTMLAttributes }) { return [figure, { ...HTMLAttributes, data-caption: HTMLAttributes.caption }, 0] }, })实际效果编辑器从此认识图片说明块粘贴进来自动解析序列化出去结构稳定前后端共享同一份 JSON。命令链把多步操作合成一条流水线为什么重要复杂操作聚焦 → 选中 → 加粗 → 设色最容易在状态同步上翻车。原理一句话chain()把命令排成队列前一步失败则后续自动跳过run()时一次性派发事务。关键代码editor .chain() .focus(end) .toggleBold() .run()实际效果工具栏、快捷键、AI 触发脚本可以共用同一套命令写法不用再各自维护当前选区是什么。避坑清单4 个高频问题与解法 ⚠️问题原因解法编辑器空白、无法输入没注册 Document / Paragraph / Text 这些基础节点手写扩展清单时漏了直接用 StarterKit或手动确保这三个节点在列React/Next.js 下报window is not defined编辑器依赖 DOMSSR 阶段提前创建了实例React 端设置immediatelyRender: false只在客户端构建见 packages/react/src/useEditor.ts从 Word/网页粘贴后样式混乱粘贴的 HTML 携带大量 schema 之外的标签和属性超出 schema 的内容解析时会被自动忽略用扩展里的pasteRules做针对性清洗大文档下保存接口被打爆onUpdate每次内容变更都会触发监听事件后自行防抖如 300ms再提交editor.getHTML()性能与安全要点只注册用得到的扩展StarterKit 支持逐项关闭codeBlock: false历史栈长度可通过 undoRedo 配置控制内容出前端后仍应在服务端再做一次净化不要把编辑器 schema 当安全边界。选型参考Tiptap 和另外两条路怎么选维度Tiptap手写 contenteditable商业编辑器带现成工具栏开发成本中核心现成UI 自建高粘贴、选区、移动端光标都要自己兜低开箱即用扩展性高100 扩展 自由定制节点/视图完全自由但全要自己维护受限于厂商插件生态多框架复用Vue 2/3、React、原生 JS 同一套核心天然无框架绑定但代码难迁移各框架版本能力常不一致协同编辑开源方案Yjs Hocuspocus 后端全靠自己多内置但通常绑定其云服务费用MIT 免费部分高级 Pro 扩展需订阅README0按授权收费什么情况下不建议选它如果只是加个简单评论框textarea 就够了引入 Tiptap 是杀鸡用牛刀如果团队只有两个人、要求两三天上线且没有前端精力自建工具栏无头意味着第一天没有现成 UI上手成本会被放大可以参考 demos/ 里的现成页面抄结构如果深度依赖某商业编辑器的云服务和私有插件迁移收益要重新算账。资源与展望两个值得跟进的问题一是 AI 生成内容与实时编辑如何共存——仓库里已经出现 ai-toolkit含流式显示 streaming-reveal 相关实现后续边生成边可编辑的体验还会怎么演进二是多模态内容音频、数学公式、图表越来越多节点扩展的边界会扩展到哪核心源码packages/core/src/官方示例站源码可按需 fork 改demos/入门教程示例demos/src/Tutorials/协作编辑示例demos/src/Examples/CollaborativeEditing/参与贡献CONTRIBUTING.md如果只想验证一下它值不值得进你的技术栈最快的方式是clone 仓库git clone https://gitcode.com/GitHub_Trending/ti/tiptap打开 demos 跑起来挑一个最接近你业务的示例改两天——无头编辑器好不好用两周之内就会有答案。【免费下载链接】tiptapThe headless rich text editor framework for web artisans.项目地址: https://gitcode.com/GitHub_Trending/ti/tiptap创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考