Templates benutzen

Der HTML-Editor bietet mit dem Templates Plugin vorgefertigte HTML Snippets an, die einfach eingefügt werden können. Um diese einzufügen klickt man auf den Button für Templates und wählt ein entsprechendes Template aus. Optional kann auch die Checkbox "Aktuelle Inhalte ersetzen" gewählt werden, um den gesamten Editor Inhalt durch das Template zu ersetzen:

Templates erstellen

Templates werden in JavaScript Templatedateien dokumentiert. Mehrere Templates werden dabei zusammengefasst und einer Templatedefinition hinzugefügt. In einer Templatedatei können mehrere Templatedefinitionen stehen. Welche Definitionen im Editor zur Verfügung gestellt werden sollen, können dann in einer Konfiguration bzw. Annotation definiert werden.

Templates können in mehreren Sprachen angegeben werden. Um welche Sprache es sich handelt, muss im Templatedateinamen, bzw. im Namen der Templatedefinition wie folgt angegeben werden: [language]_[name].js bzw. [language]_[name]

So beinhaltet beispielsweise die Datei de_default.js die default Templates mit der Templatedefinition de_default. Die englischen Übersetzungen dieser Templates befinden sich in en_default.js unter en_default.

Templatedefinition erstellen

Eine Templatedefinition benötigt die Angabe des imagesPath, um den Pfad der Bilder anzugeben.

Pro Template wiederum werden folgende Informationen benötigt:

Attribut	Beschreibung
title	Titel des HTML Snippets
image	Der Name des Bildes. Der Pfad zu diesem Bild wird durch imagesPath definiert.
description	Eine Beschreibung des Snippets.
html	Das HTML Snippet selbst. (Alternative zu htmlFile)
htmlFile	Pfad zu einer HTML Datei, in der das HTML Snippet enthalten ist. (Alternative zu html) Wichtig: Die HTML Datei muss in UTF-8 encodiert sein. Andernfalls gibt es Probleme mit Umlauten!

Es ist darauf zu achten, dass Namen von Templatedefinitionen nicht mehrfach verwendet werden, da diese sonst nicht eindeutig zugeordnet werden können. Der Name en_default darf beispielsweise nicht verwendet werden, da eine solche Definition bereits existiert und in allen HTML Editoren zur Verfügung gestellt wird.

// Register a templates definition named "default".
CKEDITOR.addTemplates( 'en_default', {
        // The name of sub folder which hold the shortcut preview images of the templates.
        imagesPath: [image path],

        // The templates.
        templates: [ {
                title: 'Title and text',
                image: 'titleAndText.gif',
                description: 'A title with a text',
                htmlFile: [HTML file path]
        },
        {
                title: 'A title',
                image: 'title.gif',
                description: 'A title.',
                html: '<h3>Some title</h3>
        }]
});

// Register a templates definition named "anotherDefinition".
CKEDITOR.addTemplates( 'anotherDefinition', {
        // The name of sub folder which hold the shortcut preview images of the templates.
        imagesPath: [image path],

        // The templates.
        templates: [ {
                title: 'Title and text',
                image: 'titleAndText.gif',
                description: 'A title with a text',
                htmlFile: [HTML file path]
        }]
});

Verwendete Templates konfigurieren

Welche Templates zur Verfügung gestellt werden sollen, kann konfiguriert bzw. annotiert werden. template_files, also die Pfade zu den Templatedefinitionen, werden dabei in einer Liste angegeben. Die Namen der verwendeten Templatedefinitionen hingegen werden als String kommasepariert in templates angegeben. Sowohl für template_files, als auch für templates müssen nur die einfachen Namen angegeben werden. Es ist nicht notwendig, pro Sprache alle Namen anzugeben. So reicht zum Beispiel die Konfiguration

<property key="templates_files">
   <list>
       <string value="[path/to/template/default.js]"/>
   </list>
</property>

um alle Sprachen von default.js wie en_default.js und de_default.js verwenden zu können.

Konfiguration

<config service-class="com.top_logic.layout.wysiwyg.ui.StructuredTextConfigService">
   <instance class="com.top_logic.layout.wysiwyg.ui.StructuredTextConfigService">
      ...
      <property key="templates_files">
         <list>
            <string value="[path/to/template/default.js]"/>
         </list>
      </property>
      <property key="templates">
         <string value="default,anotherDefinition"/>
      </property>
      ...
   </instance>
</config>

Annotiation

<annotations>
   <wysiwyg templates="default, anotherDefinition">
      <template-files>
         <template-file value="[path/to/template/default.js]"/>
         <template-file value="[path/to/template/anotherDefinition.js]"/>
      </template-files>
   </wysiwyg>
</annotations>