Horizontal Rule (hr) Button in Contao TinyMCE

Warum braucht es einen Horizontal Rule Button in Contao?

Mit den letzten Updates hat Contao in seiner Benutzeroberfläche die Ausstattung des On-Board-Editors TinyMCE stark verschlankt und auf das Notwendigste reduziert. Das ist prinzipiell gut zu heißen, möchte man nicht irgendwann ein komplett aufgeblähtes System haben. Wichtig ist es an dieser Stelle aber auch, die User über die Installationswege der ehemaligen Funktionen aufzuklären. Verlangt der Auftraggeber nun in einem neuen Projekt nach ebendiesem Button, sollte das Aufrüsten schließlich gut dokumentiert und einfach sein.

Für die aktuelle Version von Contao findet sich im Handbuch keine funktionierende Anleitung für die Funktionen, die von TinyMCE nicht mehr als Standard in Contao ausgeliefert werden.

Installation des Plugins <hr>

Wenn man weiß, wie sich das Plugin nachrüsten lässt, ist eine Installation allerdings kein Hexenwerk und schnell erledigt:

1. Download des Plugins

Unter der Adresse https://www.tinymce.com/download/ muss zunächst der ganze TinyMCE-Editor in der Community-Version heruntergeladen und auf dem eigenen Rechner entpackt werden. Anschließend navigieren Sie zu „\js\tinymce\plugins“ und suchen dort unter den zahlreichen Plugins nach dem Ordner „hr“.

2. Upload auf den Webspace

Den Ordner „hr“ laden Sie auf Ihrem Webspace in das Contao-System unter folgendem Pfad „/assets/tinymce4/plugins“ hoch.

3. Installation in Contao

Nun muss der TinyMCE-Editor noch mit dem Plugin verknüpft werden. Das erfolgt unter „/system/config/tinymce.php„.  – Zunächst muss das Plugin der Zeile mit den aktiven Plugins hinzugefügt werden:

plugins: 'autosave charmap code fullscreen hr image importcss link lists paste searchreplace tabfocus table template visualblocks',

Für die Übersichtlichkeit ist es empfohlen, das Plugin in die alphabetische Auflistung zu integrieren. Die Auflistung erflogt ohne Kommata – Alles andere führt zu einem Fehler.

4. Plugin in der Toolbar von TinyMCE hinzufügen

Diese Anpassung erfolgt ebenfalls unter „/system/config/tinymce.php„. – Hierfür suchen Sie diese Zeile und fügen Sie „hr“ an der Stelle ein, an der Sie es für sinnvoll halten. Die Anordnung in der Zeile entspricht auch der späteren Anordnung in der Benutzeroberfläche.

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

Halten Sie sich auch hier an die Schreibweise mit dem Trenner, damit ein eigener Button für Ihr Plugin erstellt wird. Am Ende rufen Sie zur Kontrolle noch den Editor auf und schauen Sie, ob alles geklappt hat. Ich hoffe, mit dem kleinen Beitrag weitergeholfen zu haben.

Leave a Comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.