TipKit：开源富文本编辑器套件，一套逻辑，任意风格！

一套逻辑，任意风格：开源富文本编辑器套件 TipKit

如果你正在给项目挑一个富文本编辑器，大概率会卡在两个选择之间：

从零搭：Tiptap 本身是无头的，足够灵活，但"灵活"意味着斜杠菜单、Markdown 粘贴转换、表格控件、图片块、代码块高亮、悬浮工具栏......全要自己写。写到第 50 个文件的时候，你会开始怀疑人生。
用现成的：省事，但大多自带一套视觉。你的项目是手绘风，它给你的是 Notion 风；你想接入自己的上传接口和 AI，它的后端约定和你对不上。改皮的成本，很快就会超过自己写的成本。

所以我用 vibe coding 做了 TipKit ：把编辑器的逻辑和皮肤彻底拆开------逻辑层零视觉样式，视觉全部收敛在主题层。同一份代码，换一个 CSS 文件就是另一种风格。

先玩再读 ：在线演示（支持三种主题实时切换）👉 https://tipkit-delta.vercel.app/demo

核心设计一：主题系统，换 CSS 就是换风格

内置三套皮肤，接入时各对应一个 CSS 文件和一个类名：

typescript 复制代码

import "@tipkit/themes/default.css"; // shadcn 标准  → tk-theme-default
import "@tipkit/themes/sketch.css";  // 手绘线框风  → tk-theme-sketch
import "@tipkit/themes/dark.css";    // 暗色        → tk-theme-dark

复制代码

 <TipKitEditor className="tk-theme-sketch" /* ... */ />

不换组件、不换 props，只换 import 和类名。想要自己的设计系统？复制一份主题 CSS 改变量就行。

核心设计二：开箱即用，22 种节点

输入 / 唤起斜杠菜单，22 种内容节点直接用：

类别	能力
基础	标题、列表、任务列表、引用、对齐、字号/字体/颜色/高亮、上下标
块级	表格（列宽拖拽 + 全选 + 只读缩放）、代码块（高亮 + Mermaid 实时渲染）、图片块（四角手柄调宽 + 预览）、附件、视频、iframe
布局	分栏、折叠块、Callout 提示块、目录节点、水平分隔线
内容增强	KaTeX 公式、Emoji 完整库（`:xxx` 短代码）、脚注、状态标签、画板
AI 与协作	AI 流式生成、划词评论、UniqueID 块级锚点
文档工具	查找替换（装饰高亮）、LanguageTool 语法检查

Markdown 体验也是完整的：粘贴 Markdown 自动转换，输入 #、- 、```即时变节点；导出方向支持 JSON ↔ HTML ↔ Markdown 双向序列化。

核心设计三：依赖注入，内核不认识你的项目

上传、AI、公式渲染、评论存储------这些天然属于"你的项目"的能力，内核一概不碰，全部通过一个 EditorDeps 接口注入：

ts 复制代码

interface EditorDeps {
  uploadImage?: (file: File, editor: Editor) => Promise<string>;
  uploadAttachment?: (file: File, editor: Editor) => Promise<AttachmentMeta>;
  renderKatex?: (tex: string, displayMode: boolean) => Promise<string>;
  ai?: AIProvider;        // AI 流式生成 provider
  t?: Translate;          // i18n，缺省中文词典
  onCommentCreate?: (range: CommentRange) => void;
  onCommentClick?: (commentId: string) => void;
}

tsx 复制代码

<TipKitEditor deps={{ uploadImage: (file) => myUploadApi(file) }} /* ... */ />

扩展内部禁止直接调用项目 API 或全局变量------这条约束保证了同一份编辑器代码可以原样跑在你的项目、我的项目和任何项目里。

适合谁，以及边界

适合：

需要功能完整、但视觉必须跟自己设计系统走的 React 项目（博客、知识库、CMS 后台）
已经在用 Tiptap v3、不想再自己组装周边设施的项目
想给编辑器接 AI 生成 / 评论，但后端必须自己做主的项目

边界（说清楚，免得踩坑）：

不内置后端：存储、权限、上传服务由你的项目负责（通过 EditorDeps 注入）
不内置实时多人协同：需要的话得自己接协同方案
移动端专项优化跟随消费方，未做专项适配
当前版本 0.3.x，API 还会调整，生产使用建议锁版本

链接汇总

资源	地址
GitHub	https://github.com/xie392/tipkit
在线演示	https://tipkit-delta.vercel.app/demo
接入文档	https://tipkit-delta.vercel.app/docs
npm	`@tipkit/editor` 等 6 个包

MIT 协议。如果 demo 玩着觉得有意思，去 GitHub 给个 star；如果正好在选型，欢迎接入试试，遇到问题直接提 issue。