Tags zur Verwendung im Assistenten (Inplace Editor) in E-Mail-Vorlagen / Newsletter Vorlagen definieren

 

Bei der Erstellung von HTML-Newslettern kann der Assistent verwendet werden, um einen E-Mail-Inhalt zu erstellen. Mit dem Assistenten muss der Nutzer kein Layout im integrierten WYSIWYG-Editor selbst erstellen, sondern verwendet eine vorgefertigte E-Mail-Vorlage und füllt diese mit Inhalten. Diese vorfertigte E-Mail-Vorlage besteht aus normalen HTML, jedoch mit speziellen Tags, die die Bearbeitung ermöglichen. Beispiele für diese speziellen E-Mail-Vorlagen finden Sie Ordner Dokumente\SuperMailer_templates (Dateien Wizard-Sample*.htm).

Hinweis: In den Programmoptionen muss Internet Explorer Rendering Engine auf Internet Explorer 11 eingestellt werden bzw. ist Microsoft Edge installiert, wird SuperMailer automatisch auf Edge/WebView2 wechseln.

 

Tags

 

<singleline></singleline> Ermöglicht es dem Nutzer den enthaltenen einzeiligen Text zu ändern. Ein etwaiger Vorgabetexte darf keine HTML-Formatierungen enthalten, es muss eine reine einzeilige Zeichenkette sein.

Mit dem zusätzlichen Attribut tableofcontentstitle="true" können Sie den Assistenten anweisen einen anklickbaren Eintrag im Inhaltsverzeichnis zu erzeugen, falls ein Inhaltsverzeichnis-Tag enthalten ist.

Geben Sie das Attribut label="beliebiger einzeiliger Text" an, so dass im Bearbeitungsdialog dieser Text als Feldbezeichner für das Eingabefeld angezeigt wird.

Beispiele:

<h1><singleline>Überschrift</singleline></h1>

<h1><singleline tableofcontentstitle="true">Überschrift, die ebenfalls im Inhaltsverzeichnis angezeigt wird</singleline></h1>

 

<multiline></multiline> Ermöglicht es dem Nutzer formatierten mehrzeiligen Text einzugeben bzw. den Text zu ändern. Dem Nutzer wird bei Bearbeitung des Textbereichs der WYSIWYG-Editor mit verminderten Umfang dargestellt.

Geben Sie das Attribut label="beliebiger einzeiliger Text" an, so dass im Bearbeitungsdialog dieser Text als Feldbezeichner für das Eingabefeld angezeigt wird.

Beispiel:

<multiline>

 <div>Mehrzeiliger Text<br><br>der ebenfalls <b>formatiert</b> werden kann.</div>

</multiline>

 

<tableofcontents></tableofcontents>

 

Fügt an dieser Stelle das Inhaltsverzeichnis üblicherweise in Listenform ein. Die Einträge des Inhaltsverzeichnisses müssen mit <tableofcontentstitle></tableofcontentstitle> gekennzeichnet werden. Alle Bezeichnungen der Inhaltsverzeichniseinträge werden aus <singleline></singleline> mit Attribut tableofcontentstitle="true" Einträgen übernommen.

Optional:
Geben Sie beim Tag <tableofcontents> oder <tableofcontentstitle> die Attribute class="" und/oder style="" an, um die Einträge des Inhaltsverzeichnisses zu formatieren.

 

Beispiel:

<h2>Inhalt</h2>
<ul>
<tableofcontents>
<li>
  <tableofcontentstitle />
</li>
</tableofcontents>
</ul>

 

<repeater></repeater> Kennzeichnet einen wiederholbaren Block, der ebenfalls verschoben werden kann. Klickt der Nutzer im Assistenten auf "Neues Standard-Element", dann wird dieser Block erneut darunter eingefügt. Ein repeater-Block kann Elemente mit Tags <singleline>, <multiline> oder <tableofcontents> und alle anderen HTML-Elemente enthalten.

Fügen Sie das Attribut editable="true" optional hinzu, damit der Nutzer den CSS-Style des Blocks anpassen kann.

Geben Sie das Attribut label="beliebiger einzeiliger Text" an, damit anstelle der Schaltflächen-Bezeichnung "Neues Standard-Element" der eigene Text angezeigt wird.

Geben Sie das Attribut disableOtherElements="true" an, damit die Schaltfläche "Anderes Element" nicht dargestellt wird. Es können danach nur noch die Elemente verwendet werden, die in der Vorlage vorgegeben sind (Beispiel Wizard-Sample (0).htm im Dokumente\SuperMailer_templates-Ordner).

Beispiel:

<h2>Inhalt</h2>
<ul>
<tableofcontents>
<li>
  <tableofcontentstitle />
</li>
</tableofcontents>
</ul>

<repeater>

<h1><singleline tableofcontentstitle="true">Überschrift, die ebenfalls im Inhaltsverzeichnis angezeigt wird</singleline></h1>

<div>

<multiline>

 <div>Mehrzeiliger Text<br><br>der ebenfalls <b>formatiert</b> werden kann.</div>

</multiline>

<img src="http://www.supermailer.de/images/sm.gif" />

</div>

</repeater>

 

Hinweise:

  • Ein Block muss immer um Blockelemente oder innerhalb eines Blockelements angegeben werden, ansonsten könnte durch Verschieben des Blocks der HTML-Code fehlerhaft werden.
  • Bei Newsletter Layouts in Tabellenform, müssen entweder komplette Tabellen oder Inhalte in Zellen durch den repeater-Block umschlossen werden. Tabellenzellen oder Tabellenzeilen sollten nicht mit dem repeater-Tag gekennzeichnet werden, da beim Verschieben oder Hinzufügen eines Elements die Tabellendefinition zerstört werden könnte.

 

 

Attribute für bestimmte HTML-Elemente

img Fügen Sie das Attribut editable="true" hinzu, damit der Nutzer das Bild gegen ein anderes Bild tauschen kann. Geben Sie im img-Tag Höhe/Breite an, dann wird das durch den Nutzer eingefügte Bild automatisch auf diese Höhe/Breite verkleinert dargestellt. Wird keine Höhe/Breite angegeben, dann wird das Bild in seiner Original-Größe dargestellt.

Vergeben Sie beim Bild das CSS-Attribut "max-width: <breite>px", um die maximale Breite eines Bildes festzulegen. Wird später ein Bild gewählt, dann wird bei abweichender Bildbreite der Dialog zur Größenänderung eines Bildes angezeigt und diese Breite für das Bild vorgeschlagen. Der Anwender kann diese Breite bestätigen, muss dies aber nicht.

Geben Sie das Attribut label="beliebiger einzeiliger Text" an, so dass im Bearbeitungsdialog dieser Text als Feldbezeichner für das Eingabefeld angezeigt wird.

Hinweis: Befindet sich dieser HTML-Tag innerhalb eines <multiline>-Tags dann wird das Attribut editable="true" ignoriert und damit die Bearbeitung des Elements direkt im WYSIWYG-Editor ermöglicht.

Beispiel:

<img src="http://www.supermailer.de/images/sm.gif" editable="true" />

 

hr Fügen Sie das Attribut editable="true" hinzu, damit der Nutzer die Eigenschaften der horizontalen Line ändern kann.

Geben Sie das Attribut label="beliebiger einzeiliger Text" an, so dass im Bearbeitungsdialog dieser Text als Feldbezeichner für das Eingabefeld angezeigt wird.

Hinweis: Befindet sich dieser HTML-Tag innerhalb eines <multiline>-Tags dann wird das Attribut editable="true" ignoriert und damit die Bearbeitung des Elements direkt im WYSIWYG-Editor ermöglicht.

Beispiel:

<hr editable="true" />

 

a Fügen Sie das Attribut editable="true" hinzu, damit der Nutzer das Ziel des Hyperlinks und den sichtbaren Link-Text ändern kann.

Geben Sie das Attribut label="beliebiger einzeiliger Text" an, so dass im Bearbeitungsdialog dieser Text als Feldbezeichner für das Eingabefeld angezeigt wird.

Hinweis: Befindet sich dieser HTML-Tag innerhalb eines <multiline>-Tags dann wird das Attribut editable="true" ignoriert und damit die Bearbeitung des Elements direkt im WYSIWYG-Editor ermöglicht.

Beispiel:

<a href="http://www.supermailer.de" editable="true">SuperMailer Webseite</a>

 

Buttons mit abgerundeten Ecken (border-radius)

Verwenden Sie diesen Code, unter etwaiger Abwandlung der Farben und border-Radius, um Schaltflächen mit abgerundeten Ecken in HTML-E-Mails, auch im Outlook, darstellen zu lassen:

<div class="LinkAsButton">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.supermailer.de" style="height:40px;v-text-anchor:middle;width:500px;" arcsize="25%" strokecolor="#4a4a4a" fillcolor="#4a4a4a">
<w:anchorlock/>
<center style="color:#ffffff;font-family:arial,helvetica,sans-serif;font-size:18px;" class="orderButton">Jetzt bestellen/Order now</center>
</v:roundrect>
<![endif]-->
<a class="orderButton"
style="color: #FFFFFF;font-size: 18px; text-decoration: none; border: #4a4a4a 10px solid; display: inline-block; background-color: #4a4a4a; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -khtml-border-radius: 10px; -webkit-text-size-adjust: none;mso-hide:all;"
href="https://www.supermailer.de/" editable="true">Jetzt bestellen/Order now</a>
</div>

Wichtig der Kommentarblock für die Outlook-Darstellung muss sich direkt vor dem Link <a...> befinden, keine Leerzeile einfügen, nur dann wird der Inplace Editor Änderungen des Links in diesem Kommentarblock übernehmen. Bei der Änderung im Kommentarblock wird nach href= gesucht, um den Link zu ändern. Der anzuzeigende Text wird durch Zeichenkettenvergleich ersetzt, daher muss der Text im Kommentarblock genau mit der Angabe im Link übereinstimmen.

 

ul oder ol Fügen Sie das Attribut editable="true" hinzu, damit der Nutzer die einzelnen Listelemente und die Aufzählungszeichen der Liste ändern kann.

Geben Sie das Attribut label="beliebiger einzeiliger Text" an, so dass im Bearbeitungsdialog dieser Text als Feldbezeichner für das Eingabefeld angezeigt wird.

Hinweis: Befindet sich dieser HTML-Tag innerhalb eines <multiline>-Tags dann wird das Attribut editable="true" ignoriert und damit die Bearbeitung des Elements direkt im WYSIWYG-Editor ermöglicht.

Beispiel:

<ol editable="true">
 <li>Eintrag 1</li>
 <li>Eintrag 2</li>
</ol>

 

Hinweise

 

Debugging

Sie können die Desktop-Verknüpfung mit SuperMailer ändern und die Kommandozeilenparameter

/AllowBrowserContextMenu /DevToolsEnabled

hinzufügen.

Wird Internet Explorer verwendet, dann kann das Kontextmenü des Internet Explorers geöffnet werden. Bei Anzeige des Quelltexts wird jedoch nicht der veränderte Quelltext, sondern der Original-Quelltext der geladenen HTML-Datei bzw. des gespeicherten Quelltexts aus der Projektdatei angezeigt.

In Verbindung mit Microsoft Edge/WebView2 können Sie das Kontextmenü öffnen und mit dem Parameter /DevToolsEnabled zusätzlich die Entwicklungstools des Browsers aufrufen und damit ebenfalls direkt Änderungen im Quelltext durchführen oder Fehler in den verwendeten JavaScripten finden.

 

 

 

Siehe dazu auch

E-Mail-Text im WYSIWYG-Editor bearbeiten

Hinweise zu eigenen Vorlagen