Repolode
unlayer

unlayer/react-email-editor

在 React 应用中嵌入拖拽式邮件编辑器组件,可加载、保存设计并导出 HTML。

可替代:MailchimpStripo

Star
5,246
Fork
803
未关闭 Issue
247
最近提交
6小时前

这是什么?

react-email-editor 是 Unlayer 拖拽式邮件编辑器的官方 React 封装。把组件放进 React 应用,用户就能可视化地制作邮件模板,无需自行开发编辑器。

组件通过 ref 暴露底层编辑器实例,可调用 loadDesign、saveDesign、exportHtml 等方法加载、保存设计或导出 HTML。设计以 JSON 形式保存,exportHtml 同时返回设计数据和响应式 HTML。minHeight、style、options 等属性用于调整容器与编辑器配置,也可以通过自定义工具添加自己的内容模块。

该包要求 React 16.8 及以上、Node 18 及以上,可在 Next.js 的 Client Component 中直接引入。项目列出的已测试邮件客户端包括 Gmail、Apple Mail、Outlook 和 Yahoo! Mail。

核心功能

  • 01以单个 React 组件嵌入拖拽式邮件编辑器。
  • 02以 JSON 形式加载和保存邮件设计。
  • 03导出响应式 HTML 与设计数据。
  • 04通过 ref 和回调调用编辑器方法、监听事件。
  • 05支持通过自定义工具添加自定义内容模块。
  • 06可在 Next.js App Router 的 Client Component 中直接使用。

适用场景

  • 为 SaaS 邮件营销产品增加模板编辑功能。
  • 让终端用户在应用内制作新闻邮件或事务性邮件版式。
  • 在后台流程中把保存的 JSON 设计导出为邮件 HTML。

快速上手

  1. 1

    从 NPM 安装该包

    npm install react-email-editor --save
  2. 2

    在 React 应用中导入 EmailEditor,并使用 ref 和 onReady 回调进行渲染

使用前须知

  • 需要 React 16.8 或更高版本以及 Node 18 或更高版本。
  • 编辑器仅限客户端运行并渲染到 DOM,无法在服务器端运行。
  • 完整编辑器功能和 AI 助手依赖 Unlayer 账户及相关配置。

标签

常见问题

react-email-editor 是什么?
在 React 应用中嵌入拖拽式邮件编辑器组件,可加载、保存设计并导出 HTML。 react-email-editor 是 Unlayer 拖拽式邮件编辑器的官方 React 封装。把组件放进 React 应用,用户就能可视化地制作邮件模板,无需自行开发编辑器。
react-email-editor 可以免费使用吗?用的什么许可证?
react-email-editor 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
react-email-editor 还在维护吗?
活跃维护中。react-email-editor 最近一次提交是在 2026年10月21日。
react-email-editor 适合用来做什么?
为 SaaS 邮件营销产品增加模板编辑功能。 让终端用户在应用内制作新闻邮件或事务性邮件版式。 在后台流程中把保存的 JSON 设计导出为邮件 HTML。
react-email-editor 怎么安装和运行?
从 NPM 安装该包: npm install react-email-editor --save 在 React 应用中导入 EmailEditor,并使用 ref 和 onReady 回调进行渲染
在哪里获取 react-email-editor?
源代码和安装说明在 GitHub 上:https://github.com/unlayer/react-email-editor

概要由 AI 根据项目 README 生成;GitHub 数据每日更新。

相关项目