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

電子郵件編輯器可以被視為先進的所見即所得（WYSIWYG）工具，它允許使用者在不具備編碼技能的情況下建立電子郵件範本。這些編輯器用於建立響應(yīng)式電子郵件，利用 HTML 和 CSS 來回應(yīng)各種裝置寬度。

在本文中，我們將重點介紹可用的最有效的電子郵件編輯工具及其獨特功能，重點關(guān)注開源和基本免費的選項。然後我們將整合這些編輯器之一 Unlayer，並使用 MailDev 進行測試。

解層

Unlayer 是一款開源拖放式電子郵件編輯器，允許使用者以最少的努力建立電子郵件。當與 React 框架一起使用時，它充當包裝元件，為 Web 應(yīng)用程式提供開發(fā)人員友好的視覺化電子郵件產(chǎn)生器。

它可以輕鬆整合到 React、Vue 和 Angular 專案中。以下是一些主要功能：

• 拖放編輯器
• 現(xiàn)成的響應(yīng)式範本
• HTML 和 JSON 匯出選項
• 能夠為特殊用例添加自訂工具

簡單的電子郵件

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

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

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

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

MJML

MJML 是一種建立響應(yīng)式電子郵件範本的標記語言。從某種意義上說它是直覺的，它的標記被呈現(xiàn)為任何裝置和電子郵件用戶端的響應(yīng)式 HTML。

主要特點：

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

葡萄JS

GrapesJS 是一款免費的電子郵件行銷工具，用於建立響應(yīng)式且專業(yè)的電子郵件。它提供了一個基於元件的介面，可以在電子郵件範本中建立區(qū)塊。

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

• 用於建立電子郵件的模組化元件
• 預(yù)設(shè)響應(yīng)式設(shè)計
• 可透過外掛程式和附加功能擴充

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

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

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

讓我們先執(zhí)行以下命令來建立並導(dǎo)航到新的 React 應(yīng)用程式：

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

接下來，將react-email-editor套件安裝到新建立的react應(yīng)用程式：

npm install react-email-editor

安裝後，更新您的 app.js，並使用以下程式碼區(qū)塊更新 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;

在上面的程式碼區(qū)塊中，元件使用useRef引用電子郵件編輯器（emailEditorRef），該編輯器匯出設(shè)計的電子郵件內(nèi)容。當您按一下「傳送電子郵件」按鈕時，會觸發(fā) exportHtml 函數(shù)，該函數(shù)將 HTML 元素提取到 sendTestEmail 函數(shù)，然後向後端 localhost API 發(fā)送 post 請求。

MailDev 用於電子郵件測試

MailDev 是一個開源 SMTP（簡單郵件傳輸協(xié)定）伺服器，用於在開發(fā)階段測試專案產(chǎn)生的電子郵件，並在使用者電腦上本地運行。

它提供了一個 Web 介面和本機伺服器，用於從後端發(fā)送和接收測試電子郵件，而無需向真實電子郵件地址發(fā)送任何內(nèi)容。

MailDev 應(yīng)用程式使用後端伺服器與應(yīng)用程式的 SMTP 設(shè)定整合。簡而言之，MailDev 是一個模擬 SMTP 伺服器，其工作原理類似於開發(fā)過程中從應(yīng)用程式發(fā)送的電子郵件的中間儲存。

讓我們使用 MailDev 伺服器來執(zhí)行上一節(jié)中產(chǎn)生的測試電子郵件。首先，我們將嘗試使用 Node.js 建立後端伺服器。在您的首選目錄中開啟終端，然後執(zhí)行以下命令來建立 Node 專案結(jié)構(gòu)：

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

上面的指令將建立一個資料夾，並將 Node 模組下載到其中。下一步是安裝 Express.js 和 Nodemailer，我們將透過執(zhí)行以下命令來完成：

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");
});

在上面的程式碼區(qū)塊中，我們使用 Express 設(shè)定一個 Node 伺服器，該伺服器使用 Nodemailer 透過 MailDev 的 SMTP 伺服器發(fā)送電子郵件。伺服器偵聽連接埠 8080 並接受對 /send-email 端點的 POST 請求。

接下來，在終端機中執(zhí)行以下命令來啟動節(jié)點伺服器：

node server.js

最後，執(zhí)行以下命令在您的電腦上全域安裝 MailDev：

npm install -g maildev

成功下載並安裝 MailDev 後，執(zhí)行以下命令來啟動它：

maildev

完成所有配置後，讓我們啟動前端伺服器並建立一些很酷的電子郵件範本。在前端終端機中執(zhí)行以下命令來啟動 React 專案：

npm start

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

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

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

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

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

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

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

結(jié)論

在所有電子郵件編輯器中，輕鬆嵌入 Unlayer 的靈活性使其成為我的首選，因為它支援響應(yīng)式電子郵件範本。我還相信 MailDev 在確保電子郵件沒有錯誤且完好無損方面做得很好。

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

---

LogRocket：透過了解上下文更輕鬆地調(diào)試 JavaScript 錯誤

偵錯程式碼總是一項乏味的任務(wù)。但你越了解自己的錯誤，就越容易糾正它們。

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

LogRocket 記錄控制臺日誌、頁面載入時間、堆疊追蹤、帶有標頭正文的慢速網(wǎng)路請求/回應(yīng)、瀏覽器元資料和自訂日誌。了解 JavaScript 程式碼的影響從未如此簡單！

免費試用。

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