HTML para correo electrónico

Convierte el documento en HTML que mantiene su formato en un cliente de correo. Los clientes de correo descartan los bloques <style> , las hojas de estilos externas y los nombres de clase, por lo que editor.getEmailHTML() copia el aspecto de cada elemento en un atributo style en línea, elimina class y idy envuelve el resultado en una tabla centrada de ancho fijo.

El cuadro de diálogo Export email HTML con un cuadro de texto de solo lectura con HTML de estilos en línea que empieza por una tabla de presentación, el mensaje Ready to copy 3095 characters y los botones Copy y Close — El botón Email HTML abre el cuadro de diálogo de exportación con el HTML con estilos en línea listo para copiar.

Dos versiones una junto a otra sin hoja de estilos: a la izquierda, la salida de getHTMLCode con la fuente Times predeterminada del navegador y texto sin formato; a la derecha, la salida de getEmailHTML que conserva la fuente del sistema, el párrafo inicial gris de mayor tamaño, la cita en cursiva y la etiqueta amarilla New — El mismo documento mostrado sin hoja de estilos: `getHTMLCode()` a la izquierda, `getEmailHTML()` a la derecha. Se pierde el borde izquierdo de la cita destacada; consulta Aspectos a tener en cuenta.

Cómo activarlo

Esta función la ofrece el plugin emailtoolkit.js (también incluido en plugins/all_plugins.js). Añade el método editor.getEmailHTML() y el comando emailexport ("Email HTML"). El botón está en el panel "more" de la barra predeterminada y el menú de comandos con barra lo muestra como "Export email HTML". Para añadirlo a tu propia barra:

<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>

Opciones

Opción	Valor predeterminado	Función
`emailInlineProperties`	`color`, `background-color`, `font-family`, `font-size`, `font-weight`, `font-style`, `text-decoration`, `text-align`, `line-height`, las cuatro propiedades `margin-` y `padding-`, `border`, `border-radius`, `vertical-align`, `list-style-type`, `width`	Las propiedades CSS que se copian en cada elemento. Solo se copian estas.
`emailWrapWidth`	`640`	Ancho en píxeles de la tabla contenedora.

getEmailHTML(options) acepta { wrap: false } para devolver el contenido con estilos en línea sin la tabla, y { width: 600 } para reemplazar emailWrapWidth en una sola llamada.

Resultado obtenido

Cada elemento recibe el valor calculado de cada propiedad de la lista, excepto los valores predeterminados (normal, none, 0px, un fondo transparente, grosor 400, alineación izquierda o inicial y alineación con la línea base). width solo se escribe en tablas, celdas e imágenes, y list-style-type solo en listas. En la ejecución anterior, getEmailHTML({ wrap: false }) comienza así:

<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>

El class="lede" y el id del encabezado desaparecen; el texto gris de 20px del párrafo inicial procedía de la clase. Los enlaces conservan hrefy las imágenes conservan src y alt. script, style, link y meta . Se eliminan estos elementos. Con el contenedor (la opción predeterminada), el contenido queda dentro de:

<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>

El cuadro de diálogo muestra el HTML completo con su contenedor en un cuadro de texto de solo lectura que recibe el foco, la longitud ("Ready to copy 3095 characters."), Copy, que lo copia al portapapeles, y Close.

Aspectos a tener en cuenta

Las propiedades que no están en la lista se pierden. La cita destacada anterior tenía border-left: 4px solid por su clase; border no tiene un valor único cuando los lados son diferentes, por lo que la regla no se conservó. Añade la propiedad que necesites: con emailInlineProperties: ["color", "border-left", "padding-left", "font-style"] la cita se generó como <blockquote style="color:rgb(87, 96, 106);border-left:4px solid rgb(37, 99, 235);padding-left:12px;font-style:italic">. Las propiedades que añadas no se filtran para excluir valores predeterminados, por lo que también aparecen como border-left:0px none en otros elementos.
Los estilos se leen del editor tal como se muestra. La hoja de estilos del contenido (contentCssUrl) define el aspecto de las clases, así que carga el mismo CSS que deban tener tus correos. Las fuentes se convierten en la lista completa de fuentes calculada.
Se genera a partir del documento activo, por lo que las etiquetas pueden diferir de getHTMLCode(): el texto en negrita escrito como <strong> se conserva como <strong> aquí, mientras que getHTMLCode() devolvió <b>.
Con la vista previa de campos de combinación activada, el correo usa los campos de la plantilla y no los datos de ejemplo.
El resultado no se almacena en ningún lugar; el documento no se modifica. Las URL de las imágenes se conservan tal como están escritas, por lo que debes usar URL absolutas en los correos.

Relacionado: demo de campañas de correo, obtención del HTML.