Skip to content

介绍

Elegant Editor 是一个现代化的富文本编辑器,基于 TipTap 构建。它提供了一个框架无关的核心包,以及 Vue 3 适配器和导出工具包。

特性

🎨 框架无关

核心包 @frame-flex/core 不依赖任何前端框架,可以在任何 JavaScript 项目中使用。无论你使用的是 Vue、React、Angular 还是原生 JavaScript,都可以轻松集成。

⚡️ Vue 3 支持

@frame-flex/vue 包提供了完整的 Vue 3 支持:

  • RichTextEditor 组件 - 开箱即用的编辑器组件
  • useEditor Composable - 灵活的编辑器管理
  • 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 及更早版本的浏览器。

包大小

所有包都经过优化,保持小巧的体积:

包名ESMCJSGzipped
@frame-flex/core58.82 kB34.22 kB~15 kB
@frame-flex/vue10.08 kB7.66 kB~3.3 kB
@frame-flex/exporters12.44 kB11.09 kB~4.8 kB

总计: ~81 KB (未压缩), ~23 KB (Gzipped)

许可证

Elegant Editor 使用 MIT 许可证。你可以自由地在个人或商业项目中使用。

下一步

Released under the MIT License.