free×性护士vidos中国,国产97在线

首頁

web前端

js教程

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

Barbara Streisand

Nov 03, 2024 am 03:49 AM

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

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

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

解層

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

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

拖放編輯器
現(xiàn)成的響應(yīng)式模板
HTML 和 JSON 導(dǎo)出選項
能夠為特殊用例添加自定義工具

簡單的電子郵件

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

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

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

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

MJML

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

主要特點(diǎn)：

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

葡萄JS

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

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

用于構(gòu)建電子郵件的模塊化組件
默認(rèn)響應(yīng)式設(shè)計
可通過插件和附加功能進(jìn)行擴(kuò)展

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

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

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

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

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

接下來，將react-email-editor包安裝到新創(chuàng)建的react應(yīng)用程序中：

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），該編輯器導(dǎo)出設(shè)計的電子郵件內(nèi)容。單擊“發(fā)送電子郵件”按鈕時，會觸發(fā) exportHtml 函數(shù)，該函數(shù)將 HTML 元素提取到 sendTestEmail 函數(shù)，然后向后端 localhost API 發(fā)送 post 請求。

MailDev 用于電子郵件測試

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

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

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

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

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

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

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 設(shè)置一個 Node 服務(wù)器，該服務(wù)器使用 Nodemailer 通過 MailDev 的 SMTP 服務(wù)器發(fā)送電子郵件。服務(wù)器偵聽端口 8080 并接受對 /send-email 端點(diǎn)的 POST 請求。

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