Agent Skills
返回列表
💻

Tiptap 无头编辑器

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_3c6cb52e/tiptap-headless-rich-text-editor-framework。

技能介绍

要解决的问题

常见的富文本编辑器把编辑内核和一套固定 UI 焊在一起。想在产品里换成自己设计系统里的按钮、工具栏和排版时，往往只能覆盖 class 或打补丁，时间久了就是技术债。把编辑区域嵌入复杂业务表单、知识库或 SaaS 后台时，这种被预置 UI 绑架的代价尤其明显。

核心能力

Tiptap 把内核与界面彻底分离：

  • 基于 ProseMirror：继承其文档模型与状态管理
  • 100+ 扩展：排版、媒体、协同等功能以扩展形式提供
  • 框架无关：支持 React、Vue 与原生 JavaScript
  • 完全可定制：没有预设 UI，也无需 class 覆盖或 hack

工作方式

基本流程是：初始化编辑器实例、按需组装扩展、定义文档 schema，再通过事件读写内容。需要界面参考时，可以查阅官方 UI 模板，把示例组件拆进自己的项目，而不是接受一整套固定样式。

适用边界

  • 界面、工具栏、气泡菜单都要自己实现
  • 只想要开箱即用的所见即所得时，这套方案偏重
  • 深度定制依赖 ProseMirror 的扩展机制，需评估内核定制的学习成本

使用场景

  • 在 SaaS 后台嵌入富文本编辑区，要求工具栏、菜单与自家设计系统完全一致，不接受预置界面
  • 用 Vue 搭内部知识库编辑页，需自定义标题层级与内容格式规则，扩展机制要可控
  • 为 React 项目做富文本编辑区，想参考官方 UI 模板自行拼装工具栏和气泡菜单
  • 需要在产品里加入所见即所得编辑能力，又不想让编辑器默认样式污染整体页面风格

适合人员

  • 前端工程师：正在为 React 或 Vue 项目选型富文本编辑器，需要在不改设计系统的前提下接入编辑能力
  • 技术负责人：评估 ProseMirror 内核的定制成本，关心扩展机制能否支撑产品长期迭代
  • 全栈开发者：要在 SaaS 产品里做可自定义样式的编辑区，希望框架无关、无 UI 包袱
  • 开源项目维护者：想为文档工具替换编辑内核，要求能自由组装扩展并参考官方 UI 模板