E-mail HTML

Mail apps drop most <style> blocks and stylesheets. If you write newsletters or notices in the editor, read them with getHTML({ inlineStyles: true }): the fonts, sizes, colors and spacing you see in the editor are written into each tag's style attribute.

createEditor('#editor', {
  toolbar: 'heading | bold italic | color | bulletList | link',
  contentStyle: 'font-family: Georgia, serif; font-size: 16px; line-height: 1.7;',
  onReady: (ed) => {
    const out = document.createElement('pre');
    out.style.cssText = 'white-space: pre-wrap; font-size: 12px; max-height: 220px; overflow: auto';
    const btn = document.createElement('button');
    btn.type = 'button';
    btn.textContent = 'Show e-mail HTML';
    btn.onclick = () => { out.textContent = ed.getHTML({ inlineStyles: true }); };
    ed.statusEl.prepend(btn);
    ed.root.after(out);
  },
});

Compare the saved HTML (button below) with the e-mail HTML (button under the editor).

How it works

• The HTML is laid out once off screen at the editor's width, and the computed styles are read.
• Inherited values (font, size, weight, color, line height, alignment) are written only where they differ from the parent.
• Non-inherited values (background, margin, padding, borders, radius) are written only where they differ from the bare tag.
• Everything is wrapped in <div style="font-family: …; font-size: …; line-height: …; color: …">.
• Looks from contentStyle and from styles menu classes come through as computed values.

const html = editor.getHTML({ inlineStyles: true });
await fetch('/newsletter', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ subject, html }),
});

Options