Eine Anleitung zu den besten E-Mail-Bearbeitungstools

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!