分享：开发了一个 Vue 3 富文本编辑器 UI Kit，支持 AI 续写和多主题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 67 天前的主题，其中的信息可能已经有所发展或是发生改变。

各位 V 友好！

开发了一个 Vue 3 的富文本编辑器组件库，分享给大家。

在线体验

https://tiptap-ui-kit.vercel.app

主要特性

5 种主题

默认主题（现代简洁）
Word 主题（微软 Word 风格）
Notion 主题（极简风格）
GitHub 主题（ Markdown 风格）
Typora 主题（专注写作）

AI 功能

续写文章
润色文本
多语言翻译
内容总结

支持 OpenAI 、Claude 、DeepSeek 、阿里云等 AI 服务商。

其他特性

实时协作（基于 Yjs ）
A4 文档模式 + 自动分页
亮色/暗色模式
完整 TypeScript 支持
45+ Vue 组件

技术栈

Vue 3.5 + Tiptap 3 + TypeScript

购买链接： https://benngai.gumroad.com/l/tiptap-ui-kit-solo

欢迎试用 Demo ，有任何问题或建议都可以留言讨论！

编辑器

主题

功能

12 条回复 2026-02-08 21:37:47 +08:00

jimmy

2 月 2 日

看起来不错，是否支持多实例？即动态生成多个富本文编辑器？

shanch

2 月 3 日

Tiptap 不能分页

Baloneo

2 月 3 日

不错

zhmouV2

2 月 3 日

vercel 这个 demo 黑夜模式看起来有点问题

BigPiggggg

2 月 3 日

自己写的还是 vibe 的

BigPiggggg

2 月 3 日

没有自验过吗兄弟

benngai

2 月 8 日

@jimmy 感谢关注！支持多实例的，每个 TiptapProEditor 组件都是独立的实例，可以在同一页面动态创建多个编辑器，互不干扰。配置、主题、AI
功能都可以独立设置。

benngai

2 月 8 日

@shanch 确实，Tiptap/ProseMirror 原生不支持传统意义上的分页排版。目前提供了 A4 文档模式，通过 CSS
模拟分页效果，满足大部分打印和文档排版场景。如果有强分页需求的话，后续也会持续探索优化方案。

benngai

2 月 8 日

@Baloneo 谢谢！欢迎体验 demo

benngai

2 月 8 日

@zhmouV2 我尽快修复。

benngai

2 月 8 日

@BigPiggggg vibe ，有测过，是有什么 bug 吗

benngai

2 月 8 日

重大更新：项目现已完全开源！

感谢各位 V 友的关注和反馈！

经过深思熟虑，我决定将 Tiptap UI Kit 完全开源，采用 MIT 协议。

为什么开源？
希望更多开发者能用上好工具
相信社区的力量能让项目变得更好
回馈开源社区
现在完全免费
MIT 协议 - 商业项目也可用
完整源代码
所有功能
持续更新
相关链接
GitHub: https://github.com/benngaihk/Tiptap-UI-Kit
在线演示: https://tiptap-ui-kit.vercel.app
文档: https://github.com/benngaihk/Tiptap-UI-Kit#readme
核心特性
5 种主题预设（ Default / Word / Notion / GitHub / Typora ）
AI 智能辅助（续写 / 润色 / 翻译 / 总结）
完善的暗黑模式
Word 模式（ A4 纸张布局，自动分页）
实时协作（基于 Yjs ）
国际化（中英文）
响应式设计
技术栈
Vue 3 + Composition API
Tiptap 3 (ProseMirror)
TypeScript
Ant Design Vue
欢迎贡献
如果你觉得项目有用，欢迎：

Star 支持
提交 Issue
发起 Pull Request
参与讨论
感谢大家的支持！