E-Mail Editor Templates [Service wiki]

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
<WRAP round info 60%>
Eine aktuelle (englischsprachige) Version dieses Dokuments liegt [[de:otml|hier]]. Diese ist in promio.connect im Hilfebereich einsehbar.
</WRAP>
====== 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.


<code html 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></code>






===== 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|<pme:singleline>]] |Tag, editierbar |Nur-Text (kein HTML) Eingabe |
|[[#pme:multiline|<pme:multiline>]] |Tag, editierbar |HTML-Text Eingabe |
|[[#pme:repeater|<pme:repeater>]] |Tag, editierbar |Struktur für Listendarstellung |
|[[#pme:layout|<pme:layout>]] |Tag, editierbar |Vorlage für Listeneinträge |
|[[#pm:repeatercontent|<pm:repeatercontent>]] |Tag |Struktur für Listendarstellung |
^Attribute ^^^
|[[#pmedit|pmedit]] |Attribut |Nur für <img> Tags. Legt die Editierbarkeit bei Bildern fest. |
|[[#pmscale|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 ===
<code html><pme:singleline label="Ueberschrift">
   Veränderbarer Text
</pme:singleline></code>

=== Attribute ===
^Erlaubte Attribute^^
|Standard HTML Attribute (s. [[http://www.w3schools.com/tags/ref_standardattributes.asp|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 ===
<code html><pme:multiline>
   <h1>Beispiel</h1>
   <p>
       Veränderbarer <b>HTML Text</b>
   </p>
</pme:multiline></code>

=== Attribute ===
^Erlaubte Attribute^^
|Standard HTML Attribute (s. [[http://www.w3schools.com/tags/ref_standardattributes.asp|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|<pme:layout>]] Blöcken, die dem Redakteur zum auffüllen des Bereiches zur Auswahl gestellt werden.

<note important>Es wird mindestens ein [[#pme:layout|<pme:layout>]] Block erwartet.</note>

=== Beispiel ===
<code html><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></code>

=== Benötigt ===
^Benötigte Tags^
|<pme:layout>|

==== pme:layout ====
Das Element ''<pme:layout>'' definiert einen Block eines [[#pme:repeater|<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.



<note important>''<pme:layout>'' darf nur innerhalb von [[#pme:repeater|<pme:repeater>]] verwendet werden.</note>

=== Beispiel ===
<code html><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></code>

=== Attribute ===
^Erlaubte Attribute^^
|Standard HTML Attribute (s. [[http://www.w3schools.com/tags/ref_standardattributes.asp|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|<pme:repeater>]] einzubinden. 

Das Verhalten von ''<pm:repeatercontent>'' ist ähnlich wie von [[#pme:layout|<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.

<note important>''<pme:repeatercontent>'' darf nur innerhalb von [[#pme:repeater|<pme:repeater>]] verwendet werden.</note>

=== Beispiel ===
<code html><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></code>



===== 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 ===
<code html><img pmedit="true" src="bild.png" pmscale="width" width="400px" /></code>

=== 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|''pmedit'']] zum Tragen und stellt sicher, das unabhängig von der gewählten Bildquellen, die passenden Größe angezeigt wird.

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

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

<note hint>Bilder deren original Abmessung kleiner als die angegebene ist, werden unter **Qualitätsverlust** vergrößert.</note>

=== Nutzbarkeit ===
^Nutzbar für Tag^
|<img> |
Benutzer-Werkzeuge

Webseiten-Werkzeuge

Seiten-Werkzeuge
