Un guide des meilleurs outils d'édition d'e-mails

Écrit par Isaac Okoro✏️

Les éditeurs d'e-mails peuvent être considérés comme des outils WYSIWYG avancés (ce que vous voyez est ce que vous obtenez), qui permettent aux utilisateurs de créer des modèles d'e-mails sans posséder de compétences en codage. Ces éditeurs sont utilisés pour créer des e-mails réactifs qui utilisent HTML et CSS pour répondre à différentes largeurs d'appareils.

Dans cet article, nous nous concentrerons sur les outils d'édition d'e-mails les plus efficaces disponibles ainsi que sur leurs fonctionnalités uniques, en mettant l'accent sur les options open source et largement gratuites. Ensuite, nous intégrerons l'un de ces éditeurs, Unlayer, et utiliserons MailDev pour tester.

Découche

Unlayer est un éditeur d'e-mails open source par glisser-déposer qui permet aux utilisateurs de créer des e-mails avec un minimum d'effort. Lorsqu'il est utilisé avec le framework React, il sert de composant wrapper qui fournit un générateur de courrier électronique visuel convivial pour les applications Web.

Il peut être facilement intégré aux projets React, Vue et Angular. Voici quelques fonctionnalités clés :

• Éditeur glisser-déposer
• Modèles réactifs prêts à l'emploi
• Options d'exportation HTML et JSON
• Possibilité d'ajouter des outils personnalisés pour des cas d'utilisation spécialisés

E-mail facile

Un autre éditeur de courrier électronique open source et gratuit est Easy email qui a été développé sur la base de MJML, un langage de balisage permettant de créer des e-mails réactifs.

Il offre une interface conviviale avec une gamme de fonctionnalités qui offrent aux utilisateurs un éditeur de courrier électronique par glisser-déposer similaire à Unlayer.

Easy email s'intègre à React en tant que wrapper pour fournir son rendu d'éditeur intuitif. Voici ses principales caractéristiques :

• Éditeur glisser-déposer
• Modèles intégrés
• Prise en charge de la conception réactive

MJML

MJML est un langage de balisage qui crée des modèles d'e-mails réactifs. Il est intuitif dans le sens où son balisage est rendu en HTML réactif pour n'importe quel appareil et client de messagerie.

Principales fonctionnalités :

• Développement d'emails simplifié avec la syntaxe MJML
• Convertit MJML en HTML réactif
• Bibliothèque de composants étendue pour les structures de courrier électronique courantes

RaisinsJS

GrapesJS est un outil de marketing par e-mail gratuit permettant de créer des e-mails réactifs et professionnels. Il offre une interface basée sur des composants qui active des blocs de construction dans les modèles d'e-mails.

Vous trouverez ci-dessous quelques fonctionnalités clés de GrapesJS :

• Composants modulaires pour créer des e-mails
• Conception réactive par défaut
• Extensible avec des plugins et des fonctionnalités supplémentaires

Intégration d'éditeurs de courrier électronique avec des frameworks Web frontend

L'un des principaux avantages des éditeurs de courrier électronique modernes est qu'ils peuvent fonctionner avec les frameworks Web frontaux les plus populaires. De telles intégrations permettent aux utilisateurs non techniques de créer des e-mails réactifs et personnalisés au sein d'une application Web.

Dans cette section, nous explorerons comment intégrer Unlayer dans une application React.

Commençons par exécuter la commande ci-dessous pour créer et accéder à une nouvelle application React :

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

Ensuite, installez le package React-Email-Editor dans l'application React nouvellement créée :

npm install react-email-editor

Après l'installation, mettez à jour votre app.js et mettez à jour l'App.css avec le bloc de code ci-dessous :

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

Ensuite, mettez à jour le fichier App.js avec le code ci-dessous :

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;

Dans le bloc de code ci-dessus, le composant utilise useRef pour référencer l'éditeur d'e-mail (emailEditorRef), qui exporte le contenu de l'e-mail conçu. Lorsque vous cliquez sur le bouton Envoyer un e-mail, la fonction exportHtml est déclenchée, qui extrait l'élément HTML vers la fonction sendTestEmail, puis envoie une demande de publication à l'API backend localhost.

MailDev pour les tests de messagerie

MailDev est un serveur SMTP (Simple Mail Transfer Protocol) open source permettant de tester les e-mails générés par le projet pendant la phase de développement qui s'exécute localement sur la machine d'un utilisateur.

Il fournit une interface Web et un serveur local pour envoyer et recevoir des e-mails de test depuis le backend sans rien envoyer à de vraies adresses e-mail.

L'application MailDev utilise un serveur backend pour l'intégration avec les paramètres SMTP de votre application. En bref, MailDev est un serveur SMTP simulé qui fonctionne comme un stockage intermédiaire pour les emails envoyés depuis votre application pendant le développement.

Lançons un email de test généré dans la section précédente en utilisant le serveur MailDev. Tout d'abord, nous allons essayer de créer notre serveur backend en utilisant Node.js. Ouvrez le terminal dans votre répertoire préféré et exécutez la commande ci-dessous pour créer une structure de projet Node :

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

La commande ci-dessus créera un dossier contenant les modules Node téléchargés. L'étape suivante consiste à installer Express.js et Nodemailer, ce que nous ferons en exécutant la commande ci-dessous :

npm install express nodemailer cors

Ensuite, créez un fichier server.js dans le répertoire du projet et collez-y le code ci-dessous :

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

Dans le bloc de code ci-dessus, nous configurons un serveur Node utilisant Express qui utilise Nodemailer pour envoyer des e-mails via le serveur SMTP de MailDev. Le serveur écoute sur le port 8080 et accepte les requêtes POST vers le point de terminaison /send-email.

Ensuite, exécutez la commande ci-dessous dans le terminal pour démarrer le serveur de nœuds :

node server.js

Enfin, exécutez la commande ci-dessous pour installer MailDev globalement sur votre machine :

npm install -g maildev

Une fois MailDev téléchargé et installé avec succès, exécutez la commande ci-dessous pour le faire tourner :

maildev

Une fois toutes les configurations terminées, démarrons nos serveurs frontaux et créons des modèles d'e-mails sympas. Exécutez la commande ci-dessous dans le terminal du frontend pour démarrer le projet React :

npm start

Rendez-vous maintenant sur http://localhost:3000/ pour prévisualiser notre éditeur de courrier électronique :

Avec notre modèle d'e-mail facilement conçu, procédons à son envoi et voyons à quoi il ressemble sur un courrier de test utilisant MailDev.

Concevez votre modèle d'e-mail selon vos préférences, envoyez l'e-mail en cliquant sur le bouton et rendez-vous sur http://127.0.0.1:1080/#/ pour prévisualiser l'e-mail :

Ça devrait être plutôt chouette ! Vous l'avez fait !

Fonctionnalités clés à rechercher dans les éditeurs de courrier électronique

J'ai répertorié mes éditeurs de courrier électronique préférés ci-dessus, mais voici les qualités générales que je recherche pour décider si un éditeur de courrier électronique vaut la peine d'être poursuivi :

• Modèles réactifs : adapte automatiquement les e-mails aux vues mobiles et de bureau
• Conception par glisser-déposer : simplifie la création de contenu d'e-mail sans codage
• Options de personnalisation — injecte du code HTML/CSS personnalisé
• Éléments prédéfinis – intègre des modules tels que des boutons et des réseaux sociaux si vous le souhaitez
• Compatibilité avec les frameworks : s'intègre au framework Web choisi, qu'il s'agisse de React, Angular, etc.
• Réactivité sur toutes les plateformes — est réactif sur toutes les plateformes et tous les appareils, du mobile à la tablette, en passant par les navigateurs

Conclusion

Parmi tous les éditeurs de courrier électronique, la flexibilité d'intégrer facilement Unlayer en fait mon choix préféré car il permet des modèles de courrier électronique réactifs. Je pense également que MailDev fait du bon travail en garantissant que les e-mails ne contiennent aucune erreur et semblent intacts.

Faites-moi savoir si vous avez des éditeurs de courrier électronique préférés et d'autres outils que j'aurais pu manquer. En attendant, bon codage !

---

LogRocket : déboguez plus facilement les erreurs JavaScript en comprenant le contexte

Le débogage du code est toujours une tâche fastidieuse. Mais plus vous comprenez vos erreurs, plus il est facile de les corriger.

LogRocket vous permet de comprendre ces erreurs de manière nouvelle et unique. Notre solution de surveillance front-end suit l'engagement des utilisateurs avec vos frontends JavaScript pour vous donner la possibilité de voir exactement ce que l'utilisateur a fait qui a conduit à une erreur.

LogRocket enregistre les journaux de la console, les temps de chargement des pages, les traces de pile, les requêtes/réponses réseau lentes avec les corps d'en-tête, les métadonnées du navigateur et les journaux personnalisés. Comprendre l'impact de votre code JavaScript n'aura jamais été aussi simple !

Essayez-le gratuitement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!