TinyMCE unter Contao 4 anpassen

Um die Darstellung des Editors im Contao Backend anzupassen, gibt es seit Contao 4 ein eigenes Template: be_tinyMCE.html5

Mithilfe des Templates lassen sich im TinyMCE Editor relativ leicht und vor allem updatesicher neue Formatierungen und Buttons hinzufügen. Wir verwenden die zum Beispiel eine eigene TinyMCE Konfiguration, um aus einfachen Links unterschiedliche Buttons machen zu können und um schneller auf die eigenen Formatierungen zugreifen zu können.

1. Template anlegen

Im ersten Schritt muss zunächst das Template be_tinyMCE.html5 angelegt werden. Wichtig ist, dass das Template im Hauptverzeichnis templates/ liegt und nicht etwa in einem Theme-Unterordner, da es sonst nicht geladen wird.

2. Einen Eintrag in der Toolbar hinzufügen

Um schneller auf eigene Formatierungen zugreifen zu können, haben wir die Toolbar (dort wo das Link-Icon, Bild hinzufügen, B I usw. steht) um einen Button für Formate ergänzt.

Dafür einfach die Zeile für die Toolbar suchen

toolbar: 'link unlink | image | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | code',

und durch ein | styleselect ergänzen:

toolbar: 'link unlink | image | bold italic | styleselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | code',

3. eigene CSS-Formatierungen laden

Mithilfe von content_css kannst du eine eigene CSS-Datei laden, die die Darstellung im Editor beeinflusst. Hier kannst zum Beispiel die Schriftgröße anheben, die im Layout verwendete Schrift laden oder neue Elemente (siehe 4.) formatieren.

Um eine eigene CSS-Datei zu laden, fügst du diese Zeile mit dem Pfad einfach hinter der letzten Option (z.B. toolbar) ein:

content_css: ['/files/themeordner/tinymce.css']

Wichtig: wenn du eine neue Zeile hinzufügst, solltest du darauf achten, das die vorherige Zeile durch ein Komma ergänzt wird. Außerdem muss der Ordner, in dem die CSS-Datei liegt öffentlich sein (Danke Kim für den Hinweis).

4. eigene Formatierungen definieren

Um eigene Formatierungen im TinyMCE zu definieren gibt es die Option style_formats. Mit dieser ist es beispielsweise möglich, Textteile mit einer zusätzlichen Klasse auszuzeichnen. Nachfolgend ein Beispiel wie wir Paragraphen über Formatierungen eine zusätzliche Klasse text--attention geben können:

style_formats_merge: true,
style_formats: [
   {title: 'Theme Styles', items: [
     { title: 'Text Attention', block: 'p', classes: 'text--attention',  exact: true }
   ]}    
]

Erklärung: Die Option style_format_merge sorgt dafür, dass bestehende Formatierungen nicht überschrieben sondern ergänzt werden. In der Option style_formats wird dann ein neuer Bereich Theme Styles angelegt und ein Listen-Element Text Attention angezeigt. Dieses ist nur auf Paragraphen anwendbar und erhält die Klasse text--attention. Über exact: true gebe ich außerdem an, dass andere Klassen entfernt werden sollen, damit es keine Konflikte mit anderen Klassen gibt.