CKEditor/TinyMCE: kostenloses Image Upload Plugin

Die HTML-WYSIWYG-Editoren TinyMCE und CKEditor erfreuen sich großer Beliebtheit. Die in PHP und JavaScript geschriebenen Anwendungen lassen sich leicht in eine Webseite integrieren und erzeugen relativ sauberen (validen) HTML-Code. Was beiden Anwendungen fehlt, ist ein kostenloses Image Upload Plug-in, bzw. ein Dateimanager.

Wenn man im Netz nach derartigen Erweiterungen sucht, findet man fast nur kommerzielle Lösungen (teils auch von den Autoren der Editoren selbst). Ich selbst musste mich kürzlich damit rumschlagen eine Internetseite für Nutzer zu bauen, denen die Bedienung einer FTP-Software zu kompliziert ist. Auf der Suche nach einem Plug-in zum Hochladen von Bildern und anderen Dateien bin ich schließlich auf den "MooTools Filemanager" von Christoph Pojer und Fabian Vogelsteller aufmerksam geworden, der auch mit TinyMCE und dem CKEditor laufen soll.

Wie der Name schon sagt, setzt dieses Projekt auf den MooTools auf. Ich hab es mir angeschaut und schnell festgestellt, dass es über die letzten Jahre nicht weiterentwickelt wurde und ziemlich verbuggt ist. Als ich versucht habe, einige der Fehler zu fixen, stellte ich fest, dass sich bereits jemand anderes (Simon Georget) damit auseinandergesetzt hat.

Hier gibt es eine besser funktionierende und zurzeit immer noch gepflegte Version des Filemanagers, welche nicht mehr auf MooTools, sondern auf jQuery aufsetzt.

CKEditor: Bilder und Dateien hochladen

Ich habe den Filemanager mit dem CKEditor getestet und die Einbindung ist denkbar einfach. Man entpackt das Paket einfach in den gewünschten Bereich seines Webspaces. Danach muss man noch in der Konfiguration angeben, welches Verzeichnis verwaltet werden soll (an dieser Stelle landen dann auch die hochgeladenen Bilder und Dateien). Die Konfigurationsdatei heißt "filemanager.config.js" und ist unter dem Pfad "filemanager/scripts/" zu finden. Die Zeilen

sorgen dafür, dass das Verzeichnis http://www.meinedomain.de/upload/ verwaltet wird.

Den CKEditor aktiviert man wie gewohnt in JavaScript und ergänzt dabei die Option "filebrowserBrowseUrl", die angibt, wo sich der zu verwendende Filemanager befindet.

Das durch den CKEditor zu ersetzende Textarea-Feld muss laut diesem Beispiel den Namen (HTML-Attribut: name) und/oder die ID "ckeditor" haben. Der Pfad zur Index-Seite des Filemanagers muss natürlich individuell angepasst werden.

Nachfolgend erscheint im CKEditor bei den Dialogen zum Einfügen von Bildern und Flash-Objekten oder zum Verlinken von Online-Ressourcen ein Button "Server durchsuchen", welcher den Filemanager öffnet. Dieser erlaubt dann das Hochladen, Verwalten und Auswählen neuer Dateien und Bilder. In der Galerie rechts gibt es davon ein paar Screenshots.

Geschnatter