富文本
@norio-office/rich-text 是一个基于 Vue 3 + Tiptap 3 的富文本编辑器组件，内置文档式编辑界面、图片/视频/文件块、表格、公式、倒计时、高亮块、大纲、预览模式、导出能力，以及可选的 Yjs 协同编辑。
当前组件仍处于持续迭代阶段。用于生产环境前，请结合业务场景做充分测试；发现问题可反馈至
norio-office@qq.com。
适用场景
- 在业务系统中嵌入一个文档式在线编辑器
- 需要图片、视频、附件、表格、公式、Markdown 导入等内容块
- 需要导出 PDF、图片、HTML 或直接打印内容
- 需要只读预览、移动端阅读缩放、大纲导航和演示模式
- 需要由业务侧完全控制上传、下载、鉴权和文件存储
- 需要可选接入多人协同编辑、远程光标和共享文档状态
产品特点
- 文档式体验：内置页面化编辑界面、大纲、预览、演示和全屏能力。
- 内容块丰富：支持图片、视频、文件、本地文件卡片、表格、分栏、公式、高亮块、倒计时、链接、Emoji、分隔线和 Markdown 导入。
- 导出能力完整：支持 PDF、图片、HTML 和打印，水印会保留到 PDF、图片和打印结果里。
- 业务边界清晰：上传 hook 只接收
File并等待业务返回最终 URL，组件不会内置业务上传接口，也不会自动回退为 base64/blob URL。 - 接入方式可裁剪：通过白名单 props 控制导出项、插入菜单项和工具栏动作。
- 协同能力可选：单人模式和
Yjs协同模式共用一套组件 API。
主要能力
文本编辑
- 标题、正文、字体、字号
- 颜色、高亮、加粗、斜体、下划线、删除线
- 上标、下标、行内代码
- 无序列表、有序列表、任务列表
- 对齐、缩进、引用
内容插入
- 图片和视频
- 文件链接/预览块
- 本地文件卡片
- 链接、表格、分栏
- 公式、代码块、高亮块
- 日期、倒计时、Emoji、分隔线
- Markdown 导入
@人员/文档提及
文档辅助
- 左侧或右侧内置大纲
- 可外置的
RichTextOutline目录组件 - 当前章节高亮和点击跳转
- 预览模式和移动端缩放
- 页面水印
输出能力
- 导出 PDF
- 导出图片，支持 PNG/JPEG
- 导出 HTML
- 内容区打印
协同能力
- 基于
Yjs的共享文档编辑 - 可选接入
y-websocket等 provider - 支持远程光标和远程选区显示
- 随包附带最小 Yjs WebSocket 服务示例