TinyMCE in Contao 4 anpassen
von Marco Simbürger
In Contao 4 gibt es ein eigenes Template be_tinyMCE.html5, um die Darstellung des Editors im Contao Backend anzupassen.
Das Template ist ein Backend-Template (be_*) und muss deshalb im Hauptverzeichnis templates/ liegen und nicht in einem Unterordner - sonst wird es nicht geladen.
Beispiel eigene Styles
Um zum Beispiel eigene Styles (Formatierungen) im TinyMCE zu definieren, gibt es die Option style_formats.
Die Option style_formats wird verwendet, um die Daten zu steuern, die über die Schaltfläche styleselect und nicht über die Schaltfläche formatselect angezeigt werden. Deshalb muss styleselect unter toolbar noch hinzugefügt werden.
toolbar: 'link unlink | image | styleselect | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code',Die Option style_format_merge sorgt dafür, dass die Default-Formatierungen nicht überschrieben werden. In der Option style_formats werden dann die eigenen Styles definiert.
style_formats_merge: true,
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}
],Man kann auch einen neuen Bereich (aufklappbare Option) anlegen und darin mehrere seiner eigenen Styles hinzufügen.
style_formats_merge: true,
style_formats: [
{title: 'My List', items: [
{title: 'Shadow 1', inline: 'span', classes: "textShadow"},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}
]}
]Weitere Infos auf https://www.tiny.cloud/docs/configure/content-formatting/
Damit das ganze im Editor auch noch entsprechend aussieht, kann man eigenes CSS dazu laden, um die neuen Styles zu formatieren. Dabei sollte man darauf achten, das eigene CSS hinzuzufügen und nicht das bestehende, standard-CSS zu überschreiben.
content_css: [
'system/themes/<?= Backend::getTheme() ?>/tinymce.css',
'files/tinymce/tinymce_custom.css'
],
Kommentare
Einen Kommentar schreiben