Joomla 4 Cassiopeia - TinyMCE Template

Aus Textverarbeitungsprogrammen kennt man die Textbausteine. Textpassagen, die sich oft wiederholen, sind per Klick hinzufügbar. Ähnlich kann man mit Formaten im TinyMCE verfahren. Mir geht es um das Prinzip. Deshalb ist das Beispiel hier wieder einfach gehalten. Ein Text wird lediglich mit einem roten Hintergrund versehen.

Cassiopeia bietet Bootstrap 5. Lass dich für eigene Anwendungsbeispiele in der Bootstrap Dokumentation[getbootstrap.com/docs/5.0] inspirieren, falls du nicht selbst schon eine Menge Ideen hast. Ein oft verwendeter Anwendungsfall ist eine Tabelle, die nur zu Design-zwecken angelegt wird. Es ist in HTML verpönt eine Tabelle lediglich für die Darstellung zu verwenden, weil es die Semantik nicht widerspiegelt. Andere Elemente sind semantisch sinnvoller und sehen genauso aus, wie eine Tabelle. Im einfachsten Fall das Grid[^getbootstrap.com/docs/5.0/layout/grid/]

Ein Template für die Verwendung im TinyMCE in Joomla 4 anlegen

Als erstes erstellen wir die Datei redBackground.html im Verzeichnis /templates/cassiopeia/html/tinymce/.

<!-- /templates/cassiopeia/html/tinymce/redBackground.html -->
<div class="redbackground"><p>Text</p></div> 

Die im nachfolgenden Bild ersichtlichen Pfade musst du an deine individuelle Umgebung anpassen, wenn du nicht Cassiopeia als Standardtemplate verwendest - oder ein Child Template.

Erstelle nun einen Artikel und wähle im Menü des TinyMCE den Menüeintrag zum einfügen eines Templates.

Wenn es in deiner Installation mehrere Templates gibt, dann kannst du wählen.

Je nachdem, welches HTML-Markup dein Template beinhaltet, wird nun eingefügt. Wenn du genau mein simples Beispiel verwendet hast, wird der Code <div class="redbackground"><p>Text</p></div> eingefügt.