07. Dec 2014 05:12
Keine Kommentare

TinyMCE Plugin programmieren

Eigenes TinyMCE Plugin für YouTube Videos
Eigenes TinyMCE Plugin für YouTube Videos

Jede Website braucht einen Editor, um Inhalte zu bearbeiten. TinyMCE erfreut sich auf diesem Gebiet der größten Beliebtheit. Dieser WYSIWYG Editor bietet das direkte Bearbeiten von HTML Inhalten, angepasste Stylesheets und vieles mehr. Wenn man jedoch mit "Responsive Design" Webseiten entwickelt, die sich an Mobiltelefone, Tablets, PCs und TV-Geräte anpassen, dann wird es häufig schwierig. Auf der einen Seite möchte man gerne in TinyMCE so viele Formatierungs- und Designmöglichkeiten bieten wie möglich, aber auf der anderen Seite muss man die Integrität des Layouts sicherstellen. Gerade wenn es um die Einbindung externen Inhalte wie YouTube-Videos geht, kann man das zwar sehr komfortabel in TinyMCE machen, muss jedoch bei Änderungen durch YouTube durch alle Inhalte durch und diese anpassen. Es empfiehlt sich, eben wegen dieser Probleme, einen Blick auf TinyMCE Plugins zu werfen. 

TinyMCE Plugin mit Custom-Tags realisieren

Das Erstellen von TinyMCE Plugins ist relativ einfach und bietet Zugriff auf nahezu alle Funktionen innerhalb von TinyMCE. Komplizierte Inhalte wie Programmiersyntax oder externe Inhalte wie YouTube Videos oder Produktempfehlungen kann man prima mit Custom-Tags in TinyMCE implementieren und das eigentliche Rendering der Inhalte in die Templates verlagern. Schauen wir uns einmal an, wie ich das in der Praxis für YouTube Videos realisiert habe.

35,00 €
Jetzt bestellen »
Galileo Computing: jQuery: Das Praxisbuch

YouTube Videos mit Custom-Tags in TinyMCE einbinden

Ich habe mir ein TinyMCE Plugin entwickelt, welches in der Menüleiste von TinyMCE ein YouTube Icon anzeigt und bei Klick ein TinyMCE Fenster öffnet in welchem ich die Video-Id von YouTube eingeben kann. Anschließend wird im Code an der ausgewählten Stelle folgender HTML Code eingefügt.

In diesem Beispiel ist die Video-Id "L9ZAWy_6Has" als Beispiel verwendet. Man findet die Video-Id bei YouTube Videos direkt in der URL, sodass eine Einbindung einfach ist. Anschließend sehe ich in TinyMCE eine Leiste, welche die Video-Id mit einem YouTube Icon anzeigt. In der Artikelvorschau wird das YouTube Video dann gerendert. Schauen wir uns Schritt für Schritt genauer an, wie man das in JavaScript und wahlweise auch PHP programmiert.

Ein einfaches TinyMCE Plugin für YouTube-Einbindung erstellen

Zuerst werfen wir einen Blick auf die Einbindung  von TinyMCE und die dort angegebenen zusätzlichen Konfigurationen für meine Menü-Elemente und Plugins, die geladen werden sollen.

Den Code habe ich der Einfachheit halber etwas geschrumpft. Die Eigenschaft "extended_valid_elements" teil TinyMCE mit, dass "youtubevideo"-Tags nicht entfernt werden sollen sondern als gültig anerkannt werden. TinyMCE würde diese sonst eventuell als falsche HTML-Tags erkennen und entfernen. Das gleiche gilt auch für die Eigenschaft "custom_elements". Den exakten Unterschied zwischen den beiden Konfiguration habe ich nur marginal verstanden. Es empfiehlt sich meiner Meinung nach diese so beide zu behalten. In der Eigenschaft "plugins" befinden sich bereits Standard-Plugins von TinyMCE und wir fügen dort natürlich unser "youtubevideo"-Plugin mit ein. Genauso wie wir in "toolbar" auch ein "youtubevideo"-Button mit einfügen, um das Plugin aufzurufen.

