打造你自己的拖放式邮件编辑器，基于 GrapesJS

这是本页上运行的真实 GrapesJS 编辑器——不是视频，也不是截图。从右侧拖入一个块，选中任意元素即可重新设置样式，切换到手机宽度，然后把生成的标记读出来。页眉和页脚是锁定的，与下面章节讲解的模式完全一致。

拖放邮件构建器是一种可视化编辑器，允许用户用可重复使用的组件创建邮件布局，而无需手动编写HTML表格和针对邮件的CSS。

区别在于谁必须知道规则。没有构建器，写邮件的人需要知道布局是嵌套表格完成的，大部分样式必须是内联的，且一个客户端的边距会压缩设计。有了构建器，规则只需你编码一次，分成块和组件，其他人只需整理。

<table role="presentation" cellpadding="0" cellspacing="0" width="600">
  <tr>
    <td style="padding:32px;font-family:Arial,sans-serif">
      <h1 style="margin:0 0 12px;font-size:26px">欢迎</h1>
      <p style="margin:0;font-size:15px;line-height:1.6">您的内容......</p>
    </td>
  </tr>
</table>

构建器不是为了让邮件变得简单。它负责让别人做出难的决定——你一次性做出的，在组件层面。

网页运行在一个你大致可以理解的浏览器中。邮件运行在收件人打开的客户端中，而该客户端可能会重写你的标记、去除样式，或者用完全不同的引擎排版。因此，电子邮件构建器必须限制用户能产出的内容，而不仅仅是让生产过程愉快。

你不是在构建一个能产出漂亮HTML的编辑器。你是在打造一个无法产生危险HTML的编辑器。

客户端行为会随着发布和渲染模式变化，因此本页没有针对每个客户端的支持矩阵。验证你自己用户实际使用的客户端和功能。最后评测时间为2026-09-03。

GrapesJS 从不与你的数据库或邮件提供商通信。它会给你一份文档;之后的一切都是你的架构。

三位所有者，没有重叠。本页主题中最常见的架构错误是期望编辑在右侧栏做些什么。

右侧两列并不是 GrapesJS 的缺失——这些事情从来就不是编辑器的职责。从第一个迭代开始就把它们当作应用层的工作，集成才能保持简单。

有三个工件来自同一个画布，它们不能互换。一个是你保留的项目，另一个是你从中生成的交付格式。

JSON 是项目。HTML 和 MJML 是交付。存储第一个，生成其他。

不要给用户一张空白画布和一个 div。先发布一小组组件，这些组件已经编码了表格标记、内联样式和备用，然后让用户自行排列。这十个组件涵盖了大部分营销和生命周期邮件的实际需求。

• 页眉

  标志、品牌条、前置标题文字。通常会被锁定，所以每封邮件都保持相同的身份。

• Hero

  标题、辅助行和一个动作。大小使消息在不加载图像的情况下依然存在。

• 正文

  一个带有真实字体备用堆栈和行高的段落块，能在手机宽度下保持。

• 图片

  固定宽度、明确尺寸和必填替代文本，所以被屏蔽的图片仍然能保持邮件可读。

• 按钮

  基于表格的按钮而非样式锚点——区别在更严格的客户端中可见。

• 双列段

  一个表格行，在窄视口下自动堆叠，堆叠顺序由你预先决定。

• 产品卡

  图片、名称、价格和链接，由后台填充的字段驱动，而不是复制粘贴。

• 社交关系

  一排固定的图标和网址，可以通过设置编辑，而不是标记。

• 分隔线

  用表格边框而不是 <hr> 元素画出的分隔线——多个邮件客户端会重新渲染 <hr>。

• 页脚

  发送者身份、地址和退订链接。通常是锁定的，因为这些是义务。

组件是定义;块是用户将组件放到画布上的方式。块库是你控制人们能构建什么的最有力杠杆——也是最容易因慷慨而出错的杠杆。

GrapesJS 中的锁定不是一个模式或计划层级——它是组件定义上的一组选项。锁定区域仍然会渲染、导出，并且在编辑器中拒绝拖拽、删除或重新样式。

这些选项控制编辑器UI。它们不是授权。直接发布到你的存档端点的修改项目仅受服务器验证的约束——所以每次都要验证后端的结构、所需区域和允许字段。

个性化邮件有两个独立的问题：让用户在不知道语法的情况下放置占位符，以及在发送时用真实数据解决占位符。编辑器解决了第一个问题。只有你的应用程序能解决第二个问题。

GrapesJS 提供编辑体验。你的后台在邮件渲染或发送时解析动态数据和合并标签。

两种宽度几乎涵盖了设计审查的全部内容：邮件写作的宽度和手机宽度。两者在编辑器中只需切换设备即可，且都不等同于测试。

编辑器内预览是浏览器渲染画布标记。邮件客户端通过自身引擎渲染该标记的转换版本，两者可能有所不同。预览用于设计审查;种子列表或渲染服务用于兼容性。

大多数邮件灾难并不是渲染bug。它们是链接断裂、合并标签未填或取消订阅缺失。这三种情况在服务器上发现成本低，收件箱发现成本高。

这个架构没有要求你更改发送邮件的方式。编辑器生成文档;你的后端渲染文档并交给你已经付费的供应商。

GrapesJS 是编辑器，不是你的邮件投递服务。

GrapesJS 和 GJS.Market 均未与上述任何供应商集成，也不意味着有合作关系。交付能力、认证和抑制处理仍由您的服务提供商和应用负责。

这不是判断，而是范围检查。每一行都是邮件生成器需要的。左列是你自己拥有的工作;右列是GrapesJS在你写组件前给你的。

“可用”意味着该能力随核心一同发布，只需配置，而不必从零构建。但这并不意味着不需要工作：任何认真的邮件构建器都要定义自己的组件、限制自己的样式，并编写自己的存储适配器。已于 2026-09-03 针对 grapesjs 0.23.6 验证。

GJS.Market目录中的真实商品，按所属组装阶段分组。名称、价格和图片直接来自市场，所以你看到的就是今天实际出售的商品。

邮件基础

什么能让页面编辑器变成电子邮件编辑器：基于表格的模块、邮件形状的Style Manager、导入和导出。

浏览该类别

Newsletter Preset

通讯预设：表格部分、面向电子邮件的 Style Manager 以及导出时内嵌 CSS 的命令。

免费查看插件

MJML Preset

作者时在画布里放MJML组件，然后读回MJML进行编译。

免费查看插件

用户拖拽的块

现成的邮件板块，以及允许用户保存自己邮件的功能。

浏览该类别

GrapesJS Email Blocky – Premium Responsive Email Blocks

设计出一套响应式邮件块，这样你的第一个块库就不是空白列表。

¥496.80查看插件

Users Blocks

允许用户将自己的编排保存为可复用的块，而无需触及组件代码。

¥424.80查看插件

模板

一个起点库，这样没人会从空白的画布开始发邮件。

浏览该类别

Templates Manager

编辑器中的模板记录——保存、列出、加载和克隆起始点。

¥280.80查看插件

逃生舱口

对于邮件中必须手写的唯一部分——追踪像素、供应商专用的块、法律提供的摘录。

浏览该类别

Grapesjs Component Code Editor

编辑单个选中的组件的标记，无需打开整个文档。

免费查看插件

Code Editor

完整的HTML和CSS视图，方便需要准确看到将发送的内容。

免费查看插件

图片与上传

一个资产管理公司，存储比草稿还长，因为坏掉的图片网码就是坏邮件。

浏览该类别

Grapesjs Cloudinary

用Cloudinary支持资产管理，这样邮件图片就有一个永久且可转换的URL。

免费查看插件

Grapesjs Uppy

在资产管理人面前上传一个UI，包含进度、重试和多个来源。

免费查看插件

Filestack

把默认上传器换成Filestack，包括自己的选择器和变换功能。

免费查看插件

存储与autosave

项目JSON的所在地，以及编辑被允许多久写一次。

浏览该类别

Grapesjs Firebase Storage

在不先写存储适配器的情况下，将 JSON 项目持久化为 Firebase。

免费查看插件

Directus Storage

将电子邮件项目与内容模型的其他部分一起保留在Directus中。

免费查看插件

Storage Rate Limit

有速率限制的保存，所以一次编辑需要一个请求，而不是几十次。

免费查看插件

发送邮件

导出完成的文档以便交接、审核或提交现有的构建流程。

浏览该类别

Export Zip

免费查看插件

作品的形状，以及正确的顺序。每个步骤都链接到正确覆盖的指南——本页是地图，不是教程。

1. 1

   初始化编辑器

   先把GrapesJS挂载在容器上，设置两个设备对邮件的需求，然后先关闭默认的本地存储。

   GrapesJS 设置指南 →
2. 2

   定义电子邮件组件

   写出基于表格的邮件组件，限制样式，并以块形式展示每个组件。

   电子邮件组件深入解析 →
3. 3

   添加模板

   给用户一个起点。将模板存储为项目JSON，使用时克隆模板，而不是编辑原始模板。

   模板系统 →
4. 4

   存储项目

   针对你的API实现存储适配器，这样草稿、autosave及其版本由你自己定义。

   存储插件 →
5. 5

   渲染与发送

   发送时生成标记，服务器端解析合并标签，然后把结果交给你的提供商。

   寻求搭建帮助 →

import grapesjs from 'grapesjs';
import newsletter from 'grapesjs-preset-newsletter';

const editor = grapesjs.init({
  container: '#email-editor',
  height: '100%',
  // Email is authored at a fixed width; give users one extra viewport
  // to check, not a full responsive breakpoint set.
  deviceManager: {
    devices: [
      { id: 'desktop', name: 'Desktop', width: '' },
      { id: 'mobile', name: 'Mobile', width: '375px' },
    ],
  },
  // Curated blocks only: the preset's table sections, plus your own.
  plugins: [
    (ed) => newsletter(ed, { inlineCss: true, showBlocksOnLoad: true }),
  ],
  // Point the editor at your API rather than the browser's localStorage.
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 10,
  },
});

// An email-safe button: users edit the label and the link,
// never the table markup that makes it render in Outlook.
editor.DomComponents.addType('email-button', {
  isComponent: (el) => el.dataset?.type === 'email-button',
  model: {
    defaults: {
      draggable: '[data-gjs-type="cell"], td',
      // Users may recolour it; they may not restyle it into a div.
      stylable: ['background-color', 'color', 'border-radius'],
      traits: [
        { name: 'href', label: 'Link' },
        { name: 'label', label: 'Button text' },
      ],
      components: `
        <table role="presentation" cellpadding="0" cellspacing="0">
          <tr><td><a href="#">Read the update</a></td></tr>
        </table>`,
    },
  },
});

两个采样都运行在grapesjs 0.23.6上。“grapesjs-preset-newsletter”和“grapesjs-mjml”是独立的BSD-3-Clause封装——核心不含邮件预设——所以安装与你上面选择的输出格式相符的格式即可。

什么区别于一个可用的演示和一个可以交给客户的邮件生成器？这里的所有内容都是你的工作，不是编辑器的。

电子邮件构建器接受用户自创的标记并发送给第三方。这种组合比典型的CRUD功能更值得关注。

• ✕风险

  信任编辑器施加的限制

  锁定区域、受限样式和隐藏块都存在于浏览器中。精心制作的请求可以发布任何它喜欢的项目。

  ✓该怎么办

  验证服务器上已保存的项目：有需要的区域、允许列表中的组件类型、在范围内的字段。

• ✕风险

  发送未经消毒的自定义代码

  代码嵌入组件是每个邮件构建器都会收到的功能请求，它是一个指向客户收件箱的注入面。

  ✓该怎么办

  净化存储的标记，并在渲染时重新净化。限制代码组件的使用权限，并记录每次使用。

• ✕风险

  接受任何上传的文件

  编辑上传的邮件最终会被放在与邮件存续时间相同的公开网址上。

  ✓该怎么办

  在服务器上验证类型和大小，重新编码图像，并从不携带会话 Cookie 的域名中提供资源。

• ✕风险

  导致发送端点保护不足

  渲染和发送是昂贵且不可逆的操作。它们通常比编辑器路线保护得不那么严格。

  ✓该怎么办

  按模板和收件人列表授权，限制速率发送，并在发送给完整受众前要求第二次检查。

• ✕风险

  针对范围内的合并标签解析

  宽松模板渲染器会乐意插值发送方本不该看到的字段。

  ✓该怎么办

  根据该模板的显式允许列表解析，渲染失败于未知标签，而不是发出该标签。

编辑器是你应用中一个重要的依赖。这些杠杆才是关键，按它们通常的收益顺序排列。

• 懒散地加载编辑器

  只在编辑邮件的路由中导入，且只在浏览器中导入。编辑器的任何内容都不属于服务器渲染或主捆绑包。

• 懒加载可选插件

  代码查看器、图像编辑器或 MJML 编译器可以在用户打开该面板时出现，而不是在初始值时。

• 保持区块图书馆简短

  每个块在启动时都会解析标记，并在调色板中渲染一张卡片。策划的集合既快又安全。

• 为 autosave 加防抖

  通过变更计数而非按键来限速，因此一次打字会生成一个请求，而不是三十个。

• 保持项目数据精简

  通过URL引用资源。项目JSON中的Base64图片会让每次加载、保存和版本副本变得更重。

• 留意自定义组件

  组件逻辑在每次更改时都运行，是导致画布在长邮件中显得迟缓的常见原因。

这里故意不引用任何数据：数字取决于你的块数、组件逻辑和用户硬件。在每次更改前后，在你自己的应用中测量编辑器路由。

既然架构已经清晰，取舍也就很容易说清楚了。托管构建器能更快地摆在客户面前；你自己拥有的构建器则是产品的一项功能，而不是产品的一个依赖。

托管平台之间差异很大，这也是为什么左侧栏写“取决于提供商”，而不是一概而论。请查看具体供应商关于数据位置、保留、定制限制以及离开模板后处理情况的条款。

GrapesJS 渲染成一个普通的 DOM 元素，因此整合它取决于哪个生命周期钩子调用 init，哪个调用 destroy。你的框架驱动你的应用;GrapesJS 驱动可视化邮件编辑层。

• React挂载一个效果，保持容器不进入React的渲染路径，并将编辑器实例保持在参考中。
• Vue从onMounted开始，从onUnmounted中摧毁，容器作为普通模板参考。
• Angular用 ngAfterViewInit 对 ViewChild 元素发酵，用 ngOnDestroy 进行破坏。
• Next.js仅限客户端。动态导入时禁用 SSR——模块在导入时触及窗口。