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