Tipps & Tricks - TinyMCE - Eigene Toolbar

In diesem Beitrag erfahren Sie, wie Sie für Textfelder, die im Editormodus den TinyMCE-Editor verwenden, eigene Toolbarkonfigurationen erstellen können. Wechseln Sie in das Portalverzeichnis internal/cfg/htmleditor/tinymce. Erstellen Sie eine neue Datei mit der Dateiendung .xml (z.B. customConfig.xml). Öffnen Sie diese Datei in einem beliebigen Texteditor und fügen Sie folgenden Inhalt ein:
<?xml version="1.0" encoding="UTF-8"?>
<toolbarbutton-panel>
   <property>
      <title de="Meine Toolbar" en=" My Toolbar "/>
   </property>
   <toolbarbutton-row>
      <toolbarbutton name="help" type="standard"/>
   </toolbarbutton-row>
</toolbarbutton-panel>
Wichtig ist, dass das Element <toolbarbutton-row> initial mindestens ein Element, in diesem Beispiel <toolbarbutton>, beinhaltet. In der Zeile
<title de="Meine Toolbar" en=" My Toolbar "/>
kann der Name der Toolbar-Konfiguration geändert werden. Speichern Sie die Datei. Wechseln Sie nun in das Modul Applikationen und erstellen Sie eine neue Applikation. Legen Sie dort ein Textfeld. Im Eigenschaftendialog des Textfelds wechseln Sie auf den Reiter Optionen.



Setzen Sie hier die Einstellung "Editormodus". Klicken Sie dann auf "Standardkonfiguration laden". Anschließend können Sie Ihre persönliche Toolbarkonfiguration (Liste "Ausgewählte Schaltflächen") zusammenstellen. Nachdem Sie die gewünschten Schaltflächen zusammengestellt haben, schließen Sie den Dialog mit Klick auf OK. Markieren Sie das Textfeld und öffnen Sie den Details-Dialog mit der Taste F4. Wechseln Sie auf den Reiter XML.



Kopieren Sie den gesamten Text innerhalb des Elements <toolbarbutton-panel>. Fügen Sie ihn im Texteditor an Stelle des bisher bestehenden Elements <toolbarbutton-row> in die Datei "customConfig.xml" ein. Für unser Beispiel würde der Inhalt der Datei nun so aussehen:
<?xml version="1.0" encoding="UTF-8"?>
<toolbarbutton-panel>
   <property>
      <title de="Meine Toolbar" en=" My Toolbar "/>
   </property>
   <toolbarbutton-row>
	<toolbarbutton name="bold" type="standard"/>
	<toolbarbutton name="italic" type="standard"/>
	<toolbarbutton name="underline" type="standard"/>
   </toolbarbutton-row>
</toolbarbutton-panel>
Speichern Sie die Datei und schließen Sie den Editor.



Ab sofort kann diese Konfiguration in jeder beliebigen Applikation des Portals bei einem Textfeld mit Editormodus ausgewählt werden.