Je mehr wir den Texteditor “TinyMCE” in unseren Projekten einsetzen, desto mehr wächst er uns ans Herz – so umfangreich und flexibel ist dieser anpassbar. Darum verwenden wir ihn auch bei unserem hauseigenen Content Management System.
Diesmal war die Kunden- Anfrage folgende: in einem Redaktions- System soll am Ende jedes Beitrages der jeweilige Autor in dieser Art und Weise vorgestellt werden:
Hier jedesmal Foto und Beschreibung manuell einzupflegen sollte vermieden werden, auch wechseln häufig die Autoren. Ein diesbezüglicher Automatismus war in dieser Software nicht vorgesehen, was also tun?
Da der TinyMCE bereits integriert war bot sich dieser zur Lösung regelrecht an, und hierbei die Funktion “Vorgefertigte Vorlageninhalte einfügen / Insert predefined template content”.
Und so war unsere Vorgehensweise (Texte und Adressen sind nat. nur Beispiele bzw. Dummies):
1) Inhalt erstellen:
Wir erstellen eine HTML- Datei namens “autor_nachname.html” mit folgendem Inhalt:
Autor: <b>Vorname Nachname</b><br />
E- Mail: <a href="mailto:name@example.org">name@example.org</a><br />
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.
Dies ist der HTML- Code (formatiert mit CSS) welcher später eingefügt wird und obige Ansicht erzeugt – Head, Body & Co sind also nicht nötig.
2) Settings für den Texteditor anpassen:
Diese Settings bestimmen Aussehen und Funktion des Texteditors. Je nach verwendeter Software sind diese zentral gespeichert oder in den Head der Datei eingebunden.
Für die neue Funktion benötigen wir die Plugin- Definition “template” (1) (das Plugin selber wird von TinyMCE mitgeliefert), die Einbindung des passenden Buttons in die Buttonleiste namens “template” (2) sowie die Information zum Speicherort der “Snippet- Liste” (3). Letztere wird im nächsten Schritt erstellt.
3) Auflistung der Snippets:
Diese Datei beinhaltet die Auflistung aller Snippets inkl. Beschreibung und Adresse und wird unter dem Namen “template_list.js” wie im Schritt 2) Punkt (3) vermerkt gespeichert.
(1) Kurzbezeichnung des Snippets, diese wird im Popup- Fenster (siehe letztes Bild) in der Dropdown- Auswahl “Template” angezeigt.
(2) Url des Snippets (die HTML- Datei aus Schritt 1)), relativ zum Dokument welches den Texteditor enthält.
(3) Beschreibung des Snippets, diese wird im Popup- Fenster (siehe letztes Bild) als “Description” angezeigt.
(4) jede Zeile wird mit einem Beistrich abgeschlossen, nicht aber die letzte Zeile!
Der genaue Code zum Kopieren und Umschreiben:
var tinyMCETemplateList = [
["Autor Nachname", "customized/autor_nachname.html", "Autorenbeschreibung Vorname Nachname"],
["Autor Nachname 2", "customized/autor_nachname_2.html", "Autorenbeschreibung Vorname Nachname 2"]
];
Fertig!
Und so sieht es dann im Administrationsformular aus:
Der markierte neue Button öffnet folgendes Popup- Fenster:
Im Dropdown “Template” wählt nun der Admin die passende Autoren- Beschreibung aus. Sofort wird diese in das “Preview”- Fenster geladen und die “Description” wird angezeigt.
Nach Klick auf “Insert” schließt sich dieses Fenster und der vordefinierte Inhalt befindet sich im Textfeld des Admin- Formulares und kann mit den restlichen Inhalten gespeichert werden.
