HTML pour les e-mails

Convertit le document en HTML adapté aux clients de messagerie. Ceux-ci suppriment les blocs <style>, les feuilles de style externes et les noms de classes ; editor.getEmailHTML() copie donc l’apparence de chaque élément dans un attribut style en ligne, supprime class et id, puis enveloppe le résultat dans un tableau centré de largeur fixe.

La boîte de dialogue Export email HTML avec une zone en lecture seule contenant le HTML avec styles en ligne, commençant par un tableau de présentation, le message Ready to copy 3095 characters et les boutons Copy et Close — Le bouton Email HTML ouvre la boîte de dialogue d’export avec le HTML et ses styles en ligne, prêt à copier.

Deux rendus côte à côte sans feuille de style : à gauche, getHTMLCode avec la police Times par défaut du navigateur et du texte simple ; à droite, getEmailHTML conserve la police système, le paragraphe d’introduction gris plus grand, la citation en italique et le badge jaune New — Le même document affiché sans feuille de style : `getHTMLCode()` à gauche, `getEmailHTML()` à droite. La bordure gauche de la citation disparaît ; consultez « À savoir ».

Activation

Cette fonctionnalité est fournie par le plugin emailtoolkit.js (également inclus dans plugins/all_plugins.js). Il ajoute la méthode editor.getEmailHTML() et la commande emailexport (« Email HTML »). Le bouton figure dans le panneau « more » de la barre d’outils par défaut, et le menu de commandes slash le présente sous le nom « Export email HTML ». Pour l’ajouter à votre propre barre d’outils :

<div id="editor"><h2>October news</h2><p class="lede">Three things changed this month.</p>…</div>
<script>
var editor = new RichTextEditor("#editor", {
  contentCssUrl: "site.css",
  toolbar_default: "{bold,italic,underline}|{paragraphs}|{emailexport}"
});
// Send this to your mail service:
var html = editor.getEmailHTML({ width: 600 });
</script>

Options

Option	Valeur par défaut	Fonctionnement
`emailInlineProperties`	`color`, `background-color`, `font-family`, `font-size`, `font-weight`, `font-style`, `text-decoration`, `text-align`, `line-height`, les quatre propriétés `margin-` et `padding-`, `border`, `border-radius`, `vertical-align`, `list-style-type`, `width`	Propriétés CSS copiées sur chaque élément. Seules ces propriétés sont copiées.
`emailWrapWidth`	`640`	Largeur en pixels du tableau conteneur.

getEmailHTML(options) accepte { wrap: false } pour renvoyer le contenu avec ses styles en ligne sans le tableau, et { width: 600 } pour remplacer emailWrapWidth pour un seul appel.

Résultat obtenu

Chaque élément reçoit la valeur calculée de chaque propriété de la liste, sauf les valeurs par défaut (normal, none, 0px, fond transparent, graisse 400, alignement à gauche ou au début, ligne de base). width n’est écrit que sur les tableaux, les cellules et les images, et list-style-type uniquement sur les listes. Dans l’exemple ci-dessus, getEmailHTML({ wrap: false }) commence ainsi :

<h2 style="color:rgb(17, 20, 24);font-family:system-ui, -apple-system, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif;font-size:24px;font-weight:600;line-height:30px;margin-bottom:14.4px">October news</h2><p style="color:rgb(51, 65, 85);font-family:system-ui, …;font-size:20px;line-height:34px;margin-bottom:20px">Three things changed this month.</p>

L’attribut class="lede" et le id du titre ont disparu ; le texte gris de 20px du paragraphe d’introduction provenait de la classe. Les liens conservent href, les images conservent src et alt. Les éléments script, style, link et meta sont supprimés. Avec le conteneur (par défaut), le contenu est placé dans :

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse"><tr><td align="center" style="padding:0"><table role="presentation" width="600" cellpadding="0" cellspacing="0" style="border-collapse:collapse;max-width:600px;width:100%"><tr><td style="padding:16px;font-family:Arial,Helvetica,sans-serif">…</td></tr></table></td></tr></table>

La boîte de dialogue affiche le HTML complet avec son conteneur dans une zone de texte en lecture seule qui reçoit le focus, sa longueur (« Ready to copy 3095 characters. »), Copy, qui le copie dans le presse-papiers, et Close.

À savoir

Les propriétés absentes de la liste sont perdues. La citation ci-dessus avait border-left: 4px solid via sa classe ; border n’a pas de valeur unique lorsque les côtés diffèrent, donc cette règle n’a pas été conservée. Ajoutez la propriété nécessaire : avec emailInlineProperties: ["color", "border-left", "padding-left", "font-style"], la citation a donné <blockquote style="color:rgb(87, 96, 106);border-left:4px solid rgb(37, 99, 235);padding-left:12px;font-style:italic">. Les propriétés ajoutées ne sont pas filtrées selon leur valeur par défaut ; elles apparaissent donc aussi sous la forme border-left:0px none sur les autres éléments.
Les styles sont lus dans l’éditeur tel qu’il est affiché. La feuille de style du contenu (contentCssUrl) donne leur apparence aux classes : chargez donc le CSS souhaité pour vos e-mails. Les polices deviennent la liste complète des polices calculées.
Le résultat est construit à partir du document actif ; les balises peuvent donc différer de getHTMLCode() : le gras saisi sous la forme <strong> reste <strong> ici, alors que getHTMLCode() a renvoyé <b>.
Lorsque l’aperçu des champs de fusion est activé, l’e-mail utilise les champs du modèle, et non les données d’exemple.
Le résultat n’est enregistré nulle part ; le document lui-même reste inchangé. Les URL des images sont conservées telles quelles : utilisez donc des URL absolues dans les e-mails.

Voir aussi : démonstration de campagne e-mail, récupérer le HTML.