Office Word
@ap666/office-word 是一个基于 Vue 3 + Tiptap 3 的在线文档式富文本编辑器组件,目标是提供接近在线文档产品的编辑体验,同时保持业务接入的可控性。
当前组件已经覆盖:
- 常规富文本编辑
- 文档式排版与大纲
- 预览模式
- PDF / 图片 / HTML / 打印导出
- 图片、视频、文件、本地文件插入
- Yjs 协同编辑
适用场景
- 在业务系统中嵌入一个现成的在线文档编辑器
- 需要保留大纲、分页阅读、打印、演示等文档体验
- 需要业务侧自己控制上传接口和文件平台
- 需要多人协同编辑、远程光标和共享内容状态
- 需要把编辑能力裁剪成更轻的业务定制版本
产品特点
- 文档式体验:支持标题、大纲、章节跳转、打印、演示和预览
- 接入成本低:默认从组件入口自动带样式,无需额外手动引入 CSS
- 输出能力完整:支持导出 PDF、图片、HTML,以及内容区打印
- 业务可控:上传、下载、鉴权、存储全部交由业务层处理
- 协同能力可选:同一组件同时支持单人模式和基于 Yjs 的协同模式
- 功能可裁剪:通过白名单 Props 控制导出项、插入菜单项和工具栏动作
主要能力
文本编辑
- 标题、正文
- 字体、字号
- 颜色、高亮
- 加粗、斜体、下划线、删除线
- 上下标、行内代码
结构排版
- 无序列表
- 有序列表
- 任务列表
- 对齐
- 缩进
- 引用
内容插入
- 图片
- 视频
- 文件
- 本地文件块
- 链接
- 表格
- 分栏
- 公式
- 高亮块
- 倒计时
- Emoji
- Markdown 导入
文档辅助
- 左侧或右侧大纲
- 当前章节高亮
- 点击大纲跳转
- 预览模式
输出能力
- 导出 PDF
- 导出图片
- 导出 HTML
- 内容区打印
展示能力
- 演示模式
- 全屏
- 激光笔光标
- 统一背景
- 移动端预览缩放
协同能力
- 基于
Yjs的共享文档编辑 - 可选接入
y-websocket等 provider - 支持远程光标和远程选区显示
- 单人模式和协同模式共用同一个组件 API
对外能力
- 通过实例方法插入图片、视频、文件、本地文件
- 可打开本地文件选择器
- 可监听本地文件上传、下载事件