作者：艾薩克·奧科羅??

電子郵件編輯器可以被視為先進(jìn)的所見即所得（WYSIWYG）工具，它允許用戶在不具備編碼技能的情況下創(chuàng)建電子郵件模板。這些編輯器用于構(gòu)建響應(yīng)式電子郵件，利用 HTML 和 CSS 來響應(yīng)各種設(shè)備寬度。

在本文中，我們將重點(diǎn)介紹可用的最有效的電子郵件編輯工具及其獨(dú)特功能，重點(diǎn)關(guān)注開源和基本免費(fèi)的選項(xiàng)。然后我們將集成這些編輯器之一 Unlayer，并使用 MailDev 進(jìn)行測試。

解層

Unlayer 是一款開源拖放式電子郵件編輯器，允許用戶以最少的努力創(chuàng)建電子郵件。當(dāng)與 React 框架一起使用時(shí)，它充當(dāng)包裝組件，為 Web 應(yīng)用程序提供開發(fā)人員友好的可視化電子郵件生成器。

它可以輕松集成到 React、Vue 和 Angular 項(xiàng)目中。以下是一些主要功能：

• 拖放編輯器
• 現(xiàn)成的響應(yīng)式模板
• HTML 和 JSON 導(dǎo)出選項(xiàng)
• 能夠?yàn)樘厥庥美砑幼远x工具

簡單的電子郵件

另一個(gè)開源且免費(fèi)使用的電子郵件編輯器是 Easy email，它是基于 MJML（一種用于創(chuàng)建響應(yīng)式電子郵件的標(biāo)記語言）開發(fā)的。

它提供了一個(gè)用戶友好的界面，具有一系列功能，為用戶提供類似于 Unlayer 等的拖放電子郵件編輯器。

Easy email 作為包裝器與 React 集成，以提供直觀的編輯器呈現(xiàn)。以下是其主要特點(diǎn)：

• 拖放編輯器
• 內(nèi)置模板
• 響應(yīng)式設(shè)計(jì)支持

MJML

MJML 是一種創(chuàng)建響應(yīng)式電子郵件模板的標(biāo)記語言。從某種意義上說它是直觀的，它的標(biāo)記被呈現(xiàn)為任何設(shè)備和電子郵件客戶端的響應(yīng)式 HTML。

主要特點(diǎn)：

• 使用 MJML 語法簡化電子郵件開發(fā)
• 將 MJML 轉(zhuǎn)換為響應(yīng)式 HTML
• 適用于常見電子郵件結(jié)構(gòu)的廣泛組件庫

葡萄JS

GrapesJS 是一款免費(fèi)的電子郵件營銷工具，用于構(gòu)建響應(yīng)式且專業(yè)的電子郵件。它提供了一個(gè)基于組件的界面，可以在電子郵件模板中構(gòu)建塊。

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

• 用于構(gòu)建電子郵件的模塊化組件
• 默認(rèn)響應(yīng)式設(shè)計(jì)
• 可通過插件和附加功能進(jìn)行擴(kuò)展

將電子郵件編輯器與前端 Web 框架集成

現(xiàn)代電子郵件編輯器的一個(gè)主要好處是它們可以與流行的前端 Web 框架配合使用。此類集成允許非技術(shù)用戶在 Web 應(yīng)用程序中制作響應(yīng)式和定制的電子郵件。

在本節(jié)中，我們將探索如何將 Unlayer 集成到 React 應(yīng)用程序中。

讓我們首先運(yùn)行以下命令來創(chuàng)建并導(dǎo)航到新的 React 應(yīng)用程序：

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

接下來，將react-email-editor包安裝到新創(chuàng)建的react應(yīng)用程序中：

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），該編輯器導(dǎo)出設(shè)計(jì)的電子郵件內(nèi)容。單擊“發(fā)送電子郵件”按鈕時(shí)，會(huì)觸發(fā) exportHtml 函數(shù)，該函數(shù)將 HTML 元素提取到 sendTestEmail 函數(shù)，然后向后端 localhost API 發(fā)送 post 請求。

MailDev 用于電子郵件測試

MailDev 是一個(gè)開源 SMTP（簡單郵件傳輸協(xié)議）服務(wù)器，用于在開發(fā)階段測試項(xiàng)目生成的電子郵件，并在用戶計(jì)算機(jī)上本地運(yùn)行。

它提供了一個(gè) Web 界面和本地服務(wù)器，用于從后端發(fā)送和接收測試電子郵件，而無需向真實(shí)電子郵件地址發(fā)送任何內(nèi)容。

MailDev 應(yīng)用程序使用后端服務(wù)器與應(yīng)用程序的 SMTP 設(shè)置集成。簡而言之，MailDev 是一個(gè)模擬 SMTP 服務(wù)器，其工作原理類似于開發(fā)過程中從應(yīng)用程序發(fā)送的電子郵件的中間存儲(chǔ)。

讓我們使用 MailDev 服務(wù)器運(yùn)行上一節(jié)中生成的測試電子郵件。首先，我們將嘗試使用 Node.js 創(chuàng)建后端服務(wù)器。在您的首選目錄中打開終端，然后執(zhí)行以下命令來創(chuàng)建 Node 項(xiàng)目結(jié)構(gòu)：

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

上面的命令將創(chuàng)建一個(gè)文件夾，并將 Node 模塊下載到其中。下一步是安裝 Express.js 和 Nodemailer，我們將通過運(yùn)行以下命令來完成：

npm install express nodemailer cors

接下來，在項(xiàng)目目錄中創(chuàng)建一個(gè) 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 設(shè)置一個(gè) Node 服務(wù)器，該服務(wù)器使用 Nodemailer 通過 MailDev 的 SMTP 服務(wù)器發(fā)送電子郵件。服務(wù)器偵聽端口 8080 并接受對 /send-email 端點(diǎn)的 POST 請求。

接下來，在終端中運(yùn)行以下命令來啟動(dòng)節(jié)點(diǎn)服務(wù)器：

node server.js

最后，運(yùn)行以下命令在您的計(jì)算機(jī)上全局安裝 MailDev：

npm install -g maildev

成功下載并安裝 MailDev 后，運(yùn)行以下命令來啟動(dòng)它：

maildev

完成所有配置后，讓我們啟動(dòng)前端服務(wù)器并創(chuàng)建一些很酷的電子郵件模板。在前端終端中運(yùn)行以下命令來啟動(dòng) React 項(xiàng)目：

npm start

現(xiàn)在前往 http://localhost:3000/ 預(yù)覽我們的電子郵件編輯器：

我們的電子郵件模板已設(shè)計(jì)完畢，讓我們繼續(xù)發(fā)送它并使用 MailDev 看看它在測試郵件上的樣子。

根據(jù)您的喜好設(shè)計(jì)電子郵件模板，單擊按鈕發(fā)送電子郵件，然后前往 http://127.0.0.1:1080/#/ 預(yù)覽電子郵件：

看起來應(yīng)該很漂亮！你做到了！

電子郵件編輯器需要尋找的主要功能

我在上面列出了我喜歡的電子郵件編輯器，但在決定電子郵件編輯器是否值得追求時(shí)，我會(huì)考慮以下一般品質(zhì)：

• 響應(yīng)式模板 — 自動(dòng)調(diào)整電子郵件以適應(yīng)移動(dòng)和桌面視圖
• 拖放式設(shè)計(jì) — 無需編碼即可簡化電子郵件內(nèi)容的創(chuàng)建
• 自定義選項(xiàng) — 注入自定義 HTML/CSS 代碼
• 預(yù)構(gòu)建元素 - 如果需要，可嵌入按鈕和社交媒體等模塊
• 與框架的兼容性 - 與所選的 Web 框架集成，無論是 React、Angular 等。
• 跨平臺響應(yīng)能力 - 跨所有平臺和設(shè)備（從移動(dòng)設(shè)備到平板電腦和瀏覽器）響應(yīng)

結(jié)論

在所有電子郵件編輯器中，輕松嵌入 Unlayer 的靈活性使其成為我的首選，因?yàn)樗С猪憫?yīng)式電子郵件模板。我還相信 MailDev 在確保電子郵件沒有錯(cuò)誤且完好無損方面做得很好。

如果您有任何我可能錯(cuò)過的首選電子郵件編輯器和其他工具，請告訴我。在那之前，祝您編碼愉快！

---

LogRocket：通過了解上下文更輕松地調(diào)試 JavaScript 錯(cuò)誤

調(diào)試代碼始終是一項(xiàng)乏味的任務(wù)。但你越了解自己的錯(cuò)誤，就越容易糾正它們。

LogRocket 允許您以新的、獨(dú)特的方式理解這些錯(cuò)誤。我們的前端監(jiān)控解決方案跟蹤用戶與 JavaScript 前端的互動(dòng)，使您能夠準(zhǔn)確查看用戶的操作導(dǎo)致了錯(cuò)誤。

LogRocket 記錄控制臺日志、頁面加載時(shí)間、堆棧跟蹤、帶有標(biāo)頭正文的慢速網(wǎng)絡(luò)請求/響應(yīng)、瀏覽器元數(shù)據(jù)和自定義日志。了解 JavaScript 代碼的影響從未如此簡單！

免費(fèi)試用。

以上是最佳電子郵件編輯工具指南的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！