Dies ist eine alte Version des Dokuments!
Bei promio.mail OTML handelt es sich um eine eigens für den E-Mail-Editor geschaffene Erweiterung des HTML-Standards.
Für das Verständnis und die Anwendung von OTML sind grundlegende Kenntnisse von HTML und CSS daher zwingend erforderlich.
OTML dient dazu Bereiche eines E-Mail Templates für den promio.mail E-Mail-Editor als nachträglich editierbar zu kennzeichnen. Die globale Struktur der E-Mail wird dabei nicht beeinflusst:
Der Designer gestaltet seine E-Mail wie gewohnt mit HTML und CSS. Danach kann er durch die Verwendung von OTML-Elementen bestimmte Bereiche seines Templates für den E-Mail-Editor als editierbar markieren. Z.B. Bereiche zur freien Texteingabe, Änderung von Bildquellen, Austausch von Inhalten etc.
Die promio.mail OTML-Elemente sind in zwei Namensräume aufgeteilt. pm
und pme
.
<pme:singleline /> <pm:toc />
Darüber hinaus stehen einige neue Attribute auch für HTML Elemente zur Verfügung.
<img pmedit="true" />
Elemente, deren Inhalt manuell editierbar ist, gehören zum Namensraum pme
Elemente, deren Inhalt automatisch generiert wird, gehören zum pm:
Namensraum.
Je nach Element gibt es im E-Mail-Editor spezifische Editoren zur Manipulation des Inhalts.
Bedeutung | Definiert eine editierbare Textzeile. | ||
---|---|---|---|
Attribut | Wert | Beschreibung | Beispiel |
label | - | Beschriftung für den Editor | <pme:singleline label="datum">19.11.2014</pme:singleline> |
pmtoctitle | [hier Überschrift] | Überschrift für Inhaltsverzeichnis | <pme:singleline pmtoctitle="Table of contents" label="title">consetetur sadipscing elitr</pme:singleline> |
Bedeutung | Definiert allgemein einen editierbaren Bereich in einem E-Mail. | ||
---|---|---|---|
Attribut | Wert | Beschreibung | Beispiel |
Label | - | Beschriftung für den Editor | <pme:multiline label="home"> consetetur sadipscing elitr </pme:multiline> |
pmdesign | header footer content | Vorlagen, die später in CK-Editor auswählbar sind | <pme:multiline label="markdown" pmdesign="footer"> Stet clita kasd gubergren, no sea takimata sanctus amet.</pme:multiline> |
pmtoctitle | [hier Überschrift] | Überschrift für Inhaltsverzeichnis | <pme:multiline label="title" pmtoctitle="footer"> Stet clita kasd gubergren.</pme:multiline> |
Mit dem Attribut pmdesign
wird die Funktionalität des Designvorlagen-Managers in promio-mail beeinflußt.
Der Designvorlagen-Manager erlaubt das Templateunabhängige und -übergreifende verwenden/speichern von Text-Vorlagen. Diese können im Normalfall in jedem editierbaren Bereich eines Templates vom Redakteur verwendet bzw. als neue Vorlagen gespeichert werden.
Um die Auswahl der verfügbaren Vorlagen für einen editierbaren Bereich einzugrenzen, kann mit Hilfe von pmdesign
angegeben werden, das der betroffene Bereich nur Vorlagen aus der angegebenen Kategorie anbietet bzw. beim speichern nur in diese Kategorie gespeichert werden kann.
<pme:multiline pmdesign="footer">Interessanter Inhalt...</pme:multiline>
Der Redakteur bekommt im Designvorlagen-Manager nun nur noch Vorlagen angeboten, die vorher in der Kategorie „footer“ angelegt wurden, bzw. beim anlegen einer Vorlage wird diese in der Kategorie „footer“ abgelegt.
Definiert einen Bereich mit wiederkehrenden Blöcken.
Dieses Element muss mindestens ein <pme:layout />
Element enthalten. Es kann darüber hinaus ein oder mehrere <pme:repeatercontent />
Elemente enthalten.
Mit dem <pme:layout /> Element wird eine Vorlage definiert, die dem <pme:repeater />
Element im E-Mail-Editor hinzugefügt werden kann. Es steht dort in einer Auswahlliste zur Verfügung und kann dem <pme:repeater />
Element beliebig oft hinzugefügt werden.
Mit dem <pme:repeatercontent /> Element wird ein vordefinierter Bestandteil des <pme:repeater />
Elements definiert. Es wird standardmäßig als einzelner Block angezeigt, ansonsten verhält es sich wie ein <pme:layout /> Element.
<pme:repeater> <pme:layout name="repeaterBlockTemplate1"> <table> <tr> <td> Block, der dem Repeater hinzugefügt werden kann. </td> </tr> </table> </pme:layout> <pme:layout name="repeaterBlockTemplate2"> <p> Weiterer Block, der dem Repeater hinzugefügt werden kann. </p> </pme:layout> <pme:repeatercontent> <p> Block im Repeater, der initial sichtbar ist. </p> </pme:repeatercontent> </pme:repeater>
Das <pme:layout />
Element enthält eine Vorlage die dem <pme:repeater />
Element im E-Mail-Editor hinzugefügt werden kann. Es steht dort in einer Auswahlliste zur Verfügung und kann dem <pme:repeater />
Element beliebig oft hinzugefügt werden. Innerhalb von <pme:layout />
können editierbare Elemente verwendet werden.
Es wird immer das Attribut name
erwartet.
Attribute | |||
---|---|---|---|
Attribut | Wert | Beschreibung | Beispiel |
name | text | Benötigt. Eindeutiger Name (wird zur Anzeige in der Auswahlliste im E-Mail Editor genutzt) für das Layout. | <pme:layout name=“Promio-Design“ />
|
pmtoctitle | text | Überschrift für Inhaltsverzeichnis | <pme:repeatercontent pmtoctitle="title" />
|
Mit dem <pme:repeatercontent />
Element wird ein vordefinierter Bestandteil des <pme:repeater />
Elements definiert. Es wird standardmäßig als einzelner Block angezeigt und verhält sich ansonsten wie ein <pme:layout />
Element. Durch das <pme:repeatercontent />
Element besteht die Möglichkeit, einen Repeater für den Anwender vorzubefüllen.
<pme:repeatercontent>
darf nur innerhalb von <pme:repeater> verwendet werden.
Attribute | |||
---|---|---|---|
Attribut | Wert | Beschreibung | Beispiel |
pmtoctitle | text | Überschrift für Inhaltsverzeichnis | <pme:repeatercontent pmtoctitle="title" />
|
<pm:datasection> wird benutzt um Datensätze aus der externen Datenquelle im Template zu verwendet. Jeder Datensatz wird im Template mit <pm:data> (item) repräsentiert. Dabei werden die Felder mit [pm:item:field_name] („field_name“ steht einen Feldname) angesprochen. D.h. ein <pm:datasection>-Tag beinhalt mindestens einen <pm:data>-Tag.
Attribute | |||
---|---|---|---|
Attribut | Wert | Beschreibung | Beispiel |
source | text | Name der externen Datenquelle(wird von promio.net angelegt). | |
items | json |
* rand:<pm:data>-Tag wird mit einem zufällig ausgewählten Datensatzt befüllt
<pm:datasection source="test_datenquelle"path="rss:channel:item" items='{1:2,2:"rand",3:"next"}'><pm:datasection>
|
|path|text|Zeiger auf einem mehrmals vorkommenen Tag im Feed (RSS 2.0 standard). Ist nur für externe Datenquelle vom Typ „static“ nötigt||
Ist ein Repräsentant eines Datensatz aus der externen Datenquelle. Mit dem Platzhalter [pm:item:field_name] wird ein Feld im Datensatz angesprochen.
Die Datenquelle (test_datenquelle) beinhaltet folgende Datensätze
Produkt_ID | Produkt_name | Produkt_Beschreibung |
---|---|---|
1 | Wicked Chili KFZ Halterung | Kompakte KFZ Halterung zur Befestigung an der Windschutzscheibe mit ca. 14 cm Länge und weich gepolsterten Seitenteilen; Hergestellt in Deutschland. |
2 | Anker PowerDrive | Der Vorteil Anker: Werden Sie einer von mehr als 20 Millionen Kunden, die mit unserer führenden Technologie laden. |
3 | iPhone 6 / 6S Akkuhülle | Große Kapazität: 130 % Akkulaufzeit, Akkuhülles 3200mAh Kapazität bietet eine zusätzliche 60 Stunden Audio, 17 Stunden 3G Sprechzeit, 13 Stunden Video, 12 Stunden web surfen oder 3 Stunden 3D Gaming auf Ihr iPhone 6 / 6S. |
Template:
<pm:datasection source="test_datenquelle" path="" items='{1:3,2:"next",3:"next"}'> <table> <tbody> <tr> <td>Produkt-Name</td> <td>Produkt-Beschreibung </td> </tr> <pm:data> <tr> <td>1. [pm:item:Produkt_name]</td> <td>[pm:item:Produkt_Beschreibung]</td> </tr> </pm:data> <pm:data> <tr> <td>2. [pm:item:Produkt_name]</td> <td>[pm:item:Produkt_Beschreibung]</td> </tr> </pm:data> <pm:data> <tr> <td>3. [pm:item:Produkt_name]</td> <td>[pm:item:Produkt_Beschreibung]</td> </tr> </pm:data> </tbody> </table> </pm:datasection>
Ergebnis nach dem Bauern des Templates:
<table> <tbody> <tr> <td>Produkt-Name</td> <td>Produkt-Beschreibung </td> </tr> <tr> <td>1. iPhone 6 / 6S Akkuhülle</td> <td>Große Kapazität: 130 % Akkulaufzeit, Akkuhülles 3200mAh Kapazität bietet eine zusätzliche 60 Stunden Audio, 17 Stunden 3G Sprechzeit, 13 Stunden Video, 12 Stunden web surfen oder 3 Stunden 3D Gaming auf Ihr iPhone 6 / 6S.</td> </tr> <tr> <td>2. Wicked Chili KFZ Halterung</td> <td>Kompakte KFZ Halterung zur Befestigung an der Windschutzscheibe mit ca. 14 cm Länge und weich gepolsterten Seitenteilen; Hergestellt in Deutschland</td> </tr> <tr> <td>3. Anker PowerDrive</td> <td>Der Vorteil Anker: Werden Sie einer von mehr als 20 Millionen Kunden, die mit unserer führenden Technologie laden.</td> </tr> </tbody> </table>
Mit einem <pm:toc />
Elementen kann ein Inhaltsverzeichnis (Table of Content abgekürzt „TOC“) definiert werden. Der Designer kann nicht nur festlegen, welche Überschriften übernommen werden sollen, sondern auch das Design für das Inhaltsverzeichnis bestimmen.
Das Element <pm:toc />
erwartet genau ein <pm:toctitem />
Element.
Der Inhalt von <pm:toc />
wird für jedes Element im Template, welches das Attribut pmtoctitle
trägt, wiederholt. Dabei wird das Element <pm:toctitem />
durch den im Attribut pmtoctitle
angegeben Text und einen Link auf das Element des Attributes ersetzt.
<ul> <pm:toc> <li> <pm:tocitem /> </li> </pm:toc> </ul> <pme:singleline pmtoctitle="Überschrift 3"> ... </pme:singleline> <pme:multiline pmtoctitle="Überschrift 2"> ... </pme:multiline>
<ul> <li> <a href="#link_zu_h3">Überschrift 1</a> </li> <li> <a href="#link_zu_p">Überschrift 2</a> </li> </ul>
Platzhalter Element für eine Überschrift im <pm:toc />
Element.
Es sind keine weiteren Attribute oder Definitionen erforderlich.
Das Verhalten eines Elements kann durch seine individuellen Attribute beeinflusst werden. Darüber hinaus können einige Standard-HTML Elemente durch OTML-Attribute erweitert werden.
<img pmedit="true"/>
Mögliche Werte | |
---|---|
Wert | Beschreibung |
true | Erlaubt das Editieren |
Unterstützte Elemente | ||
---|---|---|
Element | Beschreibung | Beispiel |
<img /> | Erlaubt das Editieren der Bildquelle (src) | <img pmedit="true" src="promiologo.png" alt="editable"/>
|
Mögliche Werte | |
---|---|
Wert | Bechreibung |
width | Bei Skalierung bleibt die Breite fest. Nur die Höhe variiert anhand der Breite. |
height | Bei Skalierung bleibt die Höhe fest. Nur die Breite variiert anhand der Höhe. |
crop | Proportionale Skalierung der Breite/Höhe. Beide Werte ändern sich. |
Unterstützte Elemente | ||
---|---|---|
Element | Beschreibung | Beispiel |
<img /> | Beeinflusst das Verhalten der Höhe/Breite eines Bildes bei Größenänderung. | <img src="promio.jpg" pmscale="height" alt="height"/>
|
Definiert Stellen, die in einem Inhaltsverzeichnis (siehe <pm:toc />
) erscheinen sollen.
Mögliche Werte | |
---|---|
Wert | Bechreibung |
text | Text, der in einem <pm:tocitem /> angezeigt werden soll. |
Unterstützte Elemente | ||
---|---|---|
Element | Beschreibung | Beispiel |
alle <pme: /> | Markiert ein Element zur Verwendung als Überschrift (siehe <pm:toc />) | <pme:singleline pmetoctitle="title" ><pme:singleline>
|