富文本编辑器
用于知识库、笔记和业务内容录入，支持图文、表格、媒体与附件。
本页内容
Rich Text 基于 Vue 3 与 Tiptap 3，适合知识库、产品说明、笔记和业务内容录入。它以内容块组织文档，支持结构化 JSON、HTML 输出和 .nordox 原生文件。
可以完成什么
| 功能 | 使用场景 |
|---|---|
| 文字与段落 | 标题、列表、颜色、字体格式及选区气泡菜单 |
| 内容块 | 引用、高亮块、代码块、分割线、公式和倒计时 |
| 表格 | 内容编辑、表格样式和主题色 |
| 媒体与附件 | 图片、视频、文件预览和本地文件卡片 |
| 内容导航 | 内置大纲或独立的 RichTextOutline 目录组件 |
| 提及与评论 | 结构化 @ 提及、评论锚点及评论事件，与业务用户和数据库连接 |
| 显示配置 | 菜单与功能 Key、文案、水印及预览模式 |
| 文件输出 | HTML、PDF、图片和 Nordox；普通保存使用完整 JSON |
| AI 局部修改 | 选区或内容块级修改、受限属性操作、局部流式预览 |
一个知识库页面的流程
用标题建立内容结构，插入说明文字、表格和附件。编辑时将完整 JSON 保存到业务数据库；阅读时切换预览模式，并按需要放置独立目录。评论正文、作者和回复由评论数据库维护，编辑器内容中保留关联锚点。
保存格式怎么选
- JSON： 日常自动保存、加载和继续编辑。保留 Tiptap 文档结构。
- HTML： 输出网页内容。不要把任意 HTML 当作无损往返存档。
- PDF / 图片： 供阅读或分享的输出。
- Nordox： ZIP 形式的原生文件，可按策略嵌入或引用图片、视频、附件。
上传不是编辑器自带的云服务。上传 hook 和媒体插入方法需要接入你的资源服务，图片、文件 URL 必须在重新打开文档时仍可访问。
接入前要知道
包名是 @norio-office/rich-text，虽然源码目录历史上位于 packages/office-word，也不要把它当作 Word 组件安装。Vue 需要 3.5+，Tiptap 相关依赖应保持兼容的 3.x 版本。
多人协作需要 Docker 版本及 Yjs 绑定。单人示例中的 localStorage 保存和初始内容回填不能直接作为多人协作同步方案。
内容依据组件公开文档 · 2026-10-25常见问题