最佳電子郵件編輯工具指南

作者：艾薩克·奧科羅✏️

電子郵件編輯器可以被視為先進的所見即所得（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中文網其他相關文章！