Inhaltsverzeichnis

Eine aktuelle (englischsprachige) Version dieses Dokuments liegt hier. Diese ist in promio.connect im Hilfebereich einsehbar.

E-Mail Editor Templates

Hier geht es darum dem Designer die Möglichkeit zu geben, von Redakteuren veränderbare Bereiche seines Designs (Templates) zu definieren. Der Designer kann dafür beim Entwurf seines Templates auf die von uns zur Verfügung gestellten Tags in den Namensräumen pme: und pm: zugreifen.

Das so entwickelte Template kann dann mit dem in promio-mail integrierten E-Mail Editor von Redakteuren verwendet und angepasst werden. Dabei kann der Redakteur nur noch die vorher definierten Bereiche bearbeiten.

Beispiel Template

<html>
    <head>
        <title>
            Example template
        </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <h1>
            <pme:singleline class="" style="" label="Ueberschrift">
                Editierbarer Text im Template. Redakteur kann nur reinen Text eingeben.
            </pme:singleline>
        </h1>
 
        <p>
            Statischer, nicht editierbarer, Text des Templates.
        </p>
 
        <img pmedit="true" pmscale="width" width="400px" src="bild.png" />
 
        <pme:multiline>
            <h2>
                Text mit HTML Auszeichnung
            </h2>
            <p>
                Der Redakteur hat die Möglichkeit der Text-Formatierung per HTML.
            </p>
        </pme:multiline>
 
        <pme:repeater>
            <pme:layout name="LayoutAuswahl_1">
                <h2>Layoutvorlage 1 für Repeater</h2>
                <p>Beliebiges HTML</p>
            </pme:layout>
            <pme:layout name="LayoutAuswahl_2">
                <h2>Layoutvorlage 2 für Repeater</h2>
                <p>
                    <pme:multiline>Beliebiges, editierbares, HTML</pme:multiline>
                </p>
            </pme:layout>
 
            <pm:repeatercontent>
                   <h2>Listeninhalt</h2>  
                   <h3><pme:singleline>tolles singleline </pme:singleline></h3>
            </pm:repeatercontent>
       </pme:repeater>
 
    </body>
</html>

HTML Erweiterung

Templates für den promio-mail E-Mail Editor entsprechen standard HTML-Dokumenten, die um promio-mail spezifische Tags und Attribute erweitert werden können:

Übersicht

HTML Erweiterung	Typ
Tags
<pme:singleline>	Tag, editierbar	Nur-Text (kein HTML) Eingabe
<pme:multiline>	Tag, editierbar	HTML-Text Eingabe
<pme:repeater>	Tag, editierbar	Struktur für Listendarstellung
<pme:layout>	Tag, editierbar	Vorlage für Listeneinträge
<pm:repeatercontent>	Tag	Struktur für Listendarstellung
Attribute
pmedit	Attribut	Nur für <img> Tags. Legt die Editierbarkeit bei Bildern fest.
pmscale	Attribut	Nur für <img> Tags. Legt die Abmessung bei änderbaren Bildern fest.

Tags

pme:singleline

Dieses Element legt Bereiche fest, die von Redakteuren editieren werden können. Es kann dabei nur reiner Text, ohne HTML Auszeichnung, eingegeben werden. Das Tag kann sowohl alleine stehen als auch innerhalb anderer Elemente eingefügt werden.

Beispiel

<pme:singleline label="Ueberschrift">
   Veränderbarer Text
</pme:singleline>

Attribute

Erlaubte Attribute
Standard HTML Attribute (s. Standard HTML Attributes)
label	Beschriftung für den Editor

pme:multiline

Dieses Element legt Bereiche fest, die von Redakteuren editiert werden können. Es dürfen dabei HTML Auszeichnungen verwendet werden. Das Tag kann sowohl alleine stehen als auch innerhalb anderer Elemente eingefügt werden.

Beispiel

<pme:multiline>
   <h1>Beispiel</h1>
   <p>
       Veränderbarer <b>HTML Text</b>
   </p>
</pme:multiline>

Attribute

Erlaubte Attribute
Standard HTML Attribute (s. Standard HTML Attributes)
label	Beschriftung für den Editor

pme:repeater

Das Element <pme:repeater> definiert einen Bereich mit sich wiederholenden Blöcken.

Ein <pme:repeater> Bereich enthält eine beliebige Anzahl (jedoch mindestens einen) von <pme:layout> Blöcken, die dem Redakteur zum auffüllen des Bereiches zur Auswahl gestellt werden.

Es wird mindestens ein <pme:layout> Block erwartet.

Beispiel

<pme:repeater>
    <pme:layout name="LayoutAuswahl_1">
        <h2>Layoutvorlage 1 für Repeater</h2>
        <p>Beliebiges HTML</p>
    </pme:layout>
    <pme:layout name="LayoutAuswahl_2">
        <h2>Layoutvorlage 2 für Repeater</h2>
        <p>
            <pme:multiline>Beliebiges, editierbares, HTML</pme:multiline>
        </p>
    </pme:layout>
</pme:repeater>

Benötigt

Benötigte Tags
<pme:layout>

pme:layout

Das Element <pme:layout> definiert einen Block eines <pme:repeater> Bereiches. Es darf nur innerhalb von <pme:repeater> vorkommen. Es können beliebig viele <pme:layout> Blöcke innerhalb eines <pme:repeater> definiert werden.

Der Redakteur hat die Möglichkeit, einen oder mehrere <pme:layout> Blöcke in einem <pme:repeater> hinzuzufügen, zu verschieben oder zu löschen. Auch das mehrmalige hinzufügen ein und desselben Blocks ist möglich.

Die Angabe des Attribut name ist erforderlich. Es definiert die Anzeige in der Auswahl der möglichen Blöcke, die einem <pme::repeater> hinzugefügt werden können.

<pme:layout> darf nur innerhalb von <pme:repeater> verwendet werden.

Beispiel

<pme:repeater>
    <pme:layout name="LayoutAuswahl_1">
        <h2>Layoutvorlage 1 für Repeater</h2>
        <p>Beliebiges HTML</p>
    </pme:layout>
    <pme:layout name="LayoutAuswahl_2">
        <h2>Layoutvorlage 2 für Repeater</h2>
        <p>
            <pme:multiline>Beliebiges, editierbares, HTML</pme:multiline>
        </p>
    </pme:layout>
</pme:repeater>

Attribute

Erlaubte Attribute
Standard HTML Attribute (s. Standard HTML Attributes)
name	Erforderlich. Gibt den Namen des Layouts an, der dem Redakteur zur Auswahl gestellt wird.

pm:repeatercontent

Ermöglicht es vordefinierte Blöcke in einen <pme:repeater> einzubinden.

Das Verhalten von <pm:repeatercontent> ist ähnlich wie von <pme:layout> Blöcke mit dem Unterschied, das <pm:repeatercontent> Blöcke standardmäßig angezeigt werden, wohingegen <pme:layout> Blöcke zuvor von einem Redakteur manuell dem <pme:repeater> hinzugefügt werden müssen.

Der Redakteur hat die Möglichkeit, <pm:repeatercontent> Blöcke zu verschieben oder zu löschen.

<pme:repeatercontent> darf nur innerhalb von <pme:repeater> verwendet werden.

Beispiel

<pme:repeater>
    <pme:layout name="LayoutAuswahl_1">
        <h2>Layoutvorlage 1 für Repeater</h2>
        <p>Beliebiges HTML</p>
    </pme:layout>
    <pme:layout name="LayoutAuswahl_2">
        <h2>Layoutvorlage 2 für Repeater</h2>
        <p>
            <pme:multiline>Beliebiges, editierbares, HTML</pme:multiline>
        </p>
    </pme:layout>
 
    <pm:repeatercontent>
        <h2>Blockvorgabe</h2>  
        <p>
            <pme:multiline>Freier Text....</pme:multiline>
        </p>
    </pm:repeatercontent>
</pme:repeater>

Attribute

pmedit

Das Attribute pmedit legt fest, ob die Quelle (das src Attribute) eines Bildes vom Redakteur bearbeitet werden kann. Wird das Attribut weggelassen, kann die Bildquelle auch nicht bearbeitet werden.

Beispiel

<img pmedit="true" src="bild.png" pmscale="width" width="400px" />

Werte

Mögliche Werte des Attributes
Wert	Erklärung
„true“	Erlaubt das editieren der Bildquelle im Attribute `src`

Nutzbarkeit

Erlaubt in Tag
<img>

pmscale

Mit Attribut pmscale kann angegeben werden, das ein Bild auf eine bestimmte Abmessung skaliert wird. Es wird dabei ein neues Bild mit den gewünschten Abmessung erstellt und eingebunden; das original Bild bleibt davon unberührt und kann jederzeit wieder verwendet werden.

Das Attribut kommt vor allem im Zusammenhang mit dem Attribut ''pmedit'' zum Tragen und stellt sicher, das unabhängig von der gewählten Bildquellen, die passenden Größe angezeigt wird.

Beispiel

<img pmscale="width" width="400px" pmedit="true" src="bild.png" />

Werte

Mögliche Werte des Attributes
Wert	Erklärung
„width“	Skaliert das Bild auf die im Attribute `width` angegebene Breite.
„height“	Skaliert das Bild auf die im Attribute `height` angegebene Höhe.
„crop“	Schneidet das Bild am linken bzw. unteren Rand ab, um die im Attribut `height` und/oder `width` angegebene Größe zu erhalten.

Bilder deren original Abmessung kleiner als die angegebene ist, werden unter Qualitätsverlust vergrößert.

Nutzbarkeit

Nutzbar für Tag
<img>