Tinymce (SPT-Tag): Unterschied zwischen den Versionen
(60 dazwischenliegende Versionen von 6 Benutzern werden nicht angezeigt) | |||
Zeile 8: | Zeile 8: | ||
==Beschreibung== | ==Beschreibung== | ||
− | Mit dem tinymce-Tag wird ein externer WYSIWYG-Editor ins CMS eingebunden. "<b>W</b>hat <b>Y</b>ou <b>S</b>ee <b>I</b>s <b>W</b>hat <b>Y</b>ou <b>G</b>et" steht für eine Übernahme | + | Mit dem tinymce-Tag wird ein externer WYSIWYG-Editor ins CMS eingebunden. "<b>W</b>hat <b>Y</b>ou <b>S</b>ee <b>I</b>s <b>W</b>hat <b>Y</b>ou <b>G</b>et" steht für eine Übernahme eines geschriebenen Textes auf der Website, so wie ihn der Redakteur bei der Eingabe sieht. Auf diese Weise kann der Redakteur z.B. Tabellen oder Formatierungen in seine Artikel einbinden ohne über HTML-Kenntnisse zu verfügen. Die Ausgabe hängt aber nicht nur vom Editor, sondern auch von den Einstellungen des Browsers und den installierten Systemschriften ab. |
− | Der Editor | + | Der Editor TinyMCE ist ein Open-Source Produkt der Firma [http://tinymce.moxiecode.com Moxiecode] und kann im Rahmen des CMS "so wie er ist" genutzt werden. TinyMCE ist kein Produkt der Sitepark GmbH und wird daher nicht von unserem Support betreut. Fehler-Meldungen und Erweiterungswünsche werden von Sitepark an den Hersteller weitergeleitet. |
− | == | + | ==Themes== |
− | + | Über die Theme-Option lässt sich aus aktuell 2 vordefinierten Konfiguration wählen: | |
− | |||
− | |||
− | |||
− | |||
− | + | *simple | |
− | ;Konfiguration in | + | [[Datei:tiny-theme-simple.png]] |
− | : | + | *advanced |
− | <source lang=" | + | [[Datei:tiny-theme-advanced.png]] |
− | + | ||
− | + | ==Konfigurationserweiterung== | |
+ | Sollten die vordefinieren Themes den Anforderungen nicht entsprechen lässt sich der <code><spt:tinymce /></code> über unterschiedliche Mechanismen erweitern/überschreiben. | ||
+ | |||
+ | ; Konfiguration mandantenweit ergänzen''(nicht empfohlen)'' | ||
+ | : Hier wird die Standard-Konfiguration durch eine eigene ergänzt. Alle <code><spt:tinymce></code>-Tags die nicht das Attribut <code>config</code> verwenden, sind von dieser Anpassung betroffen. Die Anpassungen werden in einem Template mit dem Anker <code>tag.spt.tinymce.configextension</code> vorgenommen | ||
+ | |||
+ | ; Konfiguration per Konfigurationserweiterungen überschreiben ''(nicht empfohlen)'' | ||
+ | : Hier wird die Standard-Konfiguration durch eine eigene vordefinierte Konfiguration vollständig ersetzt. Die Konfigurationen werden in einem Template mit dem Anker <code>tag.spt.tinymce.config.${configname}</code> implementiert, wobei <code>${configname}</code> einen Platzhalter für den Namen der Konfiguration bildet. Der Name wird dem <code><spt:tinymce/></code>-Tag über das Attribut <code>config</code> übergeben. | ||
+ | |||
+ | ; Konfiguration per Konfigurationserweiterungen erweitern | ||
+ | : Hier wird die Standard-Konfiguration durch eine eigene vordefinierte Konfiguration ergänzt. Die Ergänzungen werden in einem Template mit dem Anker <code>tag.spt.tinymce.configextension.${configextensionname}</code> implementiert, wobei <code>${configextensionname}</code> einen Platzhalter für den Namen der Konfigurationserweiterung bildet. Der Name wird dem <code><spt:tinymce/></code>-Tag über das Attribut <code>configextension</code> übergeben. | ||
+ | |||
+ | ; Zusätzliche Konfiguration als Tag-Attribut | ||
+ | : Hier wird eine Konfigurationserweiterung über das Attribute <code>configvalues</code> inline an das <code><spt:tinymce/></code> übergeben. | ||
+ | |||
+ | ==Konfigurationsoptionen== | ||
+ | Die Konfiguration des TinyMCE besteht aus verschiedenen Konfigurations-Parametern, die mit [http://de.wikipedia.org/wiki/JavaScript_Object_Notation JSON] ohne umschließende geschweifte Klammern {} angegeben werden müssen. | ||
+ | |||
+ | Beispiel für TinyMCE-Konfiguration | ||
+ | <source lang="javascript"> | ||
+ | toolbar: [ | ||
+ | "pastetext | undo redo | bold italic | subscript superscript | indent outdent | bullist numlist | iesLink | charmap | abbr | table | removeformat" | ||
+ | ], | ||
+ | statusbar: false, | ||
+ | object_resizing: false, | ||
+ | menu : { | ||
+ | file : {title : 'File' , items : 'newdocument'}, | ||
+ | edit : {title : 'Edit' , items : 'undo redo | cut copy paste pastetext | selectall'}, | ||
+ | insert : {title : 'Insert', items : 'link media | template hr'}, | ||
+ | view : {title : 'View' , items : 'visualaid'}, | ||
+ | format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'}, | ||
+ | table : {title : 'Table' , items : 'inserttable tableprops deletetable | cell row column'}, | ||
+ | tools : {title : 'Tools' , items : 'spellchecker code'} | ||
+ | } | ||
+ | </source> | ||
+ | |||
+ | <div class="note"> | ||
+ | Es ist zu beachten, das hinter dem letzten Parameter kein Komma stehen darf. | ||
+ | </div> | ||
+ | |||
+ | Alle für den TinyMCE verfügbaren Parameter können unter [http://www.tinymce.com/wiki.php/configuration http://www.tinymce.com] eingesehen werden. | ||
+ | |||
+ | <div class="note"> | ||
+ | Folgende Plugins werden standardmäßig geladen, wobei zu beachten ist, dass das <code>iesLink</code>-Plugin die Aufgabe des <code>link</code>-Plugins übernimmt. | ||
+ | <source lang="javascript"> | ||
+ | fullscreen, charmap, paste, table, contextmenu, abbr, iesLink, lang | ||
</source> | </source> | ||
− | Es muß | + | </div> |
− | + | ||
− | + | ==Konfigurationserweiterung Ablauf== | |
+ | |||
+ | Die Konfigurationsauswertung findet wie folgt statt: | ||
+ | |||
+ | <blockquote> | ||
+ | Das aktive Configset wird auf das Theme gesetzt.<br/> | ||
+ | Wenn eine Konfiguration angegeben wurde wird das bisher gesetzte Configset mit dem eingebunden Configset überschrieben <code>(tag.spt.tinymce.config.${config})</code><br/><br/> | ||
+ | |||
+ | Wenn eine Konfigurationserweiterung angegeben wurde, wird das bisher gesetzte Configset durch das angegebene erweitert <code>(tag.spt.tinymce.configextension.${configextension})</code>.<br/> | ||
+ | Wenn keine Konfigurationserweiterung angegeben wurde, wird das bisher gesetzte Configset durch die Mandanten-Erweiterung erweitert <code>(tag.spt.tinymce.configextension)</code>.<br/><br/> | ||
+ | |||
+ | Wenn Configvalues angegeben wurden wird das bisher gesetzte Configset durch die übergebenen Optionen erweitert. | ||
+ | </blockquote> | ||
+ | |||
+ | ===Standard Konfiguration pro Mandant ersetzen=== | ||
+ | <div class="note">''Zu Beachten ist das ein überschreiben der globalen TinyMCE-Konfiguration (innerhalb des Mandanten) alle voreingestellten Setzungen wie die Einbindung eines angepassten CSS, die Auflistung aller zu verwendenden HTML-Elemente, etc. nicht mehr verwendet werden. Es sollte geprüft werden, ob es ausreicht die Standardkonfiguration zu ergänzen (siehe untern)''</div> | ||
+ | |||
+ | Es ist möglich die Standard-Konfiguration für den TinyMCE pro Mandant durch eine eigene Konfiguration zu ersetzen. Hierzu muß ein Template mit dem Anchor | ||
+ | tag.spt.tinymce.config | ||
+ | angelegt werden, in dem die Konfiguration hinterlegt ist. Existiert ein Template mit dem angegebenen Anchor, wird automatisch diese Konfiguration verwendet ohne das im <code><spt:tinymce></code>-Tag noch Änderungen vorgenommen werden müssten. | ||
+ | |||
+ | ===Zusätzliche Konfigurationen pro Mandant definieren=== | ||
+ | <div class="note">''Zu Beachten ist das bei der Verwendung einer eigenen Konfiguration alle voreingestellten Standard-Setzungen wie die Einbindung eines angepassten CSS, die Auflistung aller zu verwendenden HTML-Elemente, etc. nicht mehr verwendet werden. Es sollte geprüft werden, ob es ausreicht die Standardkonfiguration zu ergänzen (siehe untern)''</div> | ||
+ | |||
+ | Parallel zu der Standard-Konfiguration können weiter Konfigurationen pro Mandante definiert werden. Hierzu können Templates mit dem Anchor | ||
+ | tag.spt.tinymce.config.<configname> | ||
+ | angelegt werden, wobei mit <code><configname></code> ein beliegeber Name (Anchorkonform) vergeben werden kann. Um die Konfiguration zu verwenden muß im <code><spt:tinymce></code>-Tag mit dem Attribut <code>config</code> der <code><configname></code> der Konfiguration angegeben werden, die verwendet werden soll. | ||
+ | |||
+ | ===Standard Konfigurations-Ergänzungen pro Mandant definieren=== | ||
+ | Es ist möglich die Standard-Konfiguration für den TinyMCE pro Mandant mit eine eigene Konfiguration zu ergänzen. Hierzu muß ein Template mit dem Anchor | ||
+ | tag.spt.tinymce.configextension | ||
+ | angelegt werden, in dem die Konfiguration hinterlegt ist. Existiert ein Template mit dem angegebenen Anchor, wird automatisch diese Konfiguration verwendet ohne das im <code><spt:tinymce></code>-Tag noch Änderungen vorgenommen werden müssten. | ||
+ | |||
+ | ===Zusätzliche Konfigurations-Ergänzungen pro Mandant definieren=== | ||
+ | |||
+ | Parallel zu den Standard-Konfigurations-Ergänzungen können weiter Ergänzungen pro Mandante definiert werden. Hierzu können Templates mit dem Anchor | ||
+ | tag.spt.tinymce.configextension.<configextensionname> | ||
+ | angelegt werden, wobei mit <code><configextensionname></code> ein beliegeber Name (Anchorkonform) vergeben werden kann. Um die Konfiguration zu verwenden muß im <code><spt:tinymce></code>-Tag mit dem Attribut <code>configextension</code> der <code><configextensionname></code> der Konfiguration angegeben werden, die verwendet werden soll. | ||
+ | |||
+ | ===Konfiguration in Tag-Attribut=== | ||
+ | Mit dem Attribut <code>configvalues</code> können Konfigurationsparameter direkt angegeben werden. Diese Parameter werden mit JSON ohne umschließende geschweifte Klammern {} angegeben. | ||
<source lang="xml"> | <source lang="xml"> | ||
<sp:set name="_tinyconfig"> | <sp:set name="_tinyconfig"> | ||
Zeile 37: | Zeile 118: | ||
</source> | </source> | ||
− | == | + | ==Mit dem <code>spt:tinymce</code> erzeugte Texte ausgeben (ab Version 2.0.3)== |
− | + | Durch TinyMCE-Plugins des IES ist eine Nachbearbeitung des erzeugten Textes notwendig. Der Text sollte vor der Ausgabe den Tag [[spt:prehtml]] durchlaufen. Nur so ist sichergestellt, dass z.B. interne Links, die über den Editor eingetragen wurden, auch richtig ausgegeben werden. | |
− | + | ||
− | + | Beispiel | |
− | + | <source lang="xml"> | |
− | + | <sp:io type="in"> | |
+ | <spt:tinymce name="sp_body"/> | ||
+ | </sp:io> | ||
+ | |||
+ | <sp:io type="out"> | ||
+ | <spt:prehtml name="processed_body" object="sp_body"/><sp:print name="processed_body"/> | ||
+ | </sp:io> | ||
+ | </source> | ||
==Attribute== | ==Attribute== | ||
Zeile 76: | Zeile 164: | ||
| [[Text]] | | [[Text]] | ||
| Nein | | Nein | ||
− | | | + | | advanced |
| 1 | | 1 | ||
|- | |- | ||
− | | <code>pools</code> | + | | <code>pools</code> |
| [[Anchor]]-List oder [[ID]]-List | | [[Anchor]]-List oder [[ID]]-List | ||
| Nein | | Nein | ||
Zeile 85: | Zeile 173: | ||
| 1 | | 1 | ||
|- | |- | ||
− | | <code> | + | | <code>config</code> |
| [[Text]] | | [[Text]] | ||
| Nein | | Nein | ||
− | | | + | | |
− | | | + | | 2.0.3 |
|- | |- | ||
| <code>configextension</code> | | <code>configextension</code> | ||
− | | [[ | + | | [[Text]] |
| Nein | | Nein | ||
| | | | ||
Zeile 100: | Zeile 188: | ||
| [[Text]] | | [[Text]] | ||
| Nein | | Nein | ||
− | | | + | | |
| 2.0.3 | | 2.0.3 | ||
+ | |- | ||
+ | | <code>toggle</code> | ||
+ | | [[Condition]] Oder [[Text]] | ||
+ | | Nein | ||
+ | | true | ||
+ | | 2.26 | ||
|- | |- | ||
{{sp_input_attributes|attribute=dynamics|mode=row}} | {{sp_input_attributes|attribute=dynamics|mode=row}} | ||
Zeile 121: | Zeile 215: | ||
:Konfigurationstypen, die den Funktionsumfang für den Editor beschreiben. Mögliche Themes sind: | :Konfigurationstypen, die den Funktionsumfang für den Editor beschreiben. Mögliche Themes sind: | ||
:;simple | :;simple | ||
− | |||
:;advanced | :;advanced | ||
− | ;<code> | + | ;<code>pools</code> |
− | : | + | :Kommaseparierte Liste von [[Anchor|Anchors]] von Artikelpools oder von [[ID|IDs]] von Artikelpools; die Elemente der Pools werden dem Redakteur in einem Linkdialog innerhalb des Editors zur Auswahl angeboten. Voraussetzung, dass der interne Linkdialog überhaupt angezeigt wird, ist die Konfiguration des Editors mit iesLink über theme_advanced_buttons in der [http://wiki.moxiecode.com/index.php/TinyMCE:Configuration TinyMCE:Configuration]. Ausgabeseitig muss man darauf achten, dass ein interner Link vor der Ausgabe mit [[spt:id2url]] umgewandelt wird. |
− | : | ||
− | ;<code> | + | ;<code>config</code> |
− | : | + | :Mit diesem Attribut wird der Name einer Konfiguration angegeben. Die in dieser Konfiguration angegebenen Konfigurationsparameter überschreiben die IES-Standardkonfiguration. Die Angaben werden in JSON angegeben, wobei die umschließenden geschweiften Klammern {} nicht mit angegeben werden dürfen. Die möglichen Konfigurationsparameter sind unter [http://wiki.moxiecode.com/index.php/TinyMCE:Configuration TinyMCE:Configuration] aufgelistet. |
;<code>configextension</code> | ;<code>configextension</code> | ||
− | :Mit diesem Attribut | + | :Mit diesem Attribut wird der Name einer Konfigurations-Ergänzung angegeben. Die in dieser Ergänzung angegebenen Konfigurationsparameter ergänzen und überschreiben die Parameter der IES-Standardkonfiguration. Die Angaben werden in JSON angegeben, wobei die umschließenden geschweiften Klammern {} nicht mit angegeben werden dürfen. Die möglichen Konfigurationsparameter sind unter [http://wiki.moxiecode.com/index.php/TinyMCE:Configuration TinyMCE:Configuration] aufgelistet. |
;<code>configvalues</code> | ;<code>configvalues</code> | ||
− | :Mit diesem Attribut | + | :Mit diesem Attribut können TinyMCE Konfigurationen angegeben werden. Die Konfigurationsparameter ergänzen und überschreiben die Parameter der IES-Standardkonfiguration. Die Angaben werden in JSON angegeben, wobei die umschließenden geschweiften Klammern {} nicht mit angegeben werden dürfen. Die möglichen Konfigurationsparameter sind unter [http://wiki.moxiecode.com/index.php/TinyMCE:Configuration TinyMCE:Configuration] aufgelistet. |
{{sp_input_attributes|attribute=dynamics|mode=desc}} | {{sp_input_attributes|attribute=dynamics|mode=desc}} | ||
+ | |||
+ | ;<code>toggle</code> | ||
+ | :Mit diesem Attribut lässt sich angeben, wie der TinyMce eingeschaltet werden soll. True für einen Toggle Button, False für keinen Toggle-Button, auto für automatisches togglen | ||
==Beispiele== | ==Beispiele== | ||
Zeile 152: | Zeile 247: | ||
</sp:io> | </sp:io> | ||
</source> | </source> | ||
+ | |||
+ | === Barrierefreie Datentabellen === | ||
+ | <p>In der Tabellendarstellung haben wir Sehende es einfacher komplexe Strukturen zu erkennen.<br /> Wir können in der Spalte kurz nach oben schauen, um uns zu vergewissern zu welcher Kopfinformation der Zelleninhalt gehört. Für Screenreader ist hier unbedingt eine eindeutige Zuordnung nötig.</p> | ||
+ | <p>Die Web Content Accessibility Guidelines fordert in den Guidelines 2.0 von einer HTML Tabelle</p> | ||
+ | <ol> | ||
+ | <li>Ein Caption-Element welches eine kurze Überschrift der Tabelle bereitstellt [http://www.w3.org/TR/WCAG20-TECHS/H39 (H39)] [http://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic (Level A)]</li> | ||
+ | <li>Eine Trennung des Überschrifts- und Inhaltsbereichs der Tabelle mit dem thead-, und tbody-Element [http://www.w3.org/TR/WCAG20-TECHS/H51 (H51)] [http://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic (Level A)]</li> | ||
+ | <li>In dem Überschriftsbereich sollen die th-Elemente mit dem Attribut scope=“col“ eine Verknüpfung zu einer Spalte haben [http://www.w3.org/TR/WCAG20-TECHS/H63 (H63)] [http://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic (Level A)]. Wenn Datenzellen mehr als einer Zeilen- und/oder Spaltenüberschrift zugeordnet sind werden die Zellen mit ID- und header-Attribut miteinander verknüpft [http://www.w3.org/TR/WCAG20-TECHS/H43 (H43)] [http://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic (Level A)]</li> | ||
+ | <li>Falls vorgesehen sollten td-Elemente mit dem Attribut scope=“row“ Zeilenheaderzellen definieren [http://www.w3.org/TR/WCAG20-TECHS/H63 (H63)] [http://www.w3.org/TR/WCAG20-TECHS/H43 (H43)] [http://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic (Level A)]</li> | ||
+ | </ol> | ||
+ | <br> | ||
+ | =====Wie erstelle ich eine Tabelle===== | ||
+ | <p> | ||
+ | <ol> | ||
+ | <li> | ||
+ | <div class="notice">Öffnen Sie die Tabellenkonfiguration über den Schalter in der Toolbar und wählen Sie aus wie viele Spalten/Zeilen Sie benötigen.</div><br/> | ||
+ | [[Datei:tiny-table-tutorial-step-1.png|alt=Barrierefreie Tabellen erstellen Schritt 1|Barrierefreie Tabellen erstellen Schritt 1]]<br/><br/> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <div class="notice">Öffnen Sie die Tabelleneigenschaften.</div><br/> | ||
+ | [[Datei:tiny-table-tutorial-step-2.png|alt=Barrierefreie Tabellen erstellen Schritt 2|Barrierefreie Tabellen erstellen Schritt 2]]<br/><br/> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <div class="notice">Hier kann die Option zur Eingabe einer Caption aktiviert werden.</div><br/> | ||
+ | [[Datei:tiny-table-tutorial-step-3.png|alt=Barrierefreie Tabellen erstellen Schritt 3|Barrierefreie Tabellen erstellen Schritt 3]]<br/><br/> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <div class="notice">Nun erscheint oberhalb der Tabelle ein neues Feld zur Eingabe der Caption</div><br/> | ||
+ | [[Datei:tiny-table-tutorial-step-4.png|alt=Barrierefreie Tabellen erstellen Schritt 4|Barrierefreie Tabellen erstellen Schritt 4]]<br/><br/> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <div class="notice">Füllen Sie die weiter Tabelle mit Inhalten</div><br/> | ||
+ | [[Datei:tiny-table-tutorial-step-5.png|alt=Barrierefreie Tabellen erstellen Schritt 5|Barrierefreie Tabellen erstellen Schritt 5]]<br/><br/> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <div class="notice">Um die obere Zeile als Spaltenbeschreibung zu deklarieren, markieren Sie die Zeile und öffnen die Zelleneigenschaften</div><br/> | ||
+ | [[Datei:tiny-table-tutorial-step-6.png|alt=Barrierefreie Tabellen erstellen Schritt 6|Barrierefreie Tabellen erstellen Schritt 6]]<br/><br/> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <div class="notice">Ändern Sie den Zellentyp auf Kopfzeile</div><br/> | ||
+ | [[Datei:tiny-table-tutorial-step-7.png|alt=Barrierefreie Tabellen erstellen Schritt 7|Barrierefreie Tabellen erstellen Schritt 7]]<br/><br/> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <div class="notice">Um anzugeben, dass es sich bei den markierten Feldern um Spaltenüberschriften handelt, müssen Sie den Gültigkeitsbereich auf Spalte ändern</div><br/> | ||
+ | [[Datei:tiny-table-tutorial-step-8.png|alt=Barrierefreie Tabellen erstellen Schritt 8|Barrierefreie Tabellen erstellen Schritt 8]]<br/><br/> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <div class="notice">Gehen Sie bei Zeilenüberschriften genauso vor</div><br/> | ||
+ | [[Datei:tiny-table-tutorial-step-9.png|alt=Barrierefreie Tabellen erstellen Schritt 9|Barrierefreie Tabellen erstellen Schritt 9]] | ||
+ | [[Datei:tiny-table-tutorial-step-10.png|alt=Barrierefreie Tabellen erstellen Schritt 10|Barrierefreie Tabellen erstellen Schritt 10]]<br/><br/> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <div class="notice">An stelle von "Spalte" geben wir hier als Gültigkeitsbereich "Zeile" an, da es sich um zeilenweise Überschriften handelt</div><br/> | ||
+ | [[Datei:tiny-table-tutorial-step-11.png|alt=Barrierefreie Tabellen erstellen Schritt 11|Barrierefreie Tabellen erstellen Schritt 11]]<br/><br/> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <div class="notice">Die fertige Ausgabe auf der Website kann dann z.B. so aussehen:</div><br/> | ||
+ | [[Datei:tiny-table-tutorial-step-12.png|alt=Barrierefreie Tabellen erstellen Schritt 12|Barrierefreie Tabellen erstellen Schritt 12]] | ||
+ | <br/><br/> | ||
+ | </li> | ||
+ | </ol> | ||
+ | </p> | ||
+ | |||
+ | ===== Was schreibt der TinyMCE nun auf die Webseite? ===== | ||
+ | <p>So sieht der HTML Code mit unseren Zusatzinformationen und Änderungen aus:<br /> | ||
+ | <source lang="xml"> | ||
+ | <table> | ||
+ | <caption>Gruppe G</caption> | ||
+ | <tbody> | ||
+ | <tr> | ||
+ | <th scope="col">Land</th> | ||
+ | <th scope="col">Punkte</th> | ||
+ | <th scope="col">Tore</th> | ||
+ | <th scope="col">Tordifferenz</th> | ||
+ | <th scope="col">Siege</th> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <th scope="row">Deutschland</th> | ||
+ | <td>3</td> | ||
+ | <td>4</td> | ||
+ | <td>4</td> | ||
+ | <td>1</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <th scope="row">USA</th> | ||
+ | <td>3</td> | ||
+ | <td>2</td> | ||
+ | <td>1</td> | ||
+ | <td>1</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <th scope="row">Ghana</th> | ||
+ | <td>0</td> | ||
+ | <td>1</td> | ||
+ | <td>-1</td> | ||
+ | <td>0</td> | ||
+ | </tr> | ||
+ | <tr> | ||
+ | <th scope="row">Portugal</th> | ||
+ | <td>0</td> | ||
+ | <td>0</td> | ||
+ | <td>-4</td> | ||
+ | <td>0</td> | ||
+ | </tr> | ||
+ | </tbody> | ||
+ | </table> | ||
+ | </source> | ||
+ | </p> | ||
<noinclude> | <noinclude> | ||
[[Category:SPT-Tags]] | [[Category:SPT-Tags]] | ||
</noinclude> | </noinclude> |
Aktuelle Version vom 18. April 2016, 15:03 Uhr
Name
<spt:tinymce> - Integriert einen Editor
Syntax
<spt:tinymce name="variable" theme="simple"/>
Beschreibung
Mit dem tinymce-Tag wird ein externer WYSIWYG-Editor ins CMS eingebunden. "What You See Is What You Get" steht für eine Übernahme eines geschriebenen Textes auf der Website, so wie ihn der Redakteur bei der Eingabe sieht. Auf diese Weise kann der Redakteur z.B. Tabellen oder Formatierungen in seine Artikel einbinden ohne über HTML-Kenntnisse zu verfügen. Die Ausgabe hängt aber nicht nur vom Editor, sondern auch von den Einstellungen des Browsers und den installierten Systemschriften ab.
Der Editor TinyMCE ist ein Open-Source Produkt der Firma Moxiecode und kann im Rahmen des CMS "so wie er ist" genutzt werden. TinyMCE ist kein Produkt der Sitepark GmbH und wird daher nicht von unserem Support betreut. Fehler-Meldungen und Erweiterungswünsche werden von Sitepark an den Hersteller weitergeleitet.
Themes
Über die Theme-Option lässt sich aus aktuell 2 vordefinierten Konfiguration wählen:
- simple
- advanced
Konfigurationserweiterung
Sollten die vordefinieren Themes den Anforderungen nicht entsprechen lässt sich der <spt:tinymce />
über unterschiedliche Mechanismen erweitern/überschreiben.
- Konfiguration mandantenweit ergänzen(nicht empfohlen)
- Hier wird die Standard-Konfiguration durch eine eigene ergänzt. Alle
<spt:tinymce>
-Tags die nicht das Attributconfig
verwenden, sind von dieser Anpassung betroffen. Die Anpassungen werden in einem Template mit dem Ankertag.spt.tinymce.configextension
vorgenommen
- Konfiguration per Konfigurationserweiterungen überschreiben (nicht empfohlen)
- Hier wird die Standard-Konfiguration durch eine eigene vordefinierte Konfiguration vollständig ersetzt. Die Konfigurationen werden in einem Template mit dem Anker
tag.spt.tinymce.config.${configname}
implementiert, wobei${configname}
einen Platzhalter für den Namen der Konfiguration bildet. Der Name wird dem<spt:tinymce/>
-Tag über das Attributconfig
übergeben.
- Konfiguration per Konfigurationserweiterungen erweitern
- Hier wird die Standard-Konfiguration durch eine eigene vordefinierte Konfiguration ergänzt. Die Ergänzungen werden in einem Template mit dem Anker
tag.spt.tinymce.configextension.${configextensionname}
implementiert, wobei${configextensionname}
einen Platzhalter für den Namen der Konfigurationserweiterung bildet. Der Name wird dem<spt:tinymce/>
-Tag über das Attributconfigextension
übergeben.
- Zusätzliche Konfiguration als Tag-Attribut
- Hier wird eine Konfigurationserweiterung über das Attribute
configvalues
inline an das<spt:tinymce/>
übergeben.
Konfigurationsoptionen
Die Konfiguration des TinyMCE besteht aus verschiedenen Konfigurations-Parametern, die mit JSON ohne umschließende geschweifte Klammern {} angegeben werden müssen.
Beispiel für TinyMCE-Konfiguration
toolbar: [
"pastetext | undo redo | bold italic | subscript superscript | indent outdent | bullist numlist | iesLink | charmap | abbr | table | removeformat"
],
statusbar: false,
object_resizing: false,
menu : {
file : {title : 'File' , items : 'newdocument'},
edit : {title : 'Edit' , items : 'undo redo | cut copy paste pastetext | selectall'},
insert : {title : 'Insert', items : 'link media | template hr'},
view : {title : 'View' , items : 'visualaid'},
format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table : {title : 'Table' , items : 'inserttable tableprops deletetable | cell row column'},
tools : {title : 'Tools' , items : 'spellchecker code'}
}
Es ist zu beachten, das hinter dem letzten Parameter kein Komma stehen darf.
Alle für den TinyMCE verfügbaren Parameter können unter http://www.tinymce.com eingesehen werden.
Folgende Plugins werden standardmäßig geladen, wobei zu beachten ist, dass das iesLink
-Plugin die Aufgabe des link
-Plugins übernimmt.
fullscreen, charmap, paste, table, contextmenu, abbr, iesLink, lang
Konfigurationserweiterung Ablauf
Die Konfigurationsauswertung findet wie folgt statt:
Das aktive Configset wird auf das Theme gesetzt.
Wenn eine Konfiguration angegeben wurde wird das bisher gesetzte Configset mit dem eingebunden Configset überschrieben(tag.spt.tinymce.config.${config})
Wenn eine Konfigurationserweiterung angegeben wurde, wird das bisher gesetzte Configset durch das angegebene erweitert
(tag.spt.tinymce.configextension.${configextension})
.
Wenn keine Konfigurationserweiterung angegeben wurde, wird das bisher gesetzte Configset durch die Mandanten-Erweiterung erweitert(tag.spt.tinymce.configextension)
.
Wenn Configvalues angegeben wurden wird das bisher gesetzte Configset durch die übergebenen Optionen erweitert.
Standard Konfiguration pro Mandant ersetzen
Es ist möglich die Standard-Konfiguration für den TinyMCE pro Mandant durch eine eigene Konfiguration zu ersetzen. Hierzu muß ein Template mit dem Anchor
tag.spt.tinymce.config
angelegt werden, in dem die Konfiguration hinterlegt ist. Existiert ein Template mit dem angegebenen Anchor, wird automatisch diese Konfiguration verwendet ohne das im <spt:tinymce>
-Tag noch Änderungen vorgenommen werden müssten.
Zusätzliche Konfigurationen pro Mandant definieren
Parallel zu der Standard-Konfiguration können weiter Konfigurationen pro Mandante definiert werden. Hierzu können Templates mit dem Anchor
tag.spt.tinymce.config.<configname>
angelegt werden, wobei mit <configname>
ein beliegeber Name (Anchorkonform) vergeben werden kann. Um die Konfiguration zu verwenden muß im <spt:tinymce>
-Tag mit dem Attribut config
der <configname>
der Konfiguration angegeben werden, die verwendet werden soll.
Standard Konfigurations-Ergänzungen pro Mandant definieren
Es ist möglich die Standard-Konfiguration für den TinyMCE pro Mandant mit eine eigene Konfiguration zu ergänzen. Hierzu muß ein Template mit dem Anchor
tag.spt.tinymce.configextension
angelegt werden, in dem die Konfiguration hinterlegt ist. Existiert ein Template mit dem angegebenen Anchor, wird automatisch diese Konfiguration verwendet ohne das im <spt:tinymce>
-Tag noch Änderungen vorgenommen werden müssten.
Zusätzliche Konfigurations-Ergänzungen pro Mandant definieren
Parallel zu den Standard-Konfigurations-Ergänzungen können weiter Ergänzungen pro Mandante definiert werden. Hierzu können Templates mit dem Anchor
tag.spt.tinymce.configextension.<configextensionname>
angelegt werden, wobei mit <configextensionname>
ein beliegeber Name (Anchorkonform) vergeben werden kann. Um die Konfiguration zu verwenden muß im <spt:tinymce>
-Tag mit dem Attribut configextension
der <configextensionname>
der Konfiguration angegeben werden, die verwendet werden soll.
Konfiguration in Tag-Attribut
Mit dem Attribut configvalues
können Konfigurationsparameter direkt angegeben werden. Diese Parameter werden mit JSON ohne umschließende geschweifte Klammern {} angegeben.
<sp:set name="_tinyconfig">
param1 : "a",
param2 : false
</sp:set>
<spt:tinymce ... configvalues="${_tinyconfig}" ... />
Mit dem spt:tinymce
erzeugte Texte ausgeben (ab Version 2.0.3)
Durch TinyMCE-Plugins des IES ist eine Nachbearbeitung des erzeugten Textes notwendig. Der Text sollte vor der Ausgabe den Tag spt:prehtml durchlaufen. Nur so ist sichergestellt, dass z.B. interne Links, die über den Editor eingetragen wurden, auch richtig ausgegeben werden.
Beispiel
<sp:io type="in">
<spt:tinymce name="sp_body"/>
</sp:io>
<sp:io type="out">
<spt:prehtml name="processed_body" object="sp_body"/><sp:print name="processed_body"/>
</sp:io>
Attribute
Name | Type | Required | Default | ab IES Version |
---|---|---|---|---|
name
|
Variable | Ja | None | 1 |
value
|
Text | Nein | None | 1 |
fixvalue
|
Text | Nein | None | 1 |
type
|
Content-Type | Nein | text | 1 |
disabled
|
Condition | Nein | None | 1 |
readonly
|
Condition | Nein | None | 1 |
rows
|
Number | Nein | 15 | 1 |
cols
|
Number | Nein | 80 | 1 |
theme
|
Text | Nein | advanced | 1 |
pools
|
Anchor-List oder ID-List | Nein | aktueller Informationspool | 1 |
config
|
Text | Nein | 2.0.3 | |
configextension
|
Text | Nein | 2.0.3 | |
configvalues
|
Text | Nein | 2.0.3 | |
toggle
|
Condition Oder Text | Nein | true | 2.26 |
Dynamische Attribute | Text | Nein | None | 1 |
name
- Bestimmt den Namen des Feldes.
value
- Setzt einen Default-Wert für die mit
name
angegebenen Variable, wenn sie leer ist.
fixvalue
- Überschreibt jeden vorhandenen Inhalt der mit
name
bestimmten Variablen mit dem durchfixvalue
angegebenen Wert.
locale
- Dieses Attribut bestimmt die Mehrsprachigkeit der Variablen.
type
- Der Typ des Eingabefeldes.
disabled
- HTML-Attribut (true, false).
readonly
- HTML-Attribut (true, false).
rows
- Höhe des Eingabefeldes in Zeilen.
cols
- Breite des Eingabefeldes in Spalten.
theme
- Konfigurationstypen, die den Funktionsumfang für den Editor beschreiben. Mögliche Themes sind:
- simple
- advanced
pools
- Kommaseparierte Liste von Anchors von Artikelpools oder von IDs von Artikelpools; die Elemente der Pools werden dem Redakteur in einem Linkdialog innerhalb des Editors zur Auswahl angeboten. Voraussetzung, dass der interne Linkdialog überhaupt angezeigt wird, ist die Konfiguration des Editors mit iesLink über theme_advanced_buttons in der TinyMCE:Configuration. Ausgabeseitig muss man darauf achten, dass ein interner Link vor der Ausgabe mit spt:id2url umgewandelt wird.
config
- Mit diesem Attribut wird der Name einer Konfiguration angegeben. Die in dieser Konfiguration angegebenen Konfigurationsparameter überschreiben die IES-Standardkonfiguration. Die Angaben werden in JSON angegeben, wobei die umschließenden geschweiften Klammern {} nicht mit angegeben werden dürfen. Die möglichen Konfigurationsparameter sind unter TinyMCE:Configuration aufgelistet.
configextension
- Mit diesem Attribut wird der Name einer Konfigurations-Ergänzung angegeben. Die in dieser Ergänzung angegebenen Konfigurationsparameter ergänzen und überschreiben die Parameter der IES-Standardkonfiguration. Die Angaben werden in JSON angegeben, wobei die umschließenden geschweiften Klammern {} nicht mit angegeben werden dürfen. Die möglichen Konfigurationsparameter sind unter TinyMCE:Configuration aufgelistet.
configvalues
- Mit diesem Attribut können TinyMCE Konfigurationen angegeben werden. Die Konfigurationsparameter ergänzen und überschreiben die Parameter der IES-Standardkonfiguration. Die Angaben werden in JSON angegeben, wobei die umschließenden geschweiften Klammern {} nicht mit angegeben werden dürfen. Die möglichen Konfigurationsparameter sind unter TinyMCE:Configuration aufgelistet.
- Dynamische Attribute
- Dynamische Attribute sind beliebige HTML-Attribute, die evaluiert und bis zum HTML-Tag durchgereicht werden.
toggle
- Mit diesem Attribut lässt sich angeben, wie der TinyMce eingeschaltet werden soll. True für einen Toggle Button, False für keinen Toggle-Button, auto für automatisches togglen
Beispiele
WYSIWYG-Editor nutzen und Inhalt ausgeben
Template Quelltext
<sp:io type="in">
<spt:tinymce name="sp_body"/>
</sp:io>
<sp:io type="out">
<spt:prehtml name="processed_body" object="sp_body"/><sp:print name="processed_body"/>
</sp:io>
Barrierefreie Datentabellen
In der Tabellendarstellung haben wir Sehende es einfacher komplexe Strukturen zu erkennen.
Wir können in der Spalte kurz nach oben schauen, um uns zu vergewissern zu welcher Kopfinformation der Zelleninhalt gehört. Für Screenreader ist hier unbedingt eine eindeutige Zuordnung nötig.
Die Web Content Accessibility Guidelines fordert in den Guidelines 2.0 von einer HTML Tabelle
- Ein Caption-Element welches eine kurze Überschrift der Tabelle bereitstellt (H39) (Level A)
- Eine Trennung des Überschrifts- und Inhaltsbereichs der Tabelle mit dem thead-, und tbody-Element (H51) (Level A)
- In dem Überschriftsbereich sollen die th-Elemente mit dem Attribut scope=“col“ eine Verknüpfung zu einer Spalte haben (H63) (Level A). Wenn Datenzellen mehr als einer Zeilen- und/oder Spaltenüberschrift zugeordnet sind werden die Zellen mit ID- und header-Attribut miteinander verknüpft (H43) (Level A)
- Falls vorgesehen sollten td-Elemente mit dem Attribut scope=“row“ Zeilenheaderzellen definieren (H63) (H43) (Level A)
Wie erstelle ich eine Tabelle
-
Öffnen Sie die Tabellenkonfiguration über den Schalter in der Toolbar und wählen Sie aus wie viele Spalten/Zeilen Sie benötigen.
-
Öffnen Sie die Tabelleneigenschaften.
-
Hier kann die Option zur Eingabe einer Caption aktiviert werden.
-
Nun erscheint oberhalb der Tabelle ein neues Feld zur Eingabe der Caption
-
Füllen Sie die weiter Tabelle mit Inhalten
-
Um die obere Zeile als Spaltenbeschreibung zu deklarieren, markieren Sie die Zeile und öffnen die Zelleneigenschaften
-
Ändern Sie den Zellentyp auf Kopfzeile
-
Um anzugeben, dass es sich bei den markierten Feldern um Spaltenüberschriften handelt, müssen Sie den Gültigkeitsbereich auf Spalte ändern
-
Gehen Sie bei Zeilenüberschriften genauso vor
-
An stelle von "Spalte" geben wir hier als Gültigkeitsbereich "Zeile" an, da es sich um zeilenweise Überschriften handelt
-
Die fertige Ausgabe auf der Website kann dann z.B. so aussehen:
Was schreibt der TinyMCE nun auf die Webseite?
So sieht der HTML Code mit unseren Zusatzinformationen und Änderungen aus:
<table>
<caption>Gruppe G</caption>
<tbody>
<tr>
<th scope="col">Land</th>
<th scope="col">Punkte</th>
<th scope="col">Tore</th>
<th scope="col">Tordifferenz</th>
<th scope="col">Siege</th>
</tr>
<tr>
<th scope="row">Deutschland</th>
<td>3</td>
<td>4</td>
<td>4</td>
<td>1</td>
</tr>
<tr>
<th scope="row">USA</th>
<td>3</td>
<td>2</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th scope="row">Ghana</th>
<td>0</td>
<td>1</td>
<td>-1</td>
<td>0</td>
</tr>
<tr>
<th scope="row">Portugal</th>
<td>0</td>
<td>0</td>
<td>-4</td>
<td>0</td>
</tr>
</tbody>
</table>