CKEditor/TinyMCE: kostenloses Image Upload Plugin
erschienen in der Kategorie Webdesign, am 21.06.2013
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.
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.
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
"serverRoot": true,
"fileRoot": "/upload/",
"relPath": false
"fileRoot": "/upload/",
"relPath": false
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.
<script type="text/javascript">
CKEDITOR.replace('ckeditor', {
</script>
CKEDITOR.replace('ckeditor', {
language: 'de',
filebrowserBrowseUrl: 'filemanager/index.html'
});filebrowserBrowseUrl: 'filemanager/index.html'
</script>
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
15 Kommentare, selbst mitschnattern
Stephanie, am 06.03.2014 um 13:28 Uhr
Hallo,
ich finde das Plugin wirklich toll, ich bekomme den Filemanager an sich auch zum laufen, aber der Knopf im ckeditor will bei mir nicht auftauchen.
Die Einstellungen hab ich gemacht wie hier angegeben und mit dem Pfad zum filemanager habe ich jede erdenklich mögliche Kombination ausprobiert. Ich weiß nicht was ich noch machen soll. Wenn ich den Hochladenknopf einfach selbst auf sichbar schalte funktioniert es leider auch nicht, weil kein js befehl hinterlegt ist.
ich finde das Plugin wirklich toll, ich bekomme den Filemanager an sich auch zum laufen, aber der Knopf im ckeditor will bei mir nicht auftauchen.
Die Einstellungen hab ich gemacht wie hier angegeben und mit dem Pfad zum filemanager habe ich jede erdenklich mögliche Kombination ausprobiert. Ich weiß nicht was ich noch machen soll. Wenn ich den Hochladenknopf einfach selbst auf sichbar schalte funktioniert es leider auch nicht, weil kein js befehl hinterlegt ist.
Mirko, am 17.05.2014 um 01:14 Uhr
Dein Tipp mit dem Filemanager war sehr hilfreich!
Nach einer Woche Recherche endlich gefunden!
Link:
http://www.responsivefilemanager.com
Das Plugin erfüllt alle Wünsche und bleibt trotzdem auf das Wesentliche reduziert.
Standalone, TinyMCE 3.x & 4.x
Ich muss noch prüfen, wie sicher es gegen Hacker geschützt ist, nachdem mein CK-Editor gehackt wurde, aber die Funktionalität ist schon mal wunderbar!!!
Nach einer Woche Recherche endlich gefunden!
Link:
http://www.responsivefilemanager.com
Das Plugin erfüllt alle Wünsche und bleibt trotzdem auf das Wesentliche reduziert.
Standalone, TinyMCE 3.x & 4.x
Ich muss noch prüfen, wie sicher es gegen Hacker geschützt ist, nachdem mein CK-Editor gehackt wurde, aber die Funktionalität ist schon mal wunderbar!!!
Daniel, am 17.07.2014 um 23:06 Uhr
Ich habe mal eine bescheidene Frage.
Bei mir erscheint grundsätzlich folgende Meldung, wenn ich eine Datei übertragen möchte: "Bitte lade nur Dateien kleiner als mb hoch."
fileSizeLimit liegt bei 4MB, es wird auch erkannt, wenn man hierüber kommt aber slebst 10k -Dateien werden nicht übertragen.
Bei mir erscheint grundsätzlich folgende Meldung, wenn ich eine Datei übertragen möchte: "Bitte lade nur Dateien kleiner als mb hoch."
fileSizeLimit liegt bei 4MB, es wird auch erkannt, wenn man hierüber kommt aber slebst 10k -Dateien werden nicht übertragen.
Antwort: Überprüf mal ob du Schreibrechte hast. :)
Ansonsten mal die üblichen PHP-Einstellungen checken (POST_MAX_SIZE, UPLOAD_MAX_FILESIZE).
(und so bescheiden war die gar nicht)
Ansonsten mal die üblichen PHP-Einstellungen checken (POST_MAX_SIZE, UPLOAD_MAX_FILESIZE).
(und so bescheiden war die gar nicht)
Rainer, am 03.12.2014 um 15:11 Uhr
Wenn die Zip-Datei entpackt wurde
findet man unter "scripts" eine Datei mit dem Namen "filemanager.config.js.default".
Diese läßt sich nicht öffnen!
findet man unter "scripts" eine Datei mit dem Namen "filemanager.config.js.default".
Diese läßt sich nicht öffnen!
Antwort: Hallo Rainer,
keine Ahnung warum sich die Datei bei dir nicht öffnen lässt (vielleicht weiß dein System nicht womit es *.default-Dateien öffnen soll), aber hier kannst du den Inhalt einsehen.
keine Ahnung warum sich die Datei bei dir nicht öffnen lässt (vielleicht weiß dein System nicht womit es *.default-Dateien öffnen soll), aber hier kannst du den Inhalt einsehen.
Rainer, am 04.12.2014 um 11:22 Uhr
Hi,
erst einmal vielen, vielen Dank für den Link. Habe
mir eine eigene Datei erstellt und das Script
1:1 übernommen. Dann dort wie folgt geändert:
"fileRoot": "/upload/",
In meiner Editor-Seite folgendes Script
eingefügt:
script type="text/javascript"
CKEDITOR.replace('ckeditor', {
language: 'de',
filebrowserBrowseUrl: 'Filemanager-master/index.html'
});
/script
(natürlich mit den Klammern/Textarea sowohl name="ckeditor" als auch id="ckeditor").
Dann habe ich einen Ordner "upload" angelegt und dort Bilder eingefügt
(Format jpg, also gültig lt. config)
Er öffnet mir auch bei einem Klick
auf auf den Editor-Button das "Bildeinfügen" Formular und mit einem Klick auf "Server durchsuchen" öffnet
er auch die index.html. Es werden jedoch
keine Bilder angezeigt (den Ordner "upload" habe ich schon an den verschiedensten Orten plaziert. In dem
Script "index.html" läuft nur der sich drehender Kreisel (so als ob er den Ordner "upload" nicht findet). Auch eine neue
Installation hat keine Änderung herbeigeführt.
Vielleicht eine Idee hierzu?
Nochmals vielen Dank.
Gruß aus dem kalten Niedersachsen
erst einmal vielen, vielen Dank für den Link. Habe
mir eine eigene Datei erstellt und das Script
1:1 übernommen. Dann dort wie folgt geändert:
"fileRoot": "/upload/",
In meiner Editor-Seite folgendes Script
eingefügt:
script type="text/javascript"
CKEDITOR.replace('ckeditor', {
language: 'de',
filebrowserBrowseUrl: 'Filemanager-master/index.html'
});
/script
(natürlich mit den Klammern/Textarea sowohl name="ckeditor" als auch id="ckeditor").
Dann habe ich einen Ordner "upload" angelegt und dort Bilder eingefügt
(Format jpg, also gültig lt. config)
Er öffnet mir auch bei einem Klick
auf auf den Editor-Button das "Bildeinfügen" Formular und mit einem Klick auf "Server durchsuchen" öffnet
er auch die index.html. Es werden jedoch
keine Bilder angezeigt (den Ordner "upload" habe ich schon an den verschiedensten Orten plaziert. In dem
Script "index.html" läuft nur der sich drehender Kreisel (so als ob er den Ordner "upload" nicht findet). Auch eine neue
Installation hat keine Änderung herbeigeführt.
Vielleicht eine Idee hierzu?
Nochmals vielen Dank.
Gruß aus dem kalten Niedersachsen
Antwort: Ich denke da stimmt irgendwas mit den Pfaden nicht. Ich hab gerade mal bei dem Projekt nachgeschaut, bei dem ich das Ding damals eingebaut habe.
Da sieht das so aus:
...
"serverRoot": false,
"fileRoot": "/var/www/.../example.com/upload/",
"relPath": "/upload/",
...
Die Uploads wären dann erreichbar unter example.com/upload/
Soweit ich mich erinnere, hab ich damals auch eine ganze Weile rumprobiert, bis das funktioniert hat. Die Lösung war dann die absolute Pfadangabe vom Wurzelverzeichnis aus.
Da sieht das so aus:
...
"serverRoot": false,
"fileRoot": "/var/www/.../example.com/upload/",
"relPath": "/upload/",
...
Die Uploads wären dann erreichbar unter example.com/upload/
Soweit ich mich erinnere, hab ich damals auch eine ganze Weile rumprobiert, bis das funktioniert hat. Die Lösung war dann die absolute Pfadangabe vom Wurzelverzeichnis aus.
Rainer, am 05.12.2014 um 14:01 Uhr
Hallo,
vielen vielen Dank das Du dich nochmals gemeldet hast. Ich gehe fest davon aus, dass ich alle Möglichkeiten bzgl. Pfade versucht habe - ohne Erfolg. Vielleicht hängt es damit zusammen, dass ich alles aktuell noch lokal auf xampp am laufen habe. Aber egal, habe mich für das Plugin (kostenlos)
"RoxyFileman" entschieden, funktioniert
problemlos.
Nochmals Danke und eine schönes Wochenende.
Gruß
Rainer
vielen vielen Dank das Du dich nochmals gemeldet hast. Ich gehe fest davon aus, dass ich alle Möglichkeiten bzgl. Pfade versucht habe - ohne Erfolg. Vielleicht hängt es damit zusammen, dass ich alles aktuell noch lokal auf xampp am laufen habe. Aber egal, habe mich für das Plugin (kostenlos)
"RoxyFileman" entschieden, funktioniert
problemlos.
Nochmals Danke und eine schönes Wochenende.
Gruß
Rainer
André, am 12.10.2015 um 23:47 Uhr
Das hat mit den Hintern gerettet. DANKE!
Es gelten die Regelungen der Datenschutzerklärung.