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

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

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

解層

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

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

• 拖放編輯器
• 現成的響應式模板
• HTML 和 JSON 導出選項
• 能夠為特殊用例添加自定義工具

簡單的電子郵件

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

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

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

• 拖放編輯器
• 內置模板
• 響應式設計支持

MJML

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

主要特點：

• 使用 MJML 語法簡化電子郵件開發(fā)
• 將 MJML 轉換為響應式 HTML
• 適用于常見電子郵件結構的廣泛組件庫

葡萄JS

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

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

• 用于構建電子郵件的模塊化組件
• 默認響應式設計
• 可通過插件和附加功能進行擴展

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

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

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

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

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

接下來，將react-email-editor包安裝到新創(chuàng)建的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），該編輯器導出設計的電子郵件內容。單擊“發(fā)送電子郵件”按鈕時，會觸發(fā) exportHtml 函數，該函數將 HTML 元素提取到 sendTestEmail 函數，然后向后端 localhost API 發(fā)送 post 請求。

MailDev 用于電子郵件測試

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

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

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

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

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

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

npm install express nodemailer cors

接下來，在項目目錄中創(chuàng)建一個 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 服務器發(fā)送電子郵件。服務器偵聽端口 8080 并接受對 /send-email 端點的 POST 請求。

接下來，在終端中運行以下命令來啟動節(jié)點服務器：

node server.js

最后，運行以下命令在您的計算機上全局安裝 MailDev：

npm install -g maildev

成功下載并安裝 MailDev 后，運行以下命令來啟動它：

maildev

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

npm start

現在前往 http://localhost:3000/ 預覽我們的電子郵件編輯器：

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

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

看起來應該很漂亮！你做到了！

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

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

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

結論

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

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

---

LogRocket：通過了解上下文更輕松地調試 JavaScript 錯誤

調試代碼始終是一項乏味的任務。但你越了解自己的錯誤，就越容易糾正它們。

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

LogRocket 記錄控制臺日志、頁面加載時間、堆棧跟蹤、帶有標頭正文的慢速網絡請求/響應、瀏覽器元數據和自定義日志。了解 JavaScript 代碼的影響從未如此簡單！

免費試用。

以上是最佳電子郵件編輯工具指南的詳細內容。更多信息請關注PHP中文網其他相關文章！