用 GrapesJS 构建电子邮件模板构建器

打开一个模板，修改它，然后保存为新模板。书架会增加一个。这个循环——而不是单个设计——是邮件模板构建器给用户带来的。

由GrapesJS项目本身发布的MJML编辑器演示。添加一个部分，编辑文本，然后查看生成的标记。

电子邮件模板构建器允许用户以视觉方式创建和更改邮件布局，而无需手写HTML邮件标记。模板*库*提供完成设计;模板*构建器*提供制作设计的能力——并且在发货后仍能继续制作。

模板为用户提供起点。构建者赋予他们控制权。

图书馆是一个有天花板的书架：它覆盖了它本该覆盖的内容，超过这个线的请求无处可去。建筑者是一个循环——每当有人绕过它，书架就会不断扩大。

• “我们需要周五前收到一封干净的欢迎邮件。”

  翻唱✓

  模板库

  解决了。这正是好图书馆的意义——选一个，改词，发送。

  翻唱✓

  模板构建器

  同样的起点也解决了。建造者船里装有图书馆。

• “每个租户都需要自己的法律基础。”

  未被覆盖–

  模板库

  一个共享的页脚，或者每个租户的模板分支。

  翻唱✓

  模板构建器

  一个页脚块，每个租户保存一次，并在他们的模板中重复使用。

• “把顾客的实际订单写进收据里。”

  未被覆盖–

  模板库

  静态占位文本。数据必须在下游拼接。

  翻唱✓

  模板构建器

  一个绑定到你的订单模型的组件，可以作为一个模块编辑，并在发送时解决。

• “恢复我们上周二发送的版本。”

  未被覆盖–

  模板库

  你现在看到的是被覆盖的文件。

  翻唱✓

  模板构建器

  一个版本行。恢复是一个查询，不是考古项目。

• “让我们的客户自己制作，不用给我们发邮件。”

  未被覆盖–

  模板库

  这不是图书馆的功能——它没有创作界面。

  翻唱✓

  模板构建器

  这就是全部的意义。你的用户创建并保存了你从未见过的模板。

把图书馆送到。然后再把能制造更多图书馆的东西送到去。

用户获得的编辑界面，以及你控制的部分。

给用户一个由多个部分组成的库，而不是让他们从一个空白的画布开始每封邮件。每个都是你注册一次的区块定义。

• 头部

  logo、前置标题文字和导航行（如果你用的话）。

• 首屏

  开场陈述和第一次行动号召。

• 产品网格

  一行或网格的商品绑定到你想要的目录上。

• 功能列表

  简短的图标和文本行用于发布说明和引导。

• 定价

  规划比较布局，以适应基于表格的渲染器。

• 推荐

  一句话，一份署名，还有一个可选的头像。

• 行动号召

  一个防弹按钮，渲染时没有背景图像。

• 页脚

  地址、偏好链接以及你依法必须包含的取消订阅链接。

标准模块覆盖布局。使构建者属于你的是那些知道你数据的组件——订单、订阅、预订、推荐。

1. 标准
2. ↓作曲
3. ↓绑定
4. ↓你的数据模型

编辑器在模板编写时渲染占位符。你的后端在发送时替换真实值。

在模板系统中，模板的区别在于谁拥有它，谁可以更改它——不仅仅是它们的文字。这些课程从一开始就值得建模。

这些是模板系统中的所有权类别，不是出售产品。GJS.Market 列出编辑器插件和预设;不销售电子邮件模板。

在编辑时，预览邮件实际渲染的宽度。600px 是正文列的长期惯例——一种惯例，而非规范。

桌面客户端上的两列，手机上的叠加——是模板决定的，而不是收件人客户端猜测。

电子邮件客户端实现HTML和CSS的方式不同，且一直如此。可视化构建器并不会消除这一点——它标准化了创作步骤，使每次都能得到相同的已知标记。

约束条件已在2026-08-28上验证。行为变化;检查 caniemail.com 当前状态，并将生产邮件与你自己受众实际使用的客户端进行测试。

mjml 的存在是为了让响应式邮件标记成为你自己生成的，而不是手工维护。GrapesJS 可以用 grapesjs-mjml 扩展，在上面添加可视化的编辑界面。

决定你是建造者还是查看者的问题是：用户点击保存后还存在哪些行？三个表格覆盖了这个。

编辑器是一个客户端。它向你的 API 请求模板并交还给你;它永远不会知道你的租户是谁，也从不持有任何东西的唯一副本。

// Storage scoped to the tenant AND the template. The editor never learns who
// the tenant is — your API does, from the session, and refuses everything else.
editor.Storage.add('remote', {
  async load({ templateId }) {
    const res = await fetch(`/api/templates/${templateId}/project`);
    return res.json();
  },
  async store(project, { templateId }) {
    await fetch(`/api/templates/${templateId}/project`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(project),
    });
  },
});

把编辑器和你已经运行的后台集成，而不是把邮件流程转移到别人的平台上。GJS.Market卖编辑器插件——它不托管你的模板，也不发送你的邮件。

一旦第二个客户保存模板，所有权就不再是细节。几乎所有产品都分为三层。

同样的模板系统，指向不同的岗位。

编辑画布是可见的部分。模板系统是其余部分——剩下的就是时间的用处。

模板系统的构成

• 编辑画布
• 拖放
• 区块注册
• 组件模型
• 样式控制
• 响应式预览
• 素材管理
• 模板CRUD
• 版本管理与恢复
• 合并标签验证
• 租户范围界定
• 撤销并重做
• HTML 导出
• MJML 合辑
• 持续的客户测试

GrapesJS 给你提供了编辑层。其上的模板系统——所有权、版本管理、租用——是你的，也应该是：它是匹配你产品的部分。

目录中的真实列表，按模板系统中工作内容分类。名称和价格直接来自市场，因此这里不会偏离实际出售内容。

起始点

一个新模板的开始，甚至在有人保存之前。

浏览此类别

预设

MJML Preset

将 MJML 组件实时编译到编辑器中，因此响应式标记是生成的，而不是手写的。

免费查看插件

区块

模板的组装和重新组装的截面。

浏览此类别

区块

GrapesJS Email Blocky – Premium Responsive Email Blocks

大量邮件安全块，让用户从真实的部分开始，而不是空列。

¥496.80查看插件

逃生舱口

对于模板中必须手写的部分来说。

浏览此类别

代码

Grapesjs Component Code Editor

允许开发者编辑选定组件的 HTML 和 CSS，而无需打开整个模板。

免费查看插件

模板存在的地方

把编辑器的存储布线到你控制的后端。

浏览此类别

存储

Grapesjs Firebase Storage

将项目数据持久化到 Firebase，但按键方式显示你的应用如何标注模板。

免费查看插件

存储

Directus Storage

将项目数据持久化到 Directus，这在模板与其他内容并存时非常方便。

免费查看插件

素材

模板引用的图片必须比模板更久远。

浏览此类别

素材

Grapesjs Cloudinary

将素材管理指向Cloudinary，这样模板图片就能从一个地方转换并提供。

免费查看插件

上传

Grapesjs Uppy

为用户放入模板的图片添加更完整的上传流程。

免费查看插件

交接

从系统中提取一个完成的模板。

浏览此类别

导出

Export Zip

将渲染输出打包，用于交接到期望文件而非API调用的系统。

免费查看插件

四个已经可以协同工作的组合，按你构建的模板库选择。

价格在组装时从目录中实时读取。

GrapesJS 是编辑层，止于 HTML。之后的部分是你的后端和你已经付费的供应商——编辑器里没有内置发送功能，这里也没有任何暗示。

编辑器核心加上官方的MJML插件。两者都是BSD-3-Clause。

import grapesjs from 'grapesjs';
import grapesjsMjml from 'grapesjs-mjml';
import 'grapesjs/dist/css/grapes.min.css';

// One editor instance per template being edited. The template id — not a page
// id — is what every load and store call is keyed by.
const editor = grapesjs.init({
  container: '#template-editor',
  plugins: [grapesjsMjml],
  pluginsOpts: {
    [grapesjsMjml]: {
      imagePlaceholderSrc: 'https://cdn.your-app.com/email/placeholder.png',
    },
  },
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 10,
  },
});

// "Save as new template" — a row your customer owns from now on.
async function saveAsTemplate(name) {
  const res = await fetch('/api/templates', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name,
      project: editor.getProjectData(), // re-openable in the editor
    }),
  });
  return res.json(); // { id, name, version: 1 }
}

// Editing an existing template appends a version rather than overwriting it,
// so "restore the version we sent last Tuesday" stays a query, not a restore.
async function saveVersion(templateId) {
  await fetch(`/api/templates/${templateId}/versions`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ project: editor.getProjectData() }),
  });
}

1. 安装核心和MJML插件
2. →挂载编辑器，按模板ID键位
3. →注册你的块和绑定分量
4. →通过线路存储连接到您自己的API
5. →添加保存为模板和版本管理
6. →把渲染出来的HTML交给你的服务商

框架细节各自保存在页面上——该页面故意保持框架中立。

需要在产品内部而不是旁边创建邮件的团队。

本页介绍模板系统。这些模板涵盖了相邻的问题。

从GrapesJS开始，围绕你的产品塑造编辑体验，再用模板系统所需的插件进行扩展。

相关阅读