最佳電子郵件編輯工具指南-js教程-PHP中文網

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

電子郵件編輯器可以被視為先進的所見即所得（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 請求。

接下來，在終端機中執行以下命令來啟動節點伺服器：