Geschrieben von Isaac Okoro??

E-Mail-Editoren k?nnen als fortschrittliche WYSIWYG-Tools (What You See Is What You Get) betrachtet werden, mit denen Benutzer E-Mail-Vorlagen erstellen k?nnen, ohne über Programmierkenntnisse zu verfügen. Diese Editoren werden zum Erstellen responsiver E-Mails verwendet, die HTML und CSS verwenden, um auf verschiedene Ger?tebreiten zu reagieren.

In diesem Artikel konzentrieren wir uns auf die effektivsten verfügbaren E-Mail-Bearbeitungstools sowie ihre einzigartigen Funktionen, wobei der Schwerpunkt auf Open-Source- und gr??tenteils kostenlosen Optionen liegt. Dann integrieren wir einen dieser Editoren, Unlayer, und verwenden MailDev zum Testen.

Entschichte

Unlayer ist ein Open-Source-Drag-and-Drop-E-Mail-Editor, mit dem Benutzer E-Mails mit minimalem Aufwand erstellen k?nnen. Bei Verwendung mit dem React-Framework dient es als Wrapper-Komponente, die einen entwicklerfreundlichen visuellen E-Mail-Builder für Webanwendungen bereitstellt.

Es kann problemlos in React-, Vue- und Angular-Projekte integriert werden. Nachfolgend sind einige wichtige Funktionen aufgeführt:

• Drag-and-Drop-Editor
• Vorgefertigte responsive Vorlagen
• HTML- und JSON-Exportoptionen
• M?glichkeit, benutzerdefinierte Tools für spezielle Anwendungsf?lle hinzuzufügen

Einfache E-Mail

Ein weiterer Open-Source- und kostenloser E-Mail-Editor ist Easy Email, der auf Basis von MJML entwickelt wurde, einer Auszeichnungssprache zum Erstellen responsiver E-Mails.

Es bietet eine benutzerfreundliche Oberfl?che mit einer Reihe von Funktionen, die Benutzern einen Drag-and-Drop-E-Mail-Editor ?hnlich wie Unlayer bieten.

Easy Email l?sst sich als Wrapper in React integrieren, um eine intuitive Editor-Wiedergabe bereitzustellen. Nachfolgend sind die wichtigsten Funktionen aufgeführt:

• Drag-and-Drop-Editor
• Eingebaute Vorlagen
• Responsive Design-Unterstützung

MJML

MJML ist eine Auszeichnungssprache, die responsive E-Mail-Vorlagen erstellt. Es ist in dem Sinne intuitiv, dass sein Markup für jedes Ger?t und jeden E-Mail-Client in responsives HTML gerendert wird.

Hauptmerkmale:

• Vereinfachte E-Mail-Entwicklung mit MJML-Syntax
• Konvertiert MJML in responsives HTML
• Umfangreiche Komponentenbibliothek für g?ngige E-Mail-Strukturen

TraubenJS

GrapesJS ist ein kostenloses E-Mail-Marketing-Tool zum Erstellen reaktionsschneller und professioneller E-Mails. Es bietet eine komponentenbasierte Schnittstelle, die Bausteine ??in E-Mail-Vorlagen erm?glicht.

Im Folgenden sind einige wichtige Funktionen von GrapesJS aufgeführt:

• Modulare Komponenten zum Erstellen von E-Mails
• Standardm??ig Responsive Design
• Erweiterbar mit Plugins und zus?tzlichen Funktionen

Integration von E-Mail-Editoren mit Frontend-Web-Frameworks

Ein gro?er Vorteil moderner E-Mail-Editoren besteht darin, dass sie mit g?ngigen Frontend-Web-Frameworks arbeiten k?nnen. Durch solche Integrationen k?nnen technisch nicht versierte Benutzer reaktionsf?hige und individuelle E-Mails innerhalb einer Webanwendung erstellen.

In diesem Abschnitt erfahren Sie, wie Sie Unlayer in eine React-Anwendung integrieren.

Beginnen wir mit der Ausführung des folgenden Befehls, um eine neue React-Anwendung zu erstellen und zu dieser zu navigieren:

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

Als n?chstes installieren Sie das React-Email-Editor-Paket in der neu erstellten React-Anwendung:

npm install react-email-editor

Aktualisieren Sie nach der Installation Ihre app.js und aktualisieren Sie die App.css mit dem folgenden Codeblock:

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

Als n?chstes aktualisieren Sie die App.js-Datei mit dem folgenden Code:

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;

Im obigen Codeblock verwendet die Komponente useRef, um auf den E-Mail-Editor (emailEditorRef) zu verweisen, der den entworfenen E-Mail-Inhalt exportiert. Wenn auf die Schaltfl?che ?E-Mail senden“ geklickt wird, wird die Funktion ?exportHtml“ ausgel?st, die das HTML-Element in die Funktion ?sendTestEmail“ extrahiert und dann eine Post-Anfrage an die Backend-Localhost-API sendet.

MailDev für E-Mail-Tests

MailDev ist ein Open-Source-SMTP-Server (Simple Mail Transfer Protocol) zum Testen projektgenerierter E-Mails w?hrend der Entwicklungsphase, der lokal auf dem Computer eines Benutzers ausgeführt wird.

Es bietet eine Webschnittstelle und einen lokalen Server zum Senden und Empfangen von Test-E-Mails vom Backend, ohne etwas an echte E-Mail-Adressen zu senden.

Die MailDev-Anwendung verwendet einen Backend-Server für die Integration in die SMTP-Einstellungen Ihrer Anwendung. Kurz gesagt ist MailDev ein simulierter SMTP-Server, der als Zwischenspeicher für die E-Mails fungiert, die w?hrend der Entwicklung von Ihrer App gesendet werden.

Lassen Sie uns eine im vorherigen Abschnitt generierte Test-E-Mail mit dem MailDev-Server ausführen. Zuerst werden wir versuchen, unseren Backend-Server mit Node.js zu erstellen. ?ffnen Sie das Terminal in Ihrem bevorzugten Verzeichnis und führen Sie den folgenden Befehl aus, um eine Knotenprojektstruktur zu erstellen:

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

Der obige Befehl erstellt einen Ordner mit den heruntergeladenen Node-Modulen. Der n?chste Schritt besteht darin, Express.js und Nodemailer zu installieren, was wir tun, indem wir den folgenden Befehl ausführen:

npm install express nodemailer cors

Als n?chstes erstellen Sie eine server.js-Datei im Projektverzeichnis und fügen den folgenden Code hinein:

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

Im obigen Codeblock richten wir einen Node-Server mit Express ein, der Nodemailer verwendet, um E-Mails über den SMTP-Server von MailDev zu senden. Der Server überwacht Port 8080 und akzeptiert POST-Anfragen an den Endpunkt /send-email.

Führen Sie als N?chstes den folgenden Befehl im Terminal aus, um den Knotenserver zu starten:

node server.js

Führen Sie abschlie?end den folgenden Befehl aus, um MailDev global auf Ihrem Computer zu installieren:

npm install -g maildev

Nachdem MailDev erfolgreich heruntergeladen und installiert wurde, führen Sie den folgenden Befehl aus, um es zu starten:

maildev

Sobald alle Konfigurationen abgeschlossen sind, starten wir unsere Frontend-Server und erstellen einige coole E-Mail-Vorlagen. Führen Sie den folgenden Befehl im Terminal des Frontends aus, um das React-Projekt zu starten:

npm start

Gehen Sie jetzt zu http://localhost:3000/, um eine Vorschau unseres E-Mail-Editors anzuzeigen:

Sobald unsere E-Mail-Vorlage fertig entworfen ist, k?nnen wir mit dem Versenden fortfahren und sehen, wie sie in einer Test-Mail mit MailDev aussieht.

Gestalten Sie Ihre E-Mail-Vorlage nach Ihren Wünschen, senden Sie die E-Mail, indem Sie auf die Schaltfl?che klicken, und gehen Sie zu http://127.0.0.1:1080/#/, um eine Vorschau der E-Mail anzuzeigen:

Es sollte ziemlich schick aussehen! Du hast es geschafft!

Wichtige Funktionen, auf die Sie bei E-Mail-Editoren achten sollten

Ich habe oben meine bevorzugten E-Mail-Editoren aufgelistet, aber das sind allgemeine Eigenschaften, auf die ich achte, wenn ich entscheide, ob es sich lohnt, einen E-Mail-Editor zu verwenden:

• Responsive Vorlagen – passt E-Mails automatisch für Mobil- und Desktop-Ansichten an
• Drag-and-Drop-Design – vereinfacht die Erstellung von E-Mail-Inhalten ohne Codierung
• Anpassungsoptionen – fügt benutzerdefinierten HTML-/CSS-Code ein
• Vorgefertigte Elemente – bettet auf Wunsch Module wie Schaltfl?chen und soziale Medien ein
• Kompatibilit?t mit Frameworks – l?sst sich in das ausgew?hlte Web-Framework integrieren, egal ob React, Angular usw.
• Plattformübergreifende Reaktionsf?higkeit – reagiert auf alle Plattformen und Ger?te, von Mobilger?ten über Tablets bis hin zu Browsern.

Abschluss

Von allen E-Mail-Editoren ist Unlayer aufgrund seiner Flexibilit?t, sich einfach einzubetten, meine bevorzugte Wahl, da es reaktionsf?hige E-Mail-Vorlagen erm?glicht. Ich glaube auch, dass MailDev gute Arbeit leistet, indem es sicherstellt, dass E-Mails keine Fehler enthalten und intakt erscheinen.

Lassen Sie mich wissen, ob Sie bevorzugte E-Mail-Editoren und andere Tools haben, die ich m?glicherweise übersehen habe. Bis dahin viel Spa? beim Codieren!

LogRocket: JavaScript-Fehler einfacher beheben, indem Sie den Kontext verstehen

Das Debuggen von Code ist immer eine mühsame Aufgabe. Aber je besser Sie Ihre Fehler verstehen, desto einfacher ist es, sie zu beheben.

LogRocket erm?glicht es Ihnen, diese Fehler auf neue und einzigartige Weise zu verstehen. Unsere Frontend-überwachungsl?sung verfolgt die Benutzerinteraktion mit Ihren JavaScript-Frontends, um Ihnen die M?glichkeit zu geben, genau zu sehen, was der Benutzer getan hat, was zu einem Fehler geführt hat.

LogRocket zeichnet Konsolenprotokolle, Seitenladezeiten, Stack-Traces, langsame Netzwerkanforderungen/-antworten mit Header-K?rpern, Browser-Metadaten und benutzerdefinierten Protokollen auf. Es wird nie einfacher sein, die Auswirkungen Ihres JavaScript-Codes zu verstehen!

Probieren Sie es kostenlos aus.

Das obige ist der detaillierte Inhalt vonEine Anleitung zu den besten E-Mail-Bearbeitungstools. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!