我做了一个 Vue3 文档级富文本编辑器：eeed-editor，聊聊它解决了什么问题
最近我把自己做的一个 Vue3 富文本编辑器整理发布了出来，名字叫 eeed-editor。
它不是一个从零发明编辑内核的项目，而是基于 Tiptap 做了一层更贴近业务场景的封装。
项目地址：
官网：
GitHub：
npm：
为什么要做这个项目？
原因很简单：业务项目里的富文本编辑需求，往往比想象中复杂。
刚开始可能只是：
“这里放一个富文本编辑器。”
但很快就会变成：
- 要支持 A4 文档
- 要能导出 Word
- 要能导出 Markdown
- 要支持代码块
- 要支持公式
- 要支持 Mermaid
- 要支持图片上传
- 要有保存回调
- 要支持只读预览
- 要能嵌入表单
- 要移动端精简工具栏
- 要大纲
- 要保存成功提示
- 要和现有后台系统融合
这些需求拆开看都不难，但合在一起之后，每个业务项目都重新处理一遍就很浪费。
所以我想做一个更偏业务使用的 Vue3 文档编辑组件。
eeed-editor 的定位
我给它的定位是：
面向业务文档编辑场景的 Vue3 富文本编辑器。
这里有两个关键词。
第一个是“业务文档”。
它不是单纯给博客写文章，也不是只给评论框用，而是更偏向后台管理系统、OA、知识库、审批、合同、报告、技术文档这些实际业务场景。
第二个是“场景”。
我不希望它只是把工具栏功能堆出来，而是能直接覆盖几类常用场景：
- A4 文档编辑
- 表单富文本字段
- 移动端精简编辑
- 只读预览
- 技术文档编辑
- 知识库内容编辑
目前已经支持什么？
目前 eeed-editor 已经支持：
- Vue3 组件接入
- 样式自动注入
- 普通文档模式
- A4 文档模式
- 标题栏
- 工具栏
- 精简工具栏配置
- 标题大纲
- 代码块高亮
- 代码复制
- 数学公式
- Mermaid 图表
- 图片上传
- Markdown 粘贴
- Word 导出
- Markdown 导出
- 保存回调
- 上传回调
- 内容变更回调
- 只读模式
安装：
npm install eeed-editor
接入：
import eeedEditor from "eeed-editor";
现在不需要手动引入样式文件，组件样式会自动注入。
一个我比较在意的细节：容器约定
富文本编辑器如果只是普通输入框，容器要求不高。
但文档级编辑器不一样，它会涉及：
- 工具栏
- 标题栏
- A4 页面
- 大纲
- 滚动区域
- 页面背景
- 编辑区域定位
所以 eeed-editor 要求外层容器设置明确宽高和 position: relative。
.editor-wrapper {
position: relative;
width: 100%;
height: 720px;
}
这个约定看起来很小，但能避免很多“页面高度不对”“工具栏覆盖内容”“A4 区域错位”的问题。
谁适合使用它？
我觉得下面这些项目可以考虑：
- Vue3 后台系统
- OA 系统
- 审批系统
- 合同编辑系统
- 报告生成系统
- 企业知识库
- 技术文档平台
- 内容管理系统
- 需要嵌入富文本字段的表单系统
如果只是一个轻量评论框，可能用更轻的编辑器就够了。
但如果你要的是一个能处理业务文档的编辑组件，eeed-editor 会更合适。
后续计划
我后面会继续优化几个方向：
- 首屏加载性能
- 编辑器包体积
- 更多场景 demo
- 更完整的配置文档
- 更稳定的导出能力
- 更自然的移动端编辑体验
- 更多业务系统接入示例
这个项目也会持续更新。
总结
做 eeed-editor 的过程，其实是在把“富文本编辑器”往“业务文档编辑器”这个方向推进。
我希望它解决的问题不是“能不能编辑文字”，而是：
开发者能不能更快地在 Vue3 项目里接入一套完整、稳定、贴近业务的文档编辑能力。
欢迎试用，也欢迎提建议。
官网：
GitHub：
npm：
推荐标签：Vue3、开源项目、富文本编辑器、前端开发、Tiptap