Der JavaScript-Code des TinyMCE-Plugins

Das ist erst einmal die Basiskonfiguration und natürlich wird TinyMCE jetzt einen JavaScript Fehler erzeugen, da das entsprechende Plugin ja gar nicht existiert. Lange Rede kurzer Sinn, bevor man TinyMCE initialisiert muss man selbstverständlich auch den Code für das Plugin geladen haben, welcher wie folgt aussieht.

Der Code ist kurz und knapp, was auch der guten API von TinyMCE zu verdanken ist. Grundlegend passiert hier erstmal nichts anderes als dass über den PluginManager ein Plugin mit dem Namen "youtubevideo" hinzugefügt wird. Mit der Methode "editor.addButton" erhält TinyMCE einen neuen Menü-Button, der auch angezeigt wird sofern er initialisiert wurde. Als Parameter können noch ein Icon, der Titel sowie der Klick-Handler hinzugefügt werden. Den Klick-Handler wollen wir einmal genauer unter die Lupe nehmen.

Was man beim Klick-Ereignis auf den Menü-Button machen möchte bleibt jedem selbst überlassen. In unserem Fall möchten wir jetzt aber ein Fenster anzeigen, welches die Video-Id des YouTube Videos abfragt und dieses Fenster soll auch so aussehen wie alle TinyMCE Fenster. Mit "editor.WindowManager.open" öffnet man genau dieses Fenster, kann den Titel und Elemente bestimmen. In unserem Fall brauchen wir nur eine Textbox. Der Submit-Handler ist auch wieder ein Einzeiler, der wenn etwas als Video-Id eingegeben wurde das "youtubevideo"-Tag mit dem Befehl "editor.insertContent" einfügt. Dies tut der Editor an der Stelle an welcher der Cursor stand. Danach haben wir das YouTube Video-Tag im HTML-Code. Sehen können wir es vorerst im Editor jedoch nur als Text in Form der Video-Id.

TinyMCE Editor-Stil in CSS für Custom Tags von Plugins

Damit im Editor nicht nur einfach die Video-Id herum steht, sondern man auch eindeutig sieht, dass an dieser Stelle im Artikel ein YouTube Video gerendert werden soll, fügt man am besten im Editor CSS Stylesheet noch eine Definition für das Element ein.

Anschließend wird das Element in TinyMCE schöner gerendert als nur als einfacher Textblock. Die Editor Stylesheet-Datei hatten wir vorher in "content_css" definiert und erhalten nun bei der Bearbeitungsansicht in TinyMCE einen schönen umrandeten Block mit YouTube-Icon und der Video-Id darin. Schauen wir uns nun an, was wir machen müssen damit auch der Leser des Artikels das YouTube Video sieht und nicht nur dessen Video-Id.

YouTube-Video in TinyMCE Custom Tag rendern

Das Rendern bzw. austauschen des Custom-Tags gegen das iFrame von YouTube hat nichts mehr mit TinyMCE zu tun, ist jedoch Bestandteil des gesamten Vorgangs. Ich habe jetzt ein paar wundervolle PHP Zeilen in welchen ich zentralisiert das Rendering von YouTube Videos steuern kann.

Dieser PHP Code sucht sich per Regular Expression alle "youtubevideo"-Tags und tauscht diese gegen das YouTube iFrame aus. Kurz und knapp. Wann immer ich nun Anpassungen an den YouTube iFrames machen muss oder gerne über die YouTube API bei jedem Aufruf noch andere Operationen ausführen möchte oder Google Analytics implementiert werden soll, so muss ich nur an diese kurzen Code-Stellen und nicht mehr in jedem Artikel Anpassungen machen.

TinyMCE Plugins mit Bearbeitungsfunktion

Mit dem YouTube-Plugin haben wir ein relativ einfaches Beispiel gesehen. Es geht natürlich auch wesentlich komplizierter, wie der folgende Code zeigt. Dieser Code ist Teil des Syntax-Highlighting hier im Kammerath Network. Das Problem beim Syntax-Highlighting besteht darin, dass Code angezeigt werden soll der genauso gut auch vom Browser interpretiert werden könnte. Deshalb speichere ich den Code in meiner Datenbank "base64" enkodiert. Damit umgehe ich das Problem, dass TinyMCE dies als HTML oder interpretierbaren Code versteht.

Neben dem Öffnen eines neuen TinyMCE Fensters, welches den Code-Editor "codemirror" enthält, prüft dieses Skript auch ob in dem aktuell gewählten Knoten bereits Code enthalten ist bzw. ob dies ein "code"-Tag ist oder nicht. Bewege ich also in TinyMCE den Textcursor in einen Block mit Syntax-Highlighting, so möchte ich beim Klick des Code-Icons in der Menüleiste ja den Code bearbeiten und keinen neuen Einfügen. Der Zugriff auf den aktuellen Knoten in welchem sich der Textcursor befindet geht wie folgt.

Der restliche Code erklärt sich ein wenig von selbst und führt eben beschriebene Funktionen aus. Interessant ist hier noch zu erwähnen, dass man im Gegensatz zur "body"-Eigenschaft innerhalb von "WindowManager.open" auch eine URL angeben kann, dessen HTML Code dann in einem iFrame innerhalb des TinyMCE Fensters angezeigt wird.

Fazit zur Programmierung von TinyMCE Plugins

Sobald man anfängt in TinyMCE aufwendigeres HTML unterzubringen wie z.B. irgendwelche Produktdaten, Programmcode oder Videos sollte man sich überlegen ob man nicht vielleicht besser ein TinyMCE Plugin entwickelt und Custom-Tags nutzt. Das ist nicht nur einfacher und weniger fehleranfällig und der Bearbeitung des Inhalts sondern erleichtert auch die Portierung bzw. Konvertierung der Inhalte in andere Formate oder auf andere Stile wie z.B. für Druck, Mobilgeräte, Tablets oder TV-Geräte. TinyMCE ist zwar sehr umfangreich, man kann aber auch schnell übertreiben. Es empfiehlt sich die Funktionen und Stile auf ein wesentliches zu beschränken, Plugins für erweiterte Darstellungen einzusetzen und das Rendering außerhalb von TinyMCE mit Plugins und Custom-Tags durchzuführen.

Bücher zum Thema „JavaScript“

Die nachfolgenden Bücher behandeln das Thema "JavaScript" und werden von Amazon empfohlen. Viele dieser Bücher habe ich selbst gelesen und teilweise auch zur Recherche für diesen Artikel genutzt.
49,90 €
Jetzt bestellen »
JavaScript: Das umfassende Handbuch für Einsteiger, Fortgeschrittene und Profis. Inkl. ECMAScript 6, Node.js, Objektorientierung und funktionale Programmierung
Philip Ackermann, Rheinwerk Computing
29,00 €
Jetzt bestellen »
Professionell entwickeln mit JavaScript: Design, Patterns und Praxistipps für Enterprise-fähigen Code
Philip Ackermann, Rheinwerk Computing
44,99 €
Jetzt bestellen »
JavaScript & jQuery: Interaktive Websites entwickeln
Jon Duckett, Wiley-VCH Verlag GmbH & Co. KGaA
24,90 €
Jetzt bestellen »
JavaScript: Aller Anfang ist leicht
Marco Emrich, CreateSpace Independent Publishing Platform

Diese Artikel könnten Dich auch interessieren

Besucher, die diesen Beitrag gelesen haben, haben sich auch die unten aufgeführten Beiträge angesehen. Schau' doch einfach mal in die Artikel rein.
2 Besucher haben auch das gelesen
1 Besucher haben auch das gelesen
1 Besucher haben auch das gelesen
1 Besucher haben auch das gelesen
1 Besucher haben auch das gelesen
1 Besucher haben auch das gelesen

Kommentare zum Thema „TinyMCE Plugin programmieren“

Wenn Du möchtest, kannst Du hier Kommentare zum Thema hinterlassen und Dich mit anderen Nutzern austauschen. Damit Du kommentieren kannst, musst Du Dich nur anmelden und schon kann es losgehen.
Jetzt zum Kommentieren anmelden