é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 tache 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!

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Java et JavaScript sont différents langages de programmation, chacun adapté à différents scénarios d'application. Java est utilisé pour le développement des grandes entreprises et des applications mobiles, tandis que JavaScript est principalement utilisé pour le développement de pages Web.

JavaScriptCommentsaSententialFormantaining, Reading et GuidingCodeEexecution.1) unique-linecomesaUSEUSEFORQUICKEXPLANATIONS.2) Multi-linecommentSExPlainComplexLogicorProvideTailedDocumentation.3) Inlinecomementsclarifypecifications

Les points suivants doivent être notés lors du traitement des dates et du temps dans JavaScript: 1. Il existe de nombreuses fa?ons de créer des objets de date. Il est recommandé d'utiliser les cha?nes de format ISO pour assurer la compatibilité; 2. Get and définir des informations de temps peuvent être obtenues et définir des méthodes, et notez que le mois commence à partir de 0; 3. Les dates de mise en forme manuelle nécessitent des cha?nes et les bibliothèques tierces peuvent également être utilisées; 4. Il est recommandé d'utiliser des bibliothèques qui prennent en charge les fuseaux horaires, comme Luxon. La ma?trise de ces points clés peut éviter efficacement les erreurs courantes.

PlacertagsatthebottomofablogPostorwebPageSerSpracticalPurpossForseo, userexperience, anddesign.1.ithelpswithseobyallowingsechingenginestoaccesskeyword-elevanttagswithoutcluteringtheaincontent..itimproveserexperceenceegmentyepingthefocusonThearrlUl

Javascriptispreferredforwebdevelopment, tandis que javaisbetterforlarge-scalebackenSystemsandandroidApps.1)

JavascripthSsevenfundamentalDatatypes: nombre, cha?ne, booléen, indéfini, nul, objet, andymbol.1) nombres usUseadouble-précisformat, utile

La capture d'événements et la bulle sont deux étapes de la propagation des événements dans DOM. La capture est de la couche supérieure à l'élément cible, et la bulle est de l'élément cible à la couche supérieure. 1. La capture de l'événement est implémentée en définissant le paramètre UseCapture d'AdveventListener sur true; 2. événement Bubble est le comportement par défaut, UseCapture est défini sur False ou Omise; 3. La propagation des événements peut être utilisée pour empêcher la propagation des événements; 4. événement Bubbling prend en charge la délégation d'événements pour améliorer l'efficacité du traitement du contenu dynamique; 5. La capture peut être utilisée pour intercepter les événements à l'avance, telles que la journalisation ou le traitement des erreurs. La compréhension de ces deux phases aide à contr?ler avec précision le calendrier et comment JavaScript répond aux opérations utilisateur.

Java et JavaScript sont différents langages de programmation. 1.Java est un langage typique et compilé, adapté aux applications d'entreprise et aux grands systèmes. 2. JavaScript est un type dynamique et un langage interprété, principalement utilisé pour l'interaction Web et le développement frontal.
