Heim > Web-Frontend > js-Tutorial > Eine Anleitung zu den besten E-Mail-Bearbeitungstools

Eine Anleitung zu den besten E-Mail-Bearbeitungstools

Barbara Streisand
Freigeben: 2024-11-03 03:49:30
Original
637 Leute haben es durchsucht

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 
Nach dem Login kopieren

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

npm install react-email-editor
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
Nach dem Login kopieren

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
Nach dem Login kopieren

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
Nach dem Login kopieren

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");
});
Nach dem Login kopieren

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
Nach dem Login kopieren

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

npm install -g maildev
Nach dem Login kopieren

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

maildev
Nach dem Login kopieren

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
Nach dem Login kopieren

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

A guide to the best email editing tools

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:

A guide to the best email editing tools

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.

A guide to the best email editing tools

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage