介绍
Elegant Editor 是一个现代化的富文本编辑器,基于 TipTap 构建。它提供了一个框架无关的核心包,以及 Vue 3 适配器和导出工具包。
特性
🎨 框架无关
核心包 @frame-flex/core 不依赖任何前端框架,可以在任何 JavaScript 项目中使用。无论你使用的是 Vue、React、Angular 还是原生 JavaScript,都可以轻松集成。
⚡️ Vue 3 支持
@frame-flex/vue 包提供了完整的 Vue 3 支持:
RichTextEditor组件 - 开箱即用的编辑器组件useEditorComposable - 灵活的编辑器管理- Vue NodeView 组件 - 自定义节点渲染
- TypeScript 类型支持
📦 模块化设计
采用 Monorepo 架构,将功能分为三个独立的包:
- @frame-flex/core - 核心编辑器逻辑
- @frame-flex/vue - Vue 3 适配器
- @frame-flex/exporters - 导出工具(HTML/DOCX/XML/JSON)
按需引入,减小最终打包体积。
🔧 TypeScript
所有包都提供完整的 TypeScript 类型定义,提供优秀的开发体验和类型安全。
📝 丰富功能
支持多种内容类型:
- 标题 (H1-H6)
- 段落、粗体、斜体、下划线
- 列表(有序/无序)
- 表格
- 代码块(支持语法高亮)
- 数学公式(KaTeX)
- 链接和图片
- 自定义容器
- 更多...
💾 多格式导出
通过 @frame-flex/exporters 包导出多种格式:
- HTML - 完整文档或片段
- DOCX - Microsoft Word 文档
- XML - 结构化数据
- JSON - TipTap JSON 格式
🎯 易于扩展
基于 TipTap 的强大扩展系统:
- 轻松创建自定义扩展
- 扩展现有功能
- 添加自定义节点和标记
- 完整的 API 支持
浏览器支持
Elegant Editor 支持所有现代浏览器:
- Chrome (最新版)
- Firefox (最新版)
- Safari (最新版)
- Edge (最新版)
注意
不支持 IE11 及更早版本的浏览器。
包大小
所有包都经过优化,保持小巧的体积:
| 包名 | ESM | CJS | Gzipped |
|---|---|---|---|
| @frame-flex/core | 58.82 kB | 34.22 kB | ~15 kB |
| @frame-flex/vue | 10.08 kB | 7.66 kB | ~3.3 kB |
| @frame-flex/exporters | 12.44 kB | 11.09 kB | ~4.8 kB |
总计: ~81 KB (未压缩), ~23 KB (Gzipped)
许可证
Elegant Editor 使用 MIT 许可证。你可以自由地在个人或商业项目中使用。