Neue Möglichkeit für "WYSIWYG Addons"

Samstag, 17. August 2013 - 02:23 Uhr

Fast alle kennen ja unsere Addons, die man im Template, in Modulen oder in Codeseiten integrieren und somit aufrufen kann. Vor einiger Zeit wurde an einer neuen Methode getestet, das ganze noch weiter auszubauen und eine Möglichkeit zu entwickeln, mit welcher es möglich ist, Addons in Editor-Seiten (WYSIWYG) von TinyMCE zu laden. Machbar war's, wir haben zu Testzwecken dazu auch schnell eine Möglichkeit entwickelt, doch diese war längst nicht ausgereift, leider. Nun haben wir diese Möglichkeit erneut überarbeitet und liefern nun das Ergebnis, welch wieder ein sagenhafter Vorteil der neuen Version 3.9.9.6 sein wird. Wir haben einen Weg gefunden, WYSIWYG Addons in TinyMCE Seiten zu integrieren - und im Frontend somit auch zu laden. Aber Achtung, hierbei handelt es sich nicht um die wie üblich bekannten Addons, die wir beispielsweise bei Modulen mit ausliefern - oder hier zum Download anbieten.

Die neuen, nennen wir sie mal "WYSIWYG Addons" sind zwar im Prinzip dasselbe, arbeiten jedoch etwas anders. Und daher müssen sie dementsprechend auch anders in den Inhalt integriert werden. Wie das ganze funktioniert und was man tolles damit anstellen kann, sollte vor allem für Entwickler sehr interessant sein, denn es erspart einem nicht nur viel Arbeit - es macht auch jede Menge Spass mit dieser Lösung in Zukunft Seiteninhalte zu gestalten. Dieses Feature gibt wie bereits erwähnt erst ab Version 3.9.9.6.

MIt folgendem Aufruf innerhalb einer Editor-Seite kann man ein "WYSIWYG Addon" aufrufen:

Mit diesem Aufruf ruft man das gewünschte Addon auf und bindet es an genau dieser Stelle ein, wobei hier "ordner" das Verzeichnis ist, in welchem sich das gewünschte Addon befindet. Dazu findet man unter includes/wysiwyg den Speicherort, gleich wie bei includes/addons, worin man die Verzeichnisse der Addons speichern kann. Darin sollte sich, genau wie bei den normalen Addons, einfach nur eine index.inc.php befinden, die die Ausgabe regelt. Aber Achtung: Hier darf man nicht mit print, sondern mit return arbeiten, damit das Addon auch dort landet, wo es im TinyMCE plaziiert wird. Im Klartext müssten wir nun lediglich nur unsere vorhandenen Addons von print oder echo zu return umschreiben, richtig? Richtig, so könnte es funktionieren.

Aber das ist nicht alles, wir haben das ganze noch etwas weiterentwickelt, um weiteres zu ermöglichen:

So könnte man dem Addon nun auch noch eine Variable mitteilen, die von Seite zu Seite unterschiedlich ausfallen könnte. Beispielsweise wir würden mit einem Addon arbeiten, mit welchem wir bestimmte Screenshots aus einem Verzeichnis automatisch auslesen und anzeigen lassen. Da wäre es doch toll, wenn wir einen Namen des Ordners mit übergeben könnten, oder etwa nicht? Und genau das können wir hiermit tun, völlig problemlos. Ich kann also mein gewünschtes Addon auf mehreren Seiten mit unterschiedlichen Variablen verwenden, die ich im Addon selbst verwalte und dementsprechend damit arbeite.

Ein weiteres Beispiel, mehrere Variablen zu verwenden, wäre wie folgt:

Hier im Prinzip genau das selbe Prinzip, nur mit dem Unterschied dass ich mehrere Variablen an das Addon übergebe. Und hier spielt es auch keine Rolle wieviele das am Ende sind, mehrere Variablen werden einfach durch das Zeichen " | " erweitert, bis man alle zusammen hat die man braucht oder verwenden möchte. Und wie sollte es auch nicht anders sein, alles weitere wird im Addon selbst geregelt.

Ein gutes Beispiel, wie so etwas am Ende aussehen kann, findet ihr sogar auf unserer Seite. Beispielsweise hier, hier und hier. Das erspart einiges an Arbeit, um so nicht immer alle Screenshots oder Fotos manuell einpflegen zu müssen - auf all diesen Seiten wird das ein und selbe Addon für die Screenshots geladen, nur die Variable ist immer anders, um den jeweiligen Ordner zu bestimmen, aus welchem letztendlich die Screenshots ausgelesen werden sollen. Und so könnte man das nun auf viele weitere Einstellungen wie Größe des Fotos etc. erweitern, wie man das möchte.

Einen "Rohling", mit welchem ihr gerne mal experimentieren könnt, stelle ich hier zum Download bereit.
Einfach das ZIP herunterladen, entpacken und den Rohling zur richtigen Stelle kopieren, wie im ZIP angelegt.

Mit folgendem Aufruf könnt ihr das ganze dann mal im TinyMCE aufrufen:

Wenn ihr alles richtig gemacht habt und nun die Seite im Frontend aufruft, sollte "Ich bin das Addon! erscheinen.
Wichtig bei diesem Platzhalter ist nur, dass er in einem <p> Tag gespeichert wird. Er sollte also zwischen <p> und </p> stehen.
In der Regel macht man einfach einen neuen Absatz mit Enter, fügt den Aufruf ein und fertig. Der <p> Tag erstellt TinyMCE von selbst.
Falls es nicht funktioniert aber mal nachschauen, ob es korrekt ist, dann sollte man diesen manuell einfügen.

Viel Spass beim testen! Screencast und Addons folgen garantiert.

Ihr cms2day Team
Matthias Müller, Entwicklung & Support