E-Mail-HTML

Wandelt das Dokument in HTML um, das einem E-Mail-Client standhält. E-Mail-Clients fallen aus<style>Blöcke, externe Stylesheets und Klassennamen usweditor.getEmailHTML()kopiert das Aussehen jedes Elements als Inline daraufstyleAttribut, entferntclassUndidund umschließt das Ergebnis in einer zentrierten Tabelle mit fester Breite.

Schalten Sie es ein

Die Funktion ist dieemailtoolkit.jsPlugin (auch inplugins/all_plugins.js). Es fügt die Methode hinzueditor.getEmailHTML()und der Befehlemailexport ( "Email HTML"). Der Knopf befindet sich im"more"Panel der Standardsymbolleiste, und im Slash-Menü wird es als aufgeführt"Export email HTML". So fügen Sie es in Ihre eigene Symbolleiste ein:

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

Optionen

Option	Standard	Was es bewirkt
emailInlineProperties	color, background-color, font-family, font-size, font-weight, font-style, text-decoration, text-align, line-height, die vier margin-* und padding-*, border, border-radius, vertical-align, list-style-type, width	Die auf jedes Element kopierten CSS-Eigenschaften. Nur diese werden kopiert.
emailWrapWidth	640	Breite der Umbruchtabelle in Pixel.

getEmailHTML(options) benötigt { wrap: false }, um den eingebundenen Inhalt ohne die Tabelle zurückzugeben, und { width: 600 }, um emailWrapWidth für einen Aufruf zu überschreiben.

Was Sie bekommen

Jedes Element erhält den berechneten Wert jeder aufgelisteten Eigenschaft abzüglich der Standardwerte (normal, none, 0px, ein transparenter Hintergrund, Gewichtung 400, Links- oder Startausrichtung, Grundlinie). width wird nur auf Tabellen, Zellen und Bilder geschrieben und list-style-type nur auf Listen. Aus dem obigen Lauf startet getEmailHTML({ wrap: false }):

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

Der class="lede" und der id der Überschrift sind verschwunden; Der 20 Pixel große graue Text des Hauptabsatzes stammt aus der Klasse. Links behalten href, Bilder behalten src und alt. Die Elemente script, style, link und meta werden gelöscht. Mit dem Wrapper (Standardeinstellung) befindet sich der Inhalt in:

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

Das Dialogfeld zeigt den vollständig umschlossenen HTML-Code in einem schreibgeschützten Textfeld mit Fokus darauf, der Länge ( "Ready to copy 3095 characters." ), „Kopieren“, wodurch es in die Zwischenablage geschrieben wird, und „Schließen“.

Wissenswertes

• Eigenschaften außerhalb der Liste gehen verloren. Das Pull-Zitat oben hatte border-left: 4px solid aus seiner Klasse; border hat keinen Einzelwert, wenn die Seiten unterschiedlich sind, daher kam die Regel nicht durch. Fügen Sie die benötigte Eigenschaft hinzu: mit emailInlineProperties: ["color", "border-left", "padding-left", "font-style"] wurde das Angebot als <blockquote style="color:rgb(87, 96, 106);border-left:4px solid rgb(37, 99, 235);padding-left:12px;font-style:italic"> ausgegeben. Von Ihnen hinzugefügte Eigenschaften werden nicht nach Standardwerten gefiltert, sodass sie auch auf anderen Elementen als border-left:0px none angezeigt werden.
• Stile werden aus dem Editor gelesen, während sie angezeigt werden. Das Inhalts-Stylesheet (contentCssUrl) gibt den Klassen ihr Aussehen. Laden Sie daher dasselbe CSS, das Ihre E-Mails haben sollten. Schriftarten werden zum vollständig berechneten Schriftartenstapel.
• Es wird aus dem Live-Dokument erstellt, daher können sich Tags von getHTMLCode() unterscheiden: Fett gedruckt als <strong> bleibt hier <strong>, während getHTMLCode() <b> zurückgab.
• Wenn die Zusammenführungsfeldvorschau aktiviert ist, verwendet die E-Mail die Felder der Vorlage und nicht die Beispieldaten.
• Die Ausgabe wird nirgendwo gespeichert; das Dokument selbst bleibt unverändert. Bild-URLs werden wie geschrieben beibehalten, daher sollten Sie in E-Mails absolute URLs verwenden.

Verwandt: E-Mail-Kampagnen-Demo, HTML abrufen.