用 GrapesJS 构建 React 邮件生成器

不是租用的托管编辑器，也不是模板画廊。而是你在已经运行的应用里挂载的编辑层。

这个画布是运行在本页上的React组件——没有编辑器包，没有iframe。添加一个块，点击任意部分选择，重新输入文本，重新设计，重新排序，并在桌面、平板和移动端切换预览。打开HTML标签页，查看邮件生成器反馈给代码的标记类型。

新闻通讯预设：邮件安全块、受限样式管理器和基于表格的输出。这是最接近用户能看到的功能。

React 邮件构建器是一种运行在 React 应用中的可视化编辑器，允许用户创建和定制邮件模板，而无需手动编写 HTML 邮件标记。它不是用户登录的独立产品：它是应用中的一个组件，因此模板、拥有它们的账户以及发送这些模板的基础设施都会留在你这边。

编辑的工作最终是做标记。之前和之后的一切都是你的申请。

在所有这些项目中，替代方案都是开发人员每次有人想做修改时手动编辑模板。

它是编辑的基础，而不是最终成品。这正是重点：下面的内容是你构建的钩子，而不是你默认的功能。

GrapesJS 提供了可视化编辑层。你的 React 应用掌控用户、数据、存储和发布——这正是嵌入编辑器而不是把人送到别人编辑的全部理由。

将编辑嵌入他人产品中则引发了另一套问题。

两条路径最终都到达同一地点。唯一真正的区别在于模块被允许评估的位置。

三个包和一个组件。之后的内容——存储、自定义块、MJML——会在页面后面详细介绍。

import GjsEditor from '@grapesjs/react';
import newsletter from 'grapesjs-preset-newsletter';
import 'grapesjs/dist/css/grapes.min.css';

// A normal React component. The editor is a child of your tree, so your
// router, your auth context and your providers all still wrap it.
export default function EmailBuilder({ template, onSave }) {
  return (
    <GjsEditor
      options={{
        height: '100vh',
        // Storage is wired to your own API further down this page.
        storageManager: false,
        plugins: [newsletter],
        projectData: template,
      }}
      onEditor={(editor) => {
        // Everything the user builds comes back out as plain data you can
        // put straight into React state or POST to your backend.
        editor.on('update', () => {
          onSave({
            html: editor.getHtml(),
            css: editor.getCss(),
            project: editor.getProjectData(),
          });
        });
      }}
    />
  );
}

// app/emails/page.tsx  (or pages/emails.tsx)
import dynamic from 'next/dynamic';

// GrapesJS reaches for window/document as it initialises, so it can only run
// in the browser. In Next.js that means one dynamic import with ssr: false —
// this is the whole of the Next.js-specific work.
const EmailBuilder = dynamic(() => import('@/components/EmailBuilder'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

export default function EmailsPage({ template }) {
  return <EmailBuilder template={template} onSave={saveTemplate} />;
}

1. 在 React 组件中初始化编辑器
2. →添加一个邮件预设，这样块和样式对邮件是安全的
3. →注册你的产品所需的区块
4. →根据你自己的API配置存储
5. →导出HTML，或在服务器上编译MJML
6. →将结果交给你的发送服务商

上述版本与2026-09-03上已发布的封装进行了核对：grapesjs 0.23.6 是 BSD-3-Clause;@grapesjs/react 是 MIT。

这些来自编辑器核心及其邮件预设，而不是你必须写的内容。

MJML 的存在是为了让响应式邮件标记可以手工编写。在它上面加上可视化构建器，意味着没人需要手动编写。GrapesJS 的核心不包含 MJML——一个插件会在编辑器中添加 MJML 组件，使项目序列化为 MJML，而不是普通 HTML。

// pages/api/email/compile.ts
//
// mjml is a Node package — it parses and renders on the server, not in the
// browser. So the editor produces MJML in the client and this route turns it
// into the table-based HTML that email clients actually accept.
import mjml2html from 'mjml';

export default function handler(req, res) {
  const { html, errors } = mjml2html(req.body.mjml, {
    validationLevel: 'soft',
    keepComments: false,
  });

  // MJML reports what it could not understand rather than failing silently.
  if (errors.length) console.warn('[mjml]', errors);

  res.status(200).json({ html });
}

编译器是一个 Node 包，所以编译工作应该在服务器端进行——Next.js，是普通的 API 路由。反向则不对称：任意的 HTML 无法干净地转换回 MJML，所以在构建之前，先选择你的工作流程格式。

编辑器会给你的代码三个不同的东西，而React应用通常在不同时间点需要这三种。

这时嵌入式构建器领先于通用邮件工具：这些块可以知道你的域名。块不是产品卡的图片——它可以查找产品。

具体来说：任意的React组件不会被转换成邮件组件。JSX渲染的是DOM树，邮件客户端不会执行大部分内容。你写的是一个GrapesJS组件类型，其toHTML会输出邮件安全的标记，其特征映射到你应用拥有的记录上。线路是你的;编辑器会给出放置的位置。

通过发送产品实际发送的部分来减少重复设计工作，而不是用户每次都必须适应的通用版块。

模板只是保存的项目文档，所以发布入门库意味着做种行，并在用户选择时加载为 projectData。以下是大多数产品最终需要的类别：

这些是布局类别，不是出售产品。GJS.Market 列出了电子邮件预设、块包和模板管理器——它不销售现成的电子邮件设计，本页面也不会显示不存在产品的卡片。

用户在编辑时切换设备宽度，画布会重新布局到该宽度。电子邮件宽度比网页宽度窄：600px多年来一直是安全的桌面最大宽度。

预览就是预览。它显示的是标记如何重排，而不是特定客户端如何渲染——这是下一部分。

电子邮件客户端实现HTML和CSS的方式不同，且已有二十年历史。可视化构建器标准化了创作工作流程;它并不要求客户端彼此达成一致。

把编辑器连接到你已有的后端和数据模型。你的用户、认证、数据库、权限和发布流程都保持原位。

// The editor asks your API for a template and hands it back on save.
// Your users, your auth, your database, your permissions — unchanged.
const options = {
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 5,
    options: {
      remote: {
        urlStore: `/api/email-templates/${templateId}`,
        urlLoad: `/api/email-templates/${templateId}`,
        // Your existing session cookie is all the auth it needs.
        fetchOptions: { credentials: 'include' },
      },
    },
  },
};

// pages/api/email-templates/[id].ts — an ordinary Next.js route handler.
export default async function handler(req, res) {
  const session = await getSession(req);
  if (!session) return res.status(401).end();

  if (req.method === 'POST') {
    await db.emailTemplate.update({
      where: { id: req.query.id, orgId: session.orgId },
      data: { project: req.body },
    });
    return res.status(200).json({ ok: true });
  }

  const row = await db.emailTemplate.findFirst({
    where: { id: req.query.id, orgId: session.orgId },
  });
  return res.status(200).json(row?.project ?? {});
}

GJS.Market 不托管你的模板、存储你的数据或发送你的邮件。它卖的是你自己运行的编辑器插件。

自定义编辑体验，直到它能作为你React应用的原生部分读取，而不是附加在里面的第三方面板。根本不需要去除厂商品牌标识。

你能改变的

• 工具栏和按钮
• 面板及其布局
• 块形色板与分类
• 组件类型与特征
• 样式管理部门
• 命令与快捷键
• 周围的 React UI

最彻底的方法是无头运行编辑器，自己用React构建整个界面，只用编辑器来处理画布和模型。

这是合理的考虑，直到部分清单写下来。以下每一项都是邮件编辑在可用前必须准备的——不是随便可有的。

电子邮件编辑的本质

• 编辑画布
• 选择与击中测试
• 拖放
• 组件模型
• 区块系统
• 样式经理
• 响应式控制
• 资产管理
• 模板存储
• 撤销/重做历史
• 连载
• HTML 导出
• MJML 集成
• 预览
• 持续维护

打造你的邮件产品——而不是从零再造一个编辑器。我们不会给出"节省几个月"这样的数字：你的团队要花多久，取决于你的团队。

下面的每个商品都是真实产品，拥有活跃页面，名称、价格和缩略图均直接取自目录——因此页面上的任何内容都不会与实际销售内容不同步。

React UI

本页所讨论的层：围绕编辑器核心构建的React接口，适合希望周围界面采用React而非原版面板的团队。

浏览此类别

React UI

React UI for GrapesJS

编辑器周围的React接口，适合那些更愿意扩展组件而非配置面板的团队。

免费查看插件

React预设

Reactor Preset for GrapesJS

一个面向React的预设，作为起点非常有用，当周围应用已经是React时。

免费查看插件

React 壳

GrapesJS Shadcn

一个基于熟悉组件库构建的完整 React 接口，适合希望编辑器与其 UI 其他部分匹配的产品。

¥7,199.93查看插件

电子邮件预设

用邮件安全的网页块替换默认的网页块，并将样式管理器缩小到属性，邮件客户尊重。这就是编辑器作为电子邮件编辑器的原因。

浏览此类别

MJML

MJML Preset

在编辑器中添加 MJML 组件，使项目序列化成 MJML，并在服务器上编译成响应式 HTML。

免费查看插件

电子邮件预设

Newsletter Preset

邮件起点：邮件安全的区块、缩小的样式管理器和基于表格的输出。

免费查看插件

电子邮件预设

Whitener Preset GrapesJS

另一种电子邮件预设，值得在你决定使用区块词汇之前，与通讯中的内容进行比较。

免费查看插件

块与模板

有现成的部分和保存和加载模板管理器，这样用户就不用用原语组装每封邮件。

浏览此类别

邮件屏蔽

GrapesJS Email Blocky – Premium Responsive Email Blocks

增加一组现成的邮件部分，让用户从成品中组装，而不是从原件中组装。

¥496.80查看插件

代码访问

在开发者需要看到或手动编辑某个部分产生的标记时。

浏览此类别

代码

Grapesjs Component Code Editor

显示所选组件产生的标记，供开发者需要直接查看或编辑时使用。

免费查看插件

存储适配器

如果你用的适配器已经覆盖，可以把存储管理器接到后端，不用写入适配器。

浏览此类别

存储

Grapesjs Firebase Storage

可以将项目持久化到 Firebase，无需自己编写存储适配器。

免费查看插件

存储

Directus Storage

如果你的内容已经存放在 Directus 后端，它会将项目持久化到后端。

免费查看插件

四种组合映射到真实需求。每个列表都是真实存在的——没有虚构插件填补图中的空白。

价格来自目录在组装时的版本。

这种模式在其他毫无共同点的产品中反复出现。

编辑负责创建邮件。你的基础设施发送邮件。保持这条线路清晰，使得整个架构更简单。

服务提供商团队交给的例子

• 亚马逊SES
• 发送网格
• 邮枪
• 邮戳

标注是标注最终在哪里的示例，而不是内置集成。GrapesJS 和 GJS.Market 都没有为它们提供连接器;你从自己的后端调用他们的 SDK，就像你邮件的其他部分一样。

这是架构上的权衡，不是记分牌。右侧栏实说“视情况而定”：托管编辑之间存在差异，条款也会变更，我们不会替他们发明具体答案。

GrapesJS栏目已与grapesjs 0.23.6和@grapesjs/react在2026-09-03上进行核对。欲与特定指定供应商及其公布价格进行对比，请参见专门页面。

邻近页面会让同一个编辑器走不同的方向。

先从 GrapesJS 开始，集成到 React 应用中，然后用你的产品实际需要的邮件插件扩展编辑器。