Zielgruppe BetriebVersion: GSB10.1Richtext Konfiguration
Die Bearbeitung redaktioneller Inhalte wie Haupt- oder Teasertext erfolgt mit Hilfe eines TinyMCE basierten Richtext-Editors.
Die Möglichkeiten der GSB Editor basierten Richtextbearbeitung orientieren sich daher stark an den Möglichkeiten und Funktionalitäten des TinyMCE-Editors. Die Konfiguration der Richtext-Bearbeitung im GSB Editor basiert ebenfalls auf der TinyMCE-Konfiguration, so dass die vorhandene TinyMCE-Dokumentation als Grundlage und Ausgangsbasis für die GSB Editor Richtextkonfiguration genommen werden kann (siehe auch https://www.tinymce.com/).
An dieser Stelle wird daher insbesondere auf die GSB Editor spezifischen Besonderheiten der TinyMCE-Konfiguration eingegangen.
Prinzipieller Aufbau
Innerhalb der Editor-Konfiguration des Mandanten können verschiedene TinyMCE-Konfigurationen genutzt werden, die im Content des Mandanten abgelegt sind.
So nutzt die GSB SL bspw. eine abgespeckte Konfiguration für die Title-Property und eine umfangreichere Konfiguration für Properties wie Haupttext u.ä. bei der Absatz- und Inline-Auszeichnungen vorgenommen werden können.
Die TinyMCE-Konfigurationen liegen im Content des Mandanten:
- __EditorConfig/PropertyEditor/HtmlEditor/Standard.json definiert die TinyMCE-Konfiguration für Standard Richtext-Properties
- __EditorConfig/PropertyEditor/HtmlEditor/SingleLine.json enthält die Konfiguration für die Text-Only-Properties wie Titel (Property-Name title)
| Hinweis: |
|---|
Die TinyMCE-Konfiguration im Mandanten stützt sich auf eine Basiskonfiguration, die Bestandteil des GSB-Release ist. Im Mandanten werden nur die Konfigurationen vorgenommen, die von der Basiskonfiguration abweichen. Die Konfiguration der Standard Richtext-Properties entspricht der Basiskonfiguration, so dass die Konfiguration im Dokument in der SingleLine Konfiguration sind einige Auszeichnungsmöglichkeiten deaktiviert. Die Deaktivierung eines JSON-Objektes in der Konfiguration erfolgt durch setzen des Wertes Werte werden überschrieben, indem sie neu gesetzt werden (siehe bspw. |
In diesen JSON-Dateien gibt es den Abschnitt "tinymce", welcher in bis zu 6 weitere Abschnitte unterteilt ist:
- base
- custom
- extensions
- formatbuttons
- singleselects
- multiselects
Abschnitt base
Der Abschnitt base enthält die eigentliche TinyMCE-Konfiguration (siehe dazu die Dokumentation des TinyMCE auf https://www.tinymce.com/docs/configure/), die jedoch an einigen (wichtigen) Stellen vom GSB Editor noch verändert wird bevor sie TinyMCE übergeben wird.
Einstellungen, die überschrieben werden sind u.A. fixed_toolbar_container, selector und readonly. Darüber hinaus ist es an dieser Stelle nicht möglich Einstellungen zu konfigurieren, die eine JavaScript-Funktion erwarten (weil JSON als Transportformat keine JavaScript-Funktionen unterstützt).
Unter anderen werden folgende solcher Einstellungen vom Editor überschrieben:
- setup
- paste_postprocess
- spellchecker_callback
Die folgenden Definitionen können mandantenspezifisch überschrieben werden:
- toolbar1
- toolbar2
Die Toolbar-Definitionen ermöglichen die Festlegung einer mandantenspezifischen Konfiguration der TinyMCE-Buttonleiste (siehe auch https://www.tinymce.com/docs/configure/editor-appearance/#toolbarn). Dass heißt die beiden Toolbar-Abschnitte definieren die Inhalte der Toolbars. Die Namen bzw. Identifikatoren der TinyMCE-eigenen Buttons, Menüs und der Plugins können der TinyMCE-Dokumentation entnommen werden. Die Toolbar kann auch um GSB Editor Komponenten erweitert werden (siehe auch Abschnitt Formatbuttons).
Die Inhalte des Kontextmenüs werden im Abschnitt contextmenu konfiguriert (siehe auch https://www.tinymce.com/docs/plugins/contextmenu/). Die Namen bzw. Identifikatoren der TinyMCE-eigenen Buttons, Menüs und der Plugins können der TinyMCE-Dokumentation entnommen werden. GSB spezifische Definitionen finden sich insbesondere in den Abschnitten zur Tabellendefinition (siehe auch https://www.tinymce.com/docs/plugins/table/). Im Einzelnen handelt es sich um:
- table_class_list
- table_cell_class_list
- table_row_class_list
Mögliche Klassen für die Tabelle selbst, für die einzelnen Zellen und für die Zeilen.
Absatzformate werden im Abschnitt block_formats definiert (siehe auch https://www.tinymce.com/docs/configure/content-formatting/#block_formats).
Die folgenden Definitionen ermöglichen die Filterung von Inhalten. Diese ist insbesondere bei Copy&Paste-Operationen aus Worddokumenten bzw. HTML-Seiten hilfreich, da hierrüber nicht erwünschte Auszeichnungen gefiltert werden können (siehe auch https://www.tinymce.com/docs/configure/content-filtering/):
- invalid_elements
- valid_elements
- extended_valid_elements
- valid_children
- valid_classes
- valid_styles
- invalid_styles
In den oben aufgeführten Abschnitten können die erlaubten bzw. verbotenen Elemente erweitert oder eingeschränkt werden.
| Hinweis: |
|---|
| Wenn an dieser Stelle Elemente, Klassen, Styles, etc. verboten werden, die an anderer Stelle durch den Editor erzeugt werden (bspw. Links oder Tabellen), werden die entsprechenden Buttons/Menüs, die diese Elemente erzeugen sollen, aufgrund der definierten Filter nicht ordnungsgemäß funktionieren. Anpassungen erfordern Kenntnisse über die internen Speicherformate der Richtextformate und das Zusammenspiel der einzelnen TinyMCE-Komponenten und müssen daher mit größter Sorgfalt vorgenommen werden. |
Abschnitt custom
Dieser Abschnitt kann Konfigurationen für spezielle Java-Klassen enthalten und wird nur für GSB Editor interne Konfigurationen verwendet. Änderungen in diesem Abschnitt durch den GSB-Mandanten dürfen daher nicht vorgenommen werden.
Abschnitt extensions
Dieser Abschnitt enthält die Konfigurationen für Richtext-Erweiterungen, die jeweils eine gleichnamige Java-Klasse benötigen, in der die eigentliche Funktionalität bereitgestellt wird. Hier kann das Aussehen der GSB-eigenen Buttons BITV, Bild, Link und Navigation konfiguriert werden (ob dort bspw. Text oder ein Icon o.ä. verwendet werden soll).
Abschnitt formatbuttons
Der Abschnitt Formatbuttons bietet die Möglichkeit, einfache Buttons zu erzeugen, die ein TinyMCE-Format an- oder ausschalten (siehe auch https://www.tinymce.com/docs/configure/content-formatting/#formats). Die entsprechenden Formate werden an dieser Stelle ebenfalls erzeugt.
Beispiel für einen Formatbutton
Der exemplarische Formatbutton wird für den Mandanten Standardlösung definiert (Kürzel: standardlg), um Text mit einer Art Änderungsmarkierung zu versehen. Der mit der Änderungsmarkierung gekennzeichnete Text wird mit einem span-Element geklammert der die CSS-Klasse changes zugeordnet ist.
In der Webdarstellung können die so ausgezeichneten Textpassagen dann mit Hilfe der CSS-Klasse changes über mandantenspezifische CSS-Anpassungen wie gewünscht dargestellt werden.
"formatbuttons": {
"standardlsgChanges": {
"textLabel":"standardlsg.tinymce.changesButton.text",
"tooltipLabel":"standardlsg.tinymce.changesButton.tooltip",
"format": {
"name": "standardlsg-changes",
"classes": "changes",
"inline": "span"
}
}
}
Der so definierte Name standardlsgChanges kann bspw. in base > toolbar1 verwendet werden, um diesen Button im ersten Toolbar anzuzeigen. Der Name des mandantenspezifischen Button muss der skizzierten Namenskonvention folgen, um die Eindeutigkeit des Button(-namens) gewährleisten zu können. ist an dieser Stelle frei wählbar.
Der Button soll wie skizziert ein span-Element eingefügen. Da es sich bei span-Elementen um Inline-Element handelt, werden diese wie skizziert unter format definiert. Für blockquote müsste es bspw. stattdessen die Eigenschaft block sein (s.a. TinyMCE-Dokumentation Kapitel "Format parameters").
Die weitere Konfiguration des Buttons ist wie folgt:
- textLabel ist der Name des Labels, das den auf dem Button angezeigten Text bestimmt
- tooltipLabel ist der Name des Labels, das den Tooltip-Text des Buttons bestimmt
- Der name des Formats ist ein interner Identifikator, den der TinyMCE-Formatter benutzt. Er muss wie skizziert eindeutig sein.
- Labels werden i.d.R. aus dem Dokument __EditorConfig/Labels/lang_de geladen. Dort muss also (beispielsweise) folgender Text hinzugefügt werden:
- tinymce.changesButton.text="Änderungen"
- tinymce.changesButton.tooltip="Änderungen markieren"
Abschnitt singleselects
In diesem Abschnitt werden einfache Menü-Buttons erzeugt, die zwischen definierten TinyMCE-Formaten hin- und herschalten oder diese ganz entfernen können (siehe auch https://www.tinymce.com/docs/configure/content-formatting/#formats). Die entsprechenden Formate werden an dieser Stelle ebenfalls erzeugt.
Beispiel für ein Singleselect
Das folgende Beispiel erweitert den GSB Mandanten Standardlösung um einen Singleselect-Menübutton, um "normale" Paragraphen (p-Elemente) zusätzlich mit drei verschiedenen Klassen (css-pclass—two-columns, css-pclass—offsetlinks, css-pclass—offsetrechts) auszeichnen zu können. Jeder einzelne Paragraph kann nur mit einer der drei Klassen ausgezeichnet werden. Das skizzierte Beispiel ist eine typische Anforderung von GSB Mandanten, um mandantenspezifische Text- und Absatzauszeichnungen im GSB Editor bereitzustellen.
Anders als formatbuttons verwalten singleselects mehrere Formate, die in einem Menü angezeigt werden, wenn der Button geklickt wird.
"standardlsgAbsatzauszeichnung": {
"textLabel": "standardlsg.tinymce.absatzauszeichnungButton.text",
"tooltipLabel": "standardlsg.tinymce.absatzauszeichnungButton.tooltip",
"formats": [{
"name": "standardlsg-p-two-columns",
"textLabel": "standardlsg.tinymce.absatzauszeichnungButton.two-columns",
"classes": "css-pclass--two-columns",
"selector": "p"
},{
"name": "standardlsg-p-offsetlinks",
"textLabel": "standardlsg.tinymce.absatzauszeichnungButton.offsetlinks",
"classes": "css-pclass--offsetlinks",
"selector": "p"
},{
"name": "standardlsg-p-offsetrechts",
"textLabel": "standardlsg.tinymce.absatzauszeichnungButton.offsetrechts",
"classes": "css-pclass--offsetrechts",
"selector": "p"
}]
}
Der so definierte Name standardlsgAbsatzauszeichnung kann bspw. in base > toolbar1 verwendet werden, um diesen Button im ersten Toolbar anzuzeigen. Der Name des mandantenspezifischen Button muss der skizzierten Namenskonvention folgen, um die Eindeutigkeit des Button(-namens) zu gewährleisten zu können. ist an dieser Stelle frei wählbar.
Hinweis
Der GSB Editor verwendet für editorspezifische Standardbuttons das Kürzel webEditor, welches für mandantenspezifische Buttons daher nicht verwendet werden darf.
Hier soll ein bestehendes p-Element mit einer CSS-Klasse ausgezeichnet werden. Daher nutzen diese Formate die Eigenschaft selector. Das Format wird immer auf ein umschließendes Element, was diesem Selektor entspricht, angewendet (oder gar nicht, wenn ein solches Element nicht existiert). Für Formate, die ein neues Element erzeugen soll (soweit nicht vorhanden), siehe das Beispiel zu den formatbuttons.
Die weitere Konfiguration des Buttons ist wie folgt:
- standardlsgAbsatzauszeichnung.textLabel ist der Name des Labels, das den auf dem Button angezeigten Text bestimmt.
- standardlsgAbsatzauszeichnung.tooltipLabel ist der Name des Labels, das den Tooltip-Text des Buttons bestimmt.
- Die eindeutige name-Formatbezeichnung ist ein interner Identifikator, den der TinyMCE-Formatter benutzt.
- Das textLabel des jeweiligen Formats bestimmt, welcher Text im Menü für das Format benutzt wird.
Die Labeldefinitionen der mandantenspezifischen Label werden aus dem Dokument __EditorConfig/Labels/lang_de geladen. Dort muss also (beispielsweise) folgender Text hinzugefügt werden:
standardlsg.tinymce.absatzauszeichnungButton.text="Absatzauszeichnung"
standardlsg.tinymce.absatzauszeichnungButton.tooltip="Absatzauszeichnung"
standardlsg.tinymce.absatzauszeichnungButton.two-colums="zweispaltig"
standardlsg.tinymce.absatzauszeichnungButton.offsetlinks="Einzug links"
standardlsg.tinymce.absatzauszeichnungButton.offsetrechts="Einzug rechts"
Abschnitt multiselects
Wie singleselects, aber jede Kombination der angegebenen Formate ist zulässig (siehe auch https://www.tinymce.com/docs/configure/content-formatting/#formats). Diese können im Menü einzeln an- oder ausgeschaltet werden.
Rechtschreibprüfung
Der Richtexteditor unterstützt eine Rechtschreibprüfung auf Basis von Dictionaries. Ein Dictionary ist an dieser Stelle als Liste von Wörtern zu verstehen. Alle Wörter des Dictionaries werden bei der Prüfung zur Ermittlung von korrekt geschriebenen Wörtern sowie für eine Vorschlagsliste bei falsch geschriebene Wörter berücksichtigt. Darüber hinausgehende Prüfungen werden bei der Rechtschreibprüfung nicht durchgeführt.
Das GSB Release enthält bereits ein Basisdictionary. Durch Bereitstellung weiterer Dictionaries im Content des Mandanten kann der Umfang des Dictionaries erweitert werden.
Hierzu werden im Content des Mandanten Dokumente (Dokumenttyp ConfigRichText10) im Ordner __EditorConfig/Dictionaries abgelegt. In der Property Wert werden die Begriffe des mandantenspezifischen Wörterbuchs definiert. Jedes Wort steht hierbei jeweils in einer Zeile.
Durch Verwendung mehrerer Dokumente können Begriffe zu fachlich zusammenhängenden Wörterbüchern zusammegefasst werden. Bei der Rechtschreibprüfung werden alle ConfigRichText10-Dokumente im Dictionaries-Ordner berücksichtigt.
Änderungen an den Wörterbüchern werden bei nachfolgenden Rechtschreibprüfungen direkt berücksichtigt.
| Hinweis: |
|---|
Die Standardlösung bringt bereits zwei exemplarische Beispiel-Wörterbücher (bundesamt_dictionary und lückentext_dictionary) und zeigen den prinzipiellen Aufbau eines Dictionary-Dokumentes und die Möglichkeiten der Organisation der Begriffe in verschiedenen Wörterbuchdokumenten. |