推出一个用户值得信赖的现代邮件生成器
将GrapesJS与MJML插件结合,实现拖放编辑、响应式输出,以及对模板、数据和集成的完全所有权。没有每次发送的平台税,没有隐藏的功能门槛,也没有锁定。
100%所有权
自托管架构与数据
MJML准备
主要客户端的响应式输出
API灵活
适用于任何ESP工作流程
快速返船
满足常见需求的插件生态系统
为什么使用GrapesJS来处理电子邮件——五个理由,而不是托管工具
没有按次发送收费
托管邮件构建器通常按发送的邮件或订阅者收费。有了GrapesJS,开发者完全归你所有——集成任何ESP,只为你发送的内容付费。
拥有你的数据
电子邮件模板、用户偏好和导出历史都会留在您的基础设施中。第三方无法访问你的模板或客户数据。
自定义方块
构建无限定制的品牌模块——产品卡、活动横幅、动态内容区——并完全控制HTML输出。
自托管
将邮件构建器部署到您自己的服务器、VPS或云环境中。没有依赖SaaS,没有价格层级变化,没有功能限制。
与任何API集成
直接连接Mailchimp、SendGrid、Postmark或您自己的电子邮件投递服务。GrapesJS 是中立的——输出是干净的 HTML 和 MJML。
这个建造者最适合谁
SaaS 产品团队
添加应用内模板编辑器,让客户无需工程支持即可设计生命周期、入职和营销邮件。
代理机构与制片厂
创建可重复使用的品牌模板系统,包含锁定部分、可编辑区域和可批准导出功能。
内部成长团队
通过预批准的模块、更安全的编辑限制和一致的响应输出,运行更快的活动。
MJML 集成——为什么它解决了电子邮件渲染问题
电子邮件HTML向来难以在客户之��准确传递。Gmail 会剥离某些 CSS 属性。Outlook 使用 Microsoft Word 的渲染引擎。Apple Mail 的处理方式又不同。结果是:开发者花费数小时调试基于表格的布局,而这些布局在某个客户端中看起来都存在缺陷。
MJML 通过提供一组语义组件——mj-section、mj-column、mj-text、mj-image——解决了这个问题,这些组件可以编译成经过实战考验的 HTML 表格布局。GrapesJS MJML 插件将这些组件映射到可拖拽的块上,为用户提供一个可视化编辑器,自动输出跨客户端响应式邮件 HTML。
GrapesJS 电子邮件预设初始化
以下示例用新闻通讯预设插件初始化了GrapesJS,并演示如何从编辑器中检索HTML、CSS和MJML输出。
import grapesjs from 'grapesjs';
import grapesjsNewsletterPlugin from 'grapesjs-preset-newsletter';
import { loadFunnelTranslations } from '@/lib/i18n-page';
import type { GetStaticProps } from 'next';
import { useTranslation } from 'next-i18next';
const editor = grapesjs.init({
container: '#editor',
plugins: [grapesjsNewsletterPlugin],
pluginsOpts: {
[grapesjsNewsletterPlugin]: {
// Newsletter plugin options
modalLabelImport: 'Paste all your code here below and click import',
modalLabelExport: 'Copy the code and use it wherever you want',
},
},
storageManager: false,
});
// Get HTML output
const html = editor.getHtml();
const css = editor.getCss();
// Get MJML output (with MJML plugin)
const mjml = editor.runCommand('mjml-export');在GJS上发送Builder插件。市场
GrapesJS MJML
基于MJML的响应式邮件模板,使用拖放功能
通讯预设
预设的通讯块、版块和栏目布局
电子邮件预览插件
跨桌面和移动视口预览邮件
动态内容块
合并标签支持和条件内容块
ESP 导出插件
直接导出模板到 Mailchimp、SendGrid 或 Postmark
HTML邮件内联
自动内联CSS,以实现最大邮件客户端兼容性
实用启动路线图
嵌入编辑器
在你的应用中使用 Mount GrapesJS,配合通讯和 MJML 插件,让用户可以从邮件安全的模块开始。
存储项目 JSON
Save editor.getProjectData() 用于自动保存、版本历史和跨会话恢复草稿。
导出和验证
编译成HTML/MJML,内联CSS,运行客户端预览,然后再交给你的ESP。
船舶集成
连接Mailchimp、SendGrid、Postmark或内部API,实现模板同步和活动工作流程。
电子邮件输出格式
HTML
最兼容标准HTML输出带内联样式。兼容所有电子邮件客户端。使用 editor.getHtml() 和 editor.getCss() 来获取输出。
MJML
推荐阅读MJML 是一种可编译为响应式 HTML 的标记语言。使用 GrapesJS MJML 插件,用户使用 MJML 组件构建并导出干净、客户端安全的 HTML。
JSON
用于存储GrapesJS 将画布存储为 JSON 组件树。使用 editor.getProjectData() 在数据库中编程保存和恢复模板。