HTML para e-mail

Transforma o documento em um HTML que sobrevive a um cliente de e-mail. Os clientes de e-mail descartam blocos <style>, folhas de estilo externas e nomes de classes; por isso, editor.getEmailHTML() copia a aparência de cada elemento para ele mesmo como um atributo style inline, remove class e id e envolve o resultado em uma tabela centralizada de largura fixa.

A caixa de diálogo Export email HTML com uma caixa de texto somente leitura de HTML com estilos inline começando por uma tabela de apresentação, a mensagem Ready to copy 3095 characters e os botões Copy e Close — O botão Email HTML abre a caixa de diálogo de exportação com o HTML com estilos inline pronto para copiar.

Duas renderizações lado a lado, sem folha de estilo: à esquerda, a saída de getHTMLCode com a fonte Times padrão do navegador e texto simples; à direita, a saída de getEmailHTML mantendo a fonte do sistema, o parágrafo de abertura maior em cinza, a citação em itálico e o selo amarelo New — O mesmo documento renderizado sem folha de estilo: `getHTMLCode()` à esquerda, `getEmailHTML()` à direita. A borda esquerda da citação em destaque se perde; veja O que você precisa saber.

Ative o recurso

O recurso é o plugin emailtoolkit.js (também incluído em plugins/all_plugins.js). Ele adiciona o método editor.getEmailHTML() e o comando emailexport ("Email HTML"). O botão fica no painel "more" da barra de ferramentas padrão, e o menu de barra o lista como "Export email HTML". Para colocá-lo na sua própria barra de ferramentas:

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

Opções

Opção	Padrão	O que faz
`emailInlineProperties`	`color`, `background-color`, `font-family`, `font-size`, `font-weight`, `font-style`, `text-decoration`, `text-align`, `line-height`, os quatro `margin-` e `padding-`, `border`, `border-radius`, `vertical-align`, `list-style-type`, `width`	As propriedades CSS copiadas para cada elemento. Só estas são copiadas.
`emailWrapWidth`	`640`	Largura em pixels da tabela que envolve o conteúdo.

getEmailHTML(options) aceita { wrap: false } para retornar o conteúdo com estilos inline sem a tabela, e { width: 600 } para sobrescrever emailWrapWidth em uma chamada.

O que você recebe

Cada elemento recebe o valor computado de cada propriedade da lista, exceto os valores que são o padrão (normal, none, 0px, um fundo transparente, peso 400, alinhamento à esquerda ou start, baseline). width só é gravado em tabelas, células e imagens, e list-style-type só em listas. No teste acima, getEmailHTML({ wrap: false }) começa assim:

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

O class="lede" e o id do título sumiram; o texto cinza de 20px do parágrafo de abertura veio da classe. Os links mantêm href, as imagens mantêm src e alt. Os elementos script, style, link e meta são descartados. Com o contêiner (o padrão), o conteúdo fica 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>

A caixa de diálogo mostra o HTML completo, já envolvido, em uma caixa de texto somente leitura com o foco nela, o tamanho ("Ready to copy 3095 characters."), Copy, que o grava na área de transferência, e Close.

O que você precisa saber

Propriedades fora da lista se perdem. A citação em destaque acima tinha border-left: 4px solid vindo da classe dela; border não tem um valor único quando os lados são diferentes, então a regra não passou. Adicione a propriedade de que você precisa: com emailInlineProperties: ["color", "border-left", "padding-left", "font-style"], a citação saiu como <blockquote style="color:rgb(87, 96, 106);border-left:4px solid rgb(37, 99, 235);padding-left:12px;font-style:italic">. As propriedades que você adiciona não são filtradas pelos valores padrão; por isso, também aparecem como border-left:0px none em outros elementos.
Os estilos são lidos do editor como ele é exibido. É a folha de estilo de conteúdo (contentCssUrl) que dá a aparência das classes; então carregue o mesmo CSS que os seus e-mails devem ter. As fontes viram a pilha de fontes computada completa.
Ele é gerado a partir do documento ativo, então as tags podem ser diferentes das de getHTMLCode(): um negrito digitado como <strong> continua <strong> aqui, enquanto getHTMLCode() retornou <b>.
Com a prévia de campos de mesclagem ativada, o e-mail usa os campos do modelo, e não os dados de exemplo.
A saída não é armazenada em lugar nenhum; o documento em si não é alterado. As URLs das imagens são mantidas como foram escritas; por isso, use URLs absolutas em e-mails.

Relacionados: demonstração de campanha de e-mail, como obter o HTML.