最佳电子邮件编辑工具指南

作者：艾萨克·奥科罗✏️

电子邮件编辑器可以被视为先进的所见即所得（WYSIWYG）工具，它允许用户在不具备编码技能的情况下创建电子邮件模板。这些编辑器用于构建响应式电子邮件，利用 HTML 和 CSS 来响应各种设备宽度。

在本文中，我们将重点介绍可用的最有效的电子邮件编辑工具及其独特功能，重点关注开源和基本免费的选项。然后我们将集成这些编辑器之一 Unlayer，并使用 MailDev 进行测试。

解层

Unlayer 是一款开源拖放式电子邮件编辑器，允许用户以最少的努力创建电子邮件。当与 React 框架一起使用时，它充当包装组件，为 Web 应用程序提供开发人员友好的可视化电子邮件生成器。

它可以轻松集成到 React、Vue 和 Angular 项目中。以下是一些主要功能：

• 拖放编辑器
• 现成的响应式模板
• HTML 和 JSON 导出选项
• 能够为特殊用例添加自定义工具

简单的电子邮件

另一个开源且免费使用的电子邮件编辑器是 Easy email，它是基于 MJML（一种用于创建响应式电子邮件的标记语言）开发的。

它提供了一个用户友好的界面，具有一系列功能，为用户提供类似于 Unlayer 等的拖放电子邮件编辑器。

Easy email 作为包装器与 React 集成，以提供直观的编辑器呈现。以下是其主要特点：

• 拖放编辑器
• 内置模板
• 响应式设计支持

MJML

MJML 是一种创建响应式电子邮件模板的标记语言。从某种意义上说它是直观的，它的标记被呈现为任何设备和电子邮件客户端的响应式 HTML。

主要特点：

• 使用 MJML 语法简化电子邮件开发
• 将 MJML 转换为响应式 HTML
• 适用于常见电子邮件结构的广泛组件库

葡萄JS

GrapesJS 是一款免费的电子邮件营销工具，用于构建响应式且专业的电子邮件。它提供了一个基于组件的界面，可以在电子邮件模板中构建块。

以下是 GrapesJS 的一些主要功能：

• 用于构建电子邮件的模块化组件
• 默认响应式设计
• 可通过插件和附加功能进行扩展

将电子邮件编辑器与前端 Web 框架集成

现代电子邮件编辑器的一个主要好处是它们可以与流行的前端 Web 框架配合使用。此类集成允许非技术用户在 Web 应用程序中制作响应式和定制的电子邮件。

在本节中，我们将探索如何将 Unlayer 集成到 React 应用程序中。

让我们首先运行以下命令来创建并导航到新的 React 应用程序：

npx create-react-app email-editor && cd email-editor 

接下来，将react-email-editor包安装到新创建的react应用程序中：

npm install react-email-editor

安装后，更新您的 app.js，并使用以下代码块更新 App.css：

.App {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.button {
  background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 15px 50px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  border-radius: 32px;
  margin-top: 20px;
  margin-left: 20px;
  cursor: pointer;
}

接下来，使用以下代码更新 App.js 文件：

import axios from "axios";
import React, { useRef } from "react";
import EmailEditor from "react-email-editor";
import "./App.css";

const App = () => {
  const emailEditorRef = useRef(null);
  const exportHtml = () => {
    emailEditorRef.current.editor.exportHtml((data) => {
      const { html } = data;
      sendTestEmail(html);
    });
  };

  const sendTestEmail = async (html) => {
    try {
      const response = await axios.post("http://localhost:8080/send-email", {
        html,
      });
      alert(response.data);
    } catch (error) {
      console.error("Error sending email:", error);
    }
  };

  return (
    <div className="App">
      <h1>React Email Editor</h1>
      <EmailEditor ref={emailEditorRef} />
      <button className="button" onClick={exportHtml}>
        Send Email
      </button>
    </div>
  );
};

export default App;

在上面的代码块中，组件使用useRef引用电子邮件编辑器（emailEditorRef），该编辑器导出设计的电子邮件内容。单击“发送电子邮件”按钮时，会触发 exportHtml 函数，该函数将 HTML 元素提取到 sendTestEmail 函数，然后向后端 localhost API 发送 post 请求。

MailDev 用于电子邮件测试

MailDev 是一个开源 SMTP（简单邮件传输协议）服务器，用于在开发阶段测试项目生成的电子邮件，并在用户计算机上本地运行。

它提供了一个 Web 界面和本地服务器，用于从后端发送和接收测试电子邮件，而无需向真实电子邮件地址发送任何内容。

MailDev 应用程序使用后端服务器与应用程序的 SMTP 设置集成。简而言之，MailDev 是一个模拟 SMTP 服务器，其工作原理类似于开发过程中从应用程序发送的电子邮件的中间存储。

让我们使用 MailDev 服务器运行上一节中生成的测试电子邮件。首先，我们将尝试使用 Node.js 创建后端服务器。在您的首选目录中打开终端，然后执行以下命令来创建 Node 项目结构：

mkdir my-node-backend && cd my-node-backend && npm init -y

上面的命令将创建一个文件夹，并将 Node 模块下载到其中。下一步是安装 Express.js 和 Nodemailer，我们将通过运行以下命令来完成：

npm install express nodemailer cors

接下来，在项目目录中创建一个 server.js 文件，并将以下代码粘贴到其中：

const express = require("express");
const nodemailer = require("nodemailer");
const cors = require("cors");
const app = express();

app.use(express.json());
app.use(cors());

//Set up Nodemailer to connect to Maildev's SMTP server
const transporter = nodemailer.createTransport({
  host: "127.0.0.1",
  port: 1025, // Maildev's default SMTP port
  secure: false, // Maildev does not require SSL
  tls: {
    rejectUnauthorized: false,
  },
});

// API endpoint to send the email
app.post("/send-email", (req, res) => {
  const { html } = req.body;
  const mailOptions = {
    from: "IsaaacTheTester@example.com",
    to: "recipient@example.com",
    subject: "Test Email from React Email Editor",
    html: html,
  };

  transporter.sendMail(mailOptions, (error, info) => {
    if (error) {
      console.error("Error sending email:", error);
      return res.status(500).send("Failed to send email");
    }
    console.log("Email sent:", info.response);
    res.status(200).send("Email sent successfully");
  });
});

app.listen(8080, () => {
  console.log("Server is running on port 8080");
});

在上面的代码块中，我们使用 Express 设置一个 Node 服务器，该服务器使用 Nodemailer 通过 MailDev 的 SMTP 服务器发送电子邮件。服务器侦听端口 8080 并接受对 /send-email 端点的 POST 请求。

接下来，在终端中运行以下命令来启动节点服务器：

node server.js

最后，运行以下命令在您的计算机上全局安装 MailDev：

npm install -g maildev

成功下载并安装 MailDev 后，运行以下命令来启动它：

maildev

完成所有配置后，让我们启动前端服务器并创建一些很酷的电子邮件模板。在前端终端中运行以下命令来启动 React 项目：

npm start

现在前往 http://localhost:3000/ 预览我们的电子邮件编辑器：

我们的电子邮件模板已设计完毕，让我们继续发送它并使用 MailDev 看看它在测试邮件上的样子。

根据您的喜好设计电子邮件模板，单击按钮发送电子邮件，然后前往 http://127.0.0.1:1080/#/ 预览电子邮件：

看起来应该很漂亮！你做到了！

电子邮件编辑器需要寻找的主要功能

我在上面列出了我喜欢的电子邮件编辑器，但在决定电子邮件编辑器是否值得追求时，我会考虑以下一般品质：

• 响应式模板 — 自动调整电子邮件以适应移动和桌面视图
• 拖放式设计 — 无需编码即可简化电子邮件内容的创建
• 自定义选项 — 注入自定义 HTML/CSS 代码
• 预构建元素 - 如果需要，可嵌入按钮和社交媒体等模块
• 与框架的兼容性 - 与所选的 Web 框架集成，无论是 React、Angular 等。
• 跨平台响应能力 - 跨所有平台和设备（从移动设备到平板电脑和浏览器）响应

结论

在所有电子邮件编辑器中，轻松嵌入 Unlayer 的灵活性使其成为我的首选，因为它支持响应式电子邮件模板。我还相信 MailDev 在确保电子邮件没有错误且完好无损方面做得很好。

如果您有任何我可能错过的首选电子邮件编辑器和其他工具，请告诉我。在那之前，祝您编码愉快！

---

LogRocket：通过了解上下文更轻松地调试 JavaScript 错误

调试代码始终是一项乏味的任务。但你越了解自己的错误，就越容易纠正它们。

LogRocket 允许您以新的、独特的方式理解这些错误。我们的前端监控解决方案跟踪用户与 JavaScript 前端的互动，使您能够准确查看用户的操作导致了错误。

LogRocket 记录控制台日志、页面加载时间、堆栈跟踪、带有标头正文的慢速网络请求/响应、浏览器元数据和自定义日志。了解 JavaScript 代码的影响从未如此简单！

免费试用。

以上是最佳电子邮件编辑工具指南的详细内容。更多信息请关注PHP中文网其他相关文章！