为什么选择这个编辑器?
问题
构建一个好用的邮件编辑器并不容易。现有方案通常存在这些问题:
- 价格昂贵:Unlayer 每月收费 $250-2000,自定义区块和 Merge Tags 等能力还被放在 $750+/月套餐中。
- 不是 Vue 原生:很多编辑器只是框架无关的 wrapper,无法充分利用 Vue 的响应式和组合式能力。
- 闭源:无法定制内部行为,也无法自行修复问题。
我们的方案
@fpfe-group/email-editor-ai 是一个 Vue 3 原生、MJML 驱动、开源的邮件编辑器,目标是免费提供付费方案中的关键能力。
对比
| 功能 | 本编辑器 | Unlayer | Beefree | GrapesJS |
|---|---|---|---|---|
| 价格 | 免费(MIT) | $250-2000/月 | 付费 tiers | 免费(BSD) |
| Vue 3 原生 | 是 | Wrapper | 否 | 否 |
| 开源 | MIT | 否 | 否 | BSD |
| MJML 渲染 | 内置 | 否 | 否 | Plugin |
| TypeScript | 完整 | 部分 | 否 | 部分 |
| 插件系统 | 是 | $750+/月 | 付费 | 是 |
| i18n | 175+ keys | 有限 | 有限 | 手动 |
| 主题定制 | 25 个 CSS 变量 | 有限 | 有限 | 手动 |
| 预置区块 | 43 | 约 20 | 约 30 | 约 10 |
| 命令式 API | 18 个方法 | 基础 | 基础 | 复杂 |
| 测试 | 102 | 未知 | 未知 | 有 |
核心优势
Vue 3 Composition API
编辑器完全基于 Vue 3 Composition API 构建。每个核心功能都是可理解、可调试、可扩展的 composable:
useEmailDocument:文档树管理。useEmailHistory:带响应式状态的撤销/重做。useEmailSelection:节点选中状态追踪。useEmailEvents:类型化事件系统。usePluginRegistry:插件注册。
MJML 驱动
与直接生成 HTML table 的编辑器不同,本编辑器基于 MJML 工作。MJML 是响应式邮件领域的通用标准,这意味着:
- 邮件能在 所有主流客户端 中正确渲染(Gmail、Outlook、Apple Mail 等)。
- 文档模型清晰且语义化。
- 可以导入/导出标准 MJML。
为扩展而设计
插件系统允许你:
- 添加自己的自定义区块和 factory。
- 注册新的区块分类。
- 覆盖属性编辑器。
- 添加工具栏按钮。
- 添加侧边栏面板。
- 监听所有编辑器事件。
以上都不需要 fork 项目。
