Panduan kepada alat penyuntingan e-mel terbaik

Ditulis oleh Isaac Okoro✏️

Editor e-mel boleh dianggap sebagai alat WYSIWYG (apa yang anda lihat ialah apa yang anda dapat) lanjutan, yang membolehkan pengguna membuat templat e-mel tanpa mempunyai kemahiran pengekodan. Editor ini digunakan untuk membina e-mel responsif yang menggunakan HTML dan CSS untuk bertindak balas kepada pelbagai lebar peranti.

Dalam artikel ini, kami akan menumpukan pada alat penyuntingan e-mel paling berkesan yang tersedia serta ciri uniknya dengan tumpuan pada pilihan sumber terbuka dan sebahagian besarnya percuma. Kemudian kami akan menyepadukan salah satu editor ini, Unlayer dan menggunakan MailDev untuk menguji.

Unlayer

Unlayer ialah editor e-mel seret dan lepas sumber terbuka yang membolehkan pengguna membuat e-mel dengan usaha yang minimum. Apabila digunakan dengan rangka kerja React, ia berfungsi sebagai komponen pembalut yang menyediakan pembina e-mel visual mesra pembangun untuk aplikasi web.

Ia boleh disepadukan dengan mudah ke dalam projek React, Vue dan Angular. Di bawah ialah beberapa ciri utama:

• Editor seret dan lepas
• Templat responsif sedia dibuat
• Pilihan eksport HTML dan JSON
• Keupayaan untuk menambah alatan tersuai untuk kes penggunaan khusus

E-mel mudah

Satu lagi penyunting e-mel sumber terbuka dan percuma untuk digunakan ialah e-mel Mudah yang dibangunkan berdasarkan MJML, bahasa penanda untuk mencipta e-mel responsif.

Ia menawarkan antara muka mesra pengguna dengan pelbagai ciri yang menyediakan pengguna dengan editor e-mel seret dan lepas yang serupa seperti Unlayer.

E-mel yang mudah disepadukan dengan React sebagai pembalut untuk menyediakan paparan editor intuitifnya. Di bawah ialah ciri utamanya:

• Editor seret dan lepas
• Templat terbina dalam
• Sokongan reka bentuk responsif

MJML

MJML ialah bahasa penanda yang mencipta templat e-mel responsif. Ia adalah intuitif dalam erti kata bahawa penandanya dijadikan HTML responsif untuk mana-mana peranti dan klien e-mel.

Ciri utama:

• Pembangunan e-mel yang dipermudahkan dengan sintaks MJML
• Menukar MJML kepada HTML responsif
• Pustaka komponen yang luas untuk struktur e-mel biasa

GrapesJS

GrapesJS ialah alat pemasaran e-mel percuma untuk membina e-mel responsif dan profesional. Ia menawarkan antara muka berasaskan komponen yang membolehkan blok binaan dalam templat e-mel.

Di bawah ialah beberapa ciri utama GrapesJS:

• Komponen modular untuk membina e-mel
• Reka bentuk responsif secara lalai
• Boleh dikembangkan dengan pemalam dan ciri tambahan

Mengintegrasikan editor e-mel dengan rangka kerja web bahagian hadapan

Faedah utama penyunting e-mel moden ialah ia boleh berfungsi dengan rangka kerja web bahagian hadapan yang popular. Penyepaduan sedemikian membolehkan pengguna bukan teknikal mencipta e-mel responsif dan tersuai dalam aplikasi web.

Dalam bahagian ini, kami akan meneroka cara menyepadukan Unlayer ke dalam aplikasi React.

Mari mulakan dengan menjalankan arahan di bawah untuk mencipta dan menavigasi ke aplikasi React baharu:

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

Seterusnya, pasang pakej react-email-editor ke dalam aplikasi react yang baru dibuat:

npm install react-email-editor

Selepas memasang, kemas kini app.js anda dan kemas kini App.css dengan blok kod di bawah:

.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;
}

Seterusnya, kemas kini fail App.js dengan kod di bawah:

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;

Dalam blok kod di atas, komponen menggunakan useRef untuk merujuk editor e-mel (emailEditorRef), yang mengeksport kandungan e-mel yang direka bentuk. Apabila butang Hantar E-mel diklik, fungsi exportHtml dicetuskan, yang mengekstrak elemen HTML ke fungsi sendTestEmail, dan kemudian menghantar permintaan siaran ke API hos tempatan bahagian belakang.

MailDev untuk ujian e-mel

MailDev ialah pelayan SMTP (Simple Mail Transfer Protocol) sumber terbuka untuk menguji e-mel yang dijana projek semasa fasa pembangunan yang dijalankan secara setempat pada mesin pengguna.

Ia menyediakan antara muka web dan pelayan setempat untuk menghantar dan menerima e-mel ujian daripada bahagian belakang tanpa menghantar apa-apa ke alamat e-mel sebenar.

Aplikasi MailDev menggunakan pelayan bahagian belakang untuk penyepaduan dengan tetapan SMTP aplikasi anda. Ringkasnya, MailDev ialah pelayan SMTP simulasi yang berfungsi seperti storan perantaraan untuk e-mel yang dihantar daripada apl anda semasa pembangunan.

Mari jalankan e-mel ujian yang dijana dalam bahagian sebelumnya menggunakan pelayan MailDev. Mula-mula, kami akan cuba mencipta pelayan bahagian belakang kami menggunakan Node.js. Buka terminal dalam direktori pilihan anda, dan laksanakan arahan di bawah untuk mencipta struktur projek Node:

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

Arahan di atas akan mencipta folder dengan modul Node dimuat turun ke dalamnya. Langkah seterusnya ialah memasang Express.js dan Nodemailer, yang akan kami lakukan dengan menjalankan arahan di bawah:

npm install express nodemailer cors

Seterusnya, buat fail server.js dalam direktori projek, dan tampal kod di bawah ke dalamnya:

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");
});

Dalam blok kod di atas, kami menyediakan pelayan Node menggunakan Express yang menggunakan Nodemailer untuk menghantar e-mel melalui pelayan SMTP MailDev. Pelayan mendengar pada port 8080 dan menerima permintaan POST ke titik akhir /send-email.

Seterusnya, jalankan arahan di bawah dalam terminal untuk memulakan pelayan nod:

node server.js

Akhir sekali, jalankan arahan di bawah untuk memasang MailDev secara global pada mesin anda:

npm install -g maildev

Dengan MailDev berjaya dimuat turun dan dipasang, jalankan arahan di bawah untuk memutarkannya:

maildev

Dengan semua konfigurasi selesai, mari mulakan pelayan hadapan kami dan buat beberapa templat e-mel yang menarik. Jalankan arahan di bawah dalam terminal bahagian hadapan untuk memulakan projek React:

npm start

Sekarang pergi ke http://localhost:3000/ untuk pratonton editor e-mel kami:

Dengan templat e-mel kami yang direka bentuk dengan mudah, mari teruskan menghantarnya dan lihat rupanya pada mel ujian menggunakan MailDev.

Reka bentuk templat e-mel anda mengikut keutamaan anda, hantar e-mel dengan mengklik butang dan pergi ke http://127.0.0.1:1080/#/ untuk melihat e-mel:

Ia sepatutnya kelihatan cantik! Anda berjaya!

Ciri utama yang perlu dicari dalam editor e-mel

Saya menyenaraikan editor e-mel pilihan saya di atas, tetapi ini adalah kualiti umum yang saya perhatikan semasa membuat keputusan sama ada editor e-mel patut diikuti:

• Templat responsif — menyesuaikan e-mel secara automatik untuk paparan mudah alih dan desktop
• Reka bentuk seret dan lepas — memudahkan penciptaan kandungan e-mel tanpa pengekodan
• Pilihan penyesuaian — menyuntik kod HTML/CSS tersuai
• Elemen pra-bina — membenamkan modul seperti butang dan media sosial jika mahu
• Keserasian dengan rangka kerja — disepadukan dengan rangka kerja web yang dipilih sama ada React, Angular, dll.
• Responsif merentas platform — responsif merentas semua platform dan peranti daripada mudah alih ke tablet dan penyemak imbas

Kesimpulan

Dari semua penyunting e-mel, fleksibiliti untuk membenamkan Unlayer dengan mudah menjadikannya pilihan pilihan saya kerana ia mendayakan templat e-mel responsif. Saya juga percaya MailDev melakukan kerja yang baik dalam memastikan bahawa e-mel tidak mempunyai kesilapan dan kelihatan utuh.

Beri tahu saya jika anda mempunyai editor e-mel pilihan dan alatan lain yang mungkin saya terlepas. Sehingga itu, selamat mengekod!

---

LogRocket: Nyahpepijat ralat JavaScript dengan lebih mudah dengan memahami konteks

Kod nyahpepijat sentiasa menjadi tugas yang membosankan. Tetapi semakin anda memahami kesilapan anda, semakin mudah untuk membetulkannya.

LogRocket membolehkan anda memahami ralat ini dengan cara baharu dan unik. Penyelesaian pemantauan bahagian hadapan kami menjejaki penglibatan pengguna dengan bahagian hadapan JavaScript anda untuk memberi anda keupayaan untuk melihat dengan tepat perkara yang dilakukan pengguna yang membawa kepada ralat.

LogRocket merekodkan log konsol, masa muat halaman, surih tindanan, permintaan/tindak balas rangkaian perlahan dengan badan pengepala, metadata penyemak imbas dan log tersuai. Memahami kesan kod JavaScript anda tidak akan menjadi lebih mudah!

Cuba secara percuma.

Atas ialah kandungan terperinci Panduan kepada alat penyuntingan e-mel terbaik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!