Tiptap 富文本编辑器快速入门从零搭建一个可完全定制的前端编辑器【免费下载链接】tiptapThe headless rich text editor framework for web artisans.项目地址: https://gitcode.com/GitHub_Trending/ti/tiptapTiptap 是一个无头headless富文本编辑器框架它只提供编辑能力和文档数据不带任何现成界面UI 完全由你自己拼装。本文写给第一次接触 Tiptap 的前端开发者以及需要评估要不要用它的产品与架构同学。它到底解决了什么问题痛点一现成编辑器的界面改不动。用带内置工具栏的编辑器时想换一套视觉风格往往要覆盖几十个类名、改一堆内部 DOM 结构升级版本就可能全部失效。Tiptap 因为压根不内置 UI你写的按钮、菜单就是普通组件改样式、换框架、接设计系统都没有障碍。痛点二功能一视同仁装不上也卸不掉。很多编辑器把所有功能打包在一起你只想要加粗和图片也得拖着表格、公式、协作一起加载。Tiptap 里每一项能力都是一个独立的扩展包用哪项才引哪项编辑器最终体积由你决定。痛点三想深入定制时底层工具又太生。ProseMirrorTiptap 的底层依赖能做出任意复杂的编辑器但它暴露的是事务、状态、视图这类底层概念直接上手门槛很高。Tiptap 在这层之上包了一个对开发者友好的封装常用操作变成了editor.chain().toggleBold().run()这样的命令式调用文档结构则用节点这种接近直觉的模型来描述。核心原理速览用一个类比理解它的分层把 Tiptap 想象成一家只负责后厨的中央厨房。后厨核心层tiptap/core负责文档内容的数据结构、光标位置、选区状态和编辑操作的执行。它不关心你界面上长什么样。菜单扩展 Extensions每个扩展定义一种能力比如标题加粗链接。你可以只点几道菜不用整桌套餐。食材Node / MarkNode 是文档里的块如段落、代码块Mark 是贴在文字上的属性如斜体、高亮。你的文档本质上是一棵由这些元素构成的树。前台UItiptap/vue-3、tiptap/react这类适配器只是把后厨的菜品端上桌的托盘帮你处理框架的生命周期和状态同步换成 Svelte 或直接写原生 JS 也完全可以。编辑流程因此是单向的用户在界面触发操作 → 命令修改文档数据 → 数据变化驱动界面重绘。界面和逻辑解耦后同一份编辑逻辑可以同时服务 Web、移动端 WebView 和桌面端。10 分钟上手先安装核心依赖和框架适配器以 Vue 3 为例React 项目把tiptap/vue-3换成tiptap/reactnpm install tiptap/vue-3 tiptap/starter-kit下面这段最小示例就能跑起一个可用的编辑器StarterKit已打包了段落、标题、加粗等常用扩展script setup import { useEditor, EditorContent } from tiptap/vue-3 import StarterKit from tiptap/starter-kit const editor useEditor({ extensions: [StarterKit], // 功能清单 content: p开始输入/p, // 初始内容支持 HTML 或 JSON }) /script template !-- 必须挂载这个组件否则编辑器不会出现在页面上 -- editor-content :editoreditor / /template保存内容时直接取数据即可editor.getHTML()拿 HTMLeditor.getJSON()拿结构化数据推荐入库用 JSON避免 HTML 格式漂移。更多可运行示例在仓库的 demos/ 目录里每个场景都带 Vue 和 React 双版本。最常用的 3 个进阶用法按需裁剪 StarterKit 功能不需要某个默认功能时在configure里关掉即可不必逐个拆分扩展StarterKit.configure({ codeBlock: false, // 去掉代码块 heading: { levels: [1, 2, 3] }, // 只保留 h1~h3 })用命令链组合连续操作editor.chain()把多个编辑动作串成一行最后run()统一提交中途还能插入条件判断// 选中当前段落 → 设为 h2 → 提交 editor.chain().focus().selectParentNode().setHeading({ level: 2 }).run()相比逐个调用命令链式写法的好处是每一步的返回都带有最新状态后续步骤基于前一步的结果执行不会用到过期的选区位置。接入实时协作协作走 Yjs一种 CRDT 数据结构能自动合并多端修改。核心是换上tiptap/extension-collaboration扩展并通过 y-websocket 连到协作服务器import Collaboration from tiptap/extension-collaboration import * as Y from yjs const ydoc new Y.Doc() // 编辑器改用 ydoc 作为数据源并通过 provider 同步 // 注意协作模式下 undoRedo 扩展不可用需自行处理撤销栈官方在仓库里放了协作示例demos/src/Examples/CollaborativeEditing/配套的开源后端服务叫 Hocuspocus适合自建部署。新手最容易踩的坑现象原因与解法页面空白看不到编辑器只调用了useEditor/new Editor忘了挂载editor-content组件。编辑器实例和数据是分离的必须有内容容器组件销毁后内存泄漏、控制台警告忘了editor.destroy()。Vue 里在onBeforeUnmount中调用React 里放useEffect的清理函数粘贴进来的内容带一堆脏样式用editor.commands.insertContent替代默认粘贴或在扩展里配置pasteRules过滤不需要的节点和属性协作模式下撤销无效协作扩展接管了事务undoRedo会与之冲突需要自己实现仅撤销本人操作的撤销栈示例见 demos/src/Examples/CollaborativeEditing/另外一个隐性坑content建议统一用 JSON 存取。HTML 会被浏览器自动纠正比如自关闭标签、隐式节点来回转换后容易和后端数据对不上。它适合你的项目吗判断标准很简单你的界面是否需要深度定制以及你是否愿意自己搭工具栏。UI 强定制、多端复用编辑逻辑 → 适合 Tiptap要开箱即用的工具栏快速上线 → 传统带 UI 的编辑器更省事已经在用 ProseMirror 且团队熟悉事务模型 → 可直接用底层Tiptap 是更友好的中间层维度Tiptap传统所见即所得编辑器界面自由度完全自定义依赖主题覆盖改深层样式困难上手成本需自行拼装工具栏引入即用包体积按需组合功能全量打包继续深入项目总览与背景介绍README.md各扩展源码理解 Node/Mark 机制的最佳材料packages/重点看packages/core/src/框架适配器的实现细节packages/vue-3/src/、packages/react/src/完整可运行的场景示例表格、链接、协作等均有双框架版本demos/src/Examples/参与贡献前的开发规范CONTRIBUTING.md【免费下载链接】tiptapThe headless rich text editor framework for web artisans.项目地址: https://gitcode.com/GitHub_Trending/ti/tiptap创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考