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

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

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

解層

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

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

• 拖放編輯器
• 現(xiàn)成的響應(yīng)式範(fàn)本
• HTML 和 JSON 匯出選項(xiàng)
• 能夠?yàn)樘厥庥美砑幼杂喒ぞ?/li>

簡(jiǎn)單的電子郵件

另一個(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 是一種建立響應(yīng)式電子郵件範(fàn)本的標(biāo)記語言。從某種意義上說它是直覺的，它的標(biāo)記被呈現(xiàn)為任何裝置和電子郵件用戶端的響應(yīng)式 HTML。

主要特點(diǎn)：

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

葡萄JS

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

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

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

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

現(xiàn)代電子郵件編輯器的一個(gè)主要好處是它們可以與流行的前端 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è)計(jì)的電子郵件內(nèi)容。當(dāng)您按一下「?jìng)魉碗娮余]件」按鈕時(shí)，會(huì)觸發(fā) exportHtml 函數(shù)，該函數(shù)將 HTML 元素提取到 sendTestEmail 函數(shù)，然後向後端 localhost API 發(fā)送 post 請(qǐng)求。

MailDev 用於電子郵件測(cè)試

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

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

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

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

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

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

npm install express nodemailer cors

接下來，在專案目錄中建立一個(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");
});

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

接下來，在終端機(jī)中執(zhí)行以下命令來啟動(dòng)節(jié)點(diǎn)伺服器：

node server.js

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

npm install -g maildev

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

maildev

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

npm start

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

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

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

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

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

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

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

結(jié)論

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

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

---

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

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

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

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

免費(fèi)試用。

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