Contao, tinyMCE und AjaxFileManger - HowTo

Hallo,
es ist mir endlich gelungen, einen kostenlosen brauchbaren Dateimanager für tinyMCE in Contao 2.10.0 zum Laufen zu bringen.

Hier meine Schritte:

1.
Das Paket "Ajax File and Image Manager Version 1.0 Final" von php.letter.com downloaden, zurzeit aktueller Link: http://www.phpletter.com/download_pr...?version_id=33

2.
Aus diesem Paket den Ordner ajaxfilemanager
kopieren nach plugins/tinyMCE/plugins/ajaxfilemanager.
Alles andere aus der heruntergeladenen zip-Datei wird nicht gebraucht.

3.
Die Datei
plugins/tinyMCE/plugins/ajaxfilemanager/inc/config.base.php öffnen,
darin in den Zeilen 52/53 CONFIG_SYS_DEFAULT_PATH und CONFIG_SYS_ROOT_PATH folgendermaßen setzen:

Code:

---

        define('CONFIG_SYS_DEFAULT_PATH', '../../../../tl_files/media'); //accept relative path only
        define('CONFIG_SYS_ROOT_PATH', '../../../../tl_files/media');        //accept relative path only

---

Dabei /media nach eigenen Wünschen anpassen oder auch weglassen...

4.
Die Konfigurationsdatei system/config/tinyMCE.php folgendermaßen bearbeiten:
a) In der Zeile, die mit elements: beginnt, ajaxfilemanager hinzufügen, sieht dann so aus:

Code:

---

elements : "<?php echo $this->rteFields; ?>,ajaxfilemanager",

---

b)
Hinter theme_advanced_resizing: true, folgende Zeile einfügen:

Code:

---

  file_browser_callback : "ajaxfilemanager",

---

Ob es genau diese Position innerhalb der tinyMCE.php sein muss, weiß ich nicht, aber irgendwo stand diese Empfehlung und es funktioniert so bei mir.

c)
Unten in der Datei vor </script> folgendes einfügen:

Code:

---

// start ajaxfilemanager configuration
function ajaxfilemanager(field_name, url, type, win) {
            var ajaxfilemanagerurl = "plugins/tinyMCE/plugins/ajaxfilemanager/ajaxfilemanager.php";
            switch (type) {
                case "image":
                    break;
                case "media":
                    break;
                case "flash":
                    break;
                case "file":
                    break;
                default:
                    return false;
            }
            var view='thumbnail'; //alternativ: 'detail'
            var language='de';
            tinyMCE.activeEditor.windowManager.open({
                url: ajaxfilemanagerurl + '?view=' + view + '&language=' + language,
                title: "Ajax Dateimanager",
                width: 882,
                height: 540,
                inline : "yes",
                close_previous : "no"
            },{
                window : win,
                input : field_name,
                resizable: "yes"
            });
            return false;
        }
// end ajaxfilemanager configuration

---

Wenn man als Grundeinstellung nicht thumbnail, sondern detail wünscht, kann man die Zeile mit var view = 'thumbnail' entsprechend anpassen.
Im Anhang findet sich meine tinyMCE.php mit allen Änderungen von Punkt 4.

Nachtrag zu Punkt 4:
Wer es gerne updatesicher möchte, kann AjaxFileManager auch so einbinden:
Die Datei system/config/tinyMCE.php kopieren und umbenennen in z.B. tinyCustom.php
Dann alle Änderungen des Punktes 4 in tinyCustom.php eintragen.
Zum Einbinden der tinyCustom.php folgende Zeile in system/config/dcaconfig.php eintragen:

Code:

---

$GLOBALS['TL_DCA']['tl_content']['fields']['text']['eval']['rte'] = 'tinyCustom'

---

5.
Deutsche Sprachdatei findet sich im Anhang.
Bitte kopieren in das Verzeichnis plugins/tinyMCE/plugins/ajaxfilemanager/langs

6.
Für einwandfreies Funktionieren brauchen der Ordner plugins/tinyMCE/plugins/ajaxfilemanager/session und die beiden darin enthaltenen Dateien die Dateirechte 0775.
Ich kann nicht genau prüfen, ob dies nur bei Contao-Installationen nötig ist, die im SMH-Modus laufen (s. dazu auch Punkt 7), oder generell gilt, da ich (ärgerlicherweise) den SafeMode-Hack brauche und AjaxFileManager die fehlenden Rechte monierte.

7.
(wahrscheinlich nur für Installationen mit SafeMode-Hack, eventuell auch generell)
AjaxFileManager bearbeitet Dateien nicht als ftp-user, sondern als Webserveruser. Das bedeutet u. U. Einschränkungen für AjaxFileManager bei Dateien, die dem ftp-user gehören, und umgekehrt.
Damit alle Vorgänge reibungslos funktionieren, brauchen die Dateien im tl_files/media-Ordner (zu /media s. oben bei Punkt 3) und der Ordner selbst die Dateirechte 0775.
AjaxFileManager vergibt beim Upload aber nur die Dateirechte 0755.
Um dies abzuändern, muss man in der Datei plugins/tinyMCE/plugins/ajaxfilemanager/inc/class.upload.php den Wert 0775 für var $uploadFileMode eintragen (Zeile 30):

Code:

---

        var $uploadFileMode = 0775;

---

So, nun habe ich hoffentlich nichts vergessen oder falsch angegeben.
Über Rückmeldungen, insbesondere zu den Punkten 6 und 7, würde ich mich freuen.

MfG
Ulrike

Vielen Dank für die Anleitung :)

Wenn man keinen SMH benötigt dann funktionierts auch ohne Punkt 6 und 7.

Es wäre schön, wenn Du dieses Tutorial auch im Wiki verfügbar machst.

Carolina.

Zitat:

---

Zitat von lucina

Es wäre schön, wenn Du dieses Tutorial auch im Wiki verfügbar machst.

---

Schon erledigt.

Ulrike

Zitat:

---

Zitat von Ulrike

Schon erledigt.

---

Hi

Hier noch der Link zum Wiki: http://de.contaowiki.org/TinyMCE_und_AjaxFileManager

lg mani

Wie per Twitter angemerkt, werden wohl die Berechtigungen aus der Benutzerverwaltung und auch Einstellungen für Upload-Dateitypen und Bildgrössen nicht übernommen. Ich habe die Erweiterung selber nicht getestet, aber ich könnte mir z.B. auch vorstellen dass die Dateiverwaltung automatisch auch im Frontend verfügbar ist, falls der TinyMCE dort eingesetzt wird. Insbesondere falls Uploads möglich sind ist das gefährlich.

Wenn man das wie beschrieben über die system/config/dcaconfig.php macht, sollte es nur im Backend aktiv sein.
Noch ein Grund mehr es so zu tun, und nicht direkt zu patchen.

Zitat:

---

Zitat von andreas.schempp

... werden wohl die Berechtigungen aus der Benutzerverwaltung und auch Einstellungen für Upload-Dateitypen und Bildgrößen nicht übernommen...

---

Da AjaxFileManager keine Contao-Erweiterung ist (wie alle anderen von mir getesteten Bild- und Dateimanager übrigens auch), sondern "nur" als Erweiterung für den TinyMCE-Editor entstanden ist, liegt es auf der Hand, dass Contao-Einstellungen nicht unterstützt werden.

@BugBuster
Danke für den Hinweis, dass die Einbindung via system/config/dcaconfig.php sich nur im Backend auswirkt. Das wusste ich bislang nicht. Spricht dann eindeutig dafür, die im Nachtrag zu Punkt 4 genannte Alternative zu verwenden.

MfG
Ulrike

Nun ja, machbar ist das schon... Ich hab da mal was begonnen *lach* ...mangels Zeit und Kundenauftrag aber nicht fertiggestellt. Basiert auf dem "iBrowser" Plugin.

@andreas.schempp
Machbar ist vieles, aber AjaxFileManager wurde nicht speziell für die Zusammenarbeit mit Contao entwickelt. Man kann AjaxFileManager an Contao anpassen, aber dann muss man tiefer eingreifen als im obigen Tutorial beschrieben... Hier sollte es ja nur darum gehen, wie man die Pfade richtig setzt usw. um überhaupt die Einbindung in den tinyMCE von Contao hinzubekommen.

Möchtest du noch einen Tipp zur ajax.php? Aber das gehört natürlich streng genommen nicht in diesen Thread.

MfG
Ulrike

Hallo Ulrike,

Ich gebe dir absolut Recht, wollte nur den Hinweis loswerden damit bei der Installation daran gedacht wird. Für die meisten wird das keine Rolle spielen. ;)

Zur ajax.php, mach doch einen Thread im Entwicklerforum auf?

Hallo zusammen,

super Anleitung, ich danke Dir von Herzen dafür, war ewig auf der Suche nach sowas.
Eine Frage hab ich noch: Ich kann den Uploader ja erreichen, wenn ich auf Bild einfügen klicke und dann auf das Icon hinter Adresse drücke.
Gibt es denn eine Möglichkeit, den Filemanager direkt auf der Hauptmaske des tinyMCE zu implementieren? Sprich als eigenes Icon in die Leiste einbinden?

Viele Grüße

Super Anleitung - geht das eventuell auch für Contao 2.9.5 oder nur für 2.10?


Viele Grüße
Tobias

Zitat:

---

Zitat von Kohlekocher

Super Anleitung - geht das eventuell auch für Contao 2.9.5 oder nur für 2.10?

---

Habe es gerade mal auf meinem lokalen Testserver probiert - scheint zu klappen :) Soweit so gut.

Jetzt eine andere Frage:
Wenn ich ein Bild mit dem AjaxFileManager auswähle, dann überträgt dieser immer die absolute URL zum TinyMCE - also inkl. http:// usw...

Im Zusammenhang mit Contao ist es doch ausreichend wenn er nur den Teil ab "/tl_files/.." einfügt, oder?
Wenn ich mit den Contao-Bordmitteln ein Bild aus der Bilderliste auswähle, dann passiert im Endeffekt genau das.

Beispiel:
Contao Bordmittel

Code:

---

{{image::tl_files/folder/file.jpg?mode=crop?rel=}}

---

AjaxFileManager

Code:

---

{{image::http://localhost/demo_site/tl_files/folder/file.jpg?mode=crop?rel=}}

---

Kann mir jemand sagen, wo genau man das evtl. einstellen kann bzw. an welcher Stelle das kodiert ist? Ich denke das sollte sich doch relativ leicht anpassen lassen, oder?


Viele Grüße
Tobias

Zitat:

---

Zitat von Kohlekocher

Im Zusammenhang mit Contao ist es doch ausreichend wenn er nur den Teil ab "/tl_files/.." einfügt, oder?
[...]
Kann mir jemand sagen, wo genau man das evtl. einstellen kann bzw. an welcher Stelle das kodiert ist? Ich denke das sollte sich doch relativ leicht anpassen lassen, oder?

---

Hi,
ich stand vor dem gleichen Problem, da ich unabhängig vom Domainnamen bleiben möchte und absolute URLs inklusive Host überflüssig sind. Contao selbst fügt bei der Drop-Down-Auswahl auch keinen Slash vorne an, so sind die Dateipfade relativ vom Root-Verzeichnis der Contao-Installation. Dann stimmt der Pfad auch wenn Contao in einem Unterverzeichnis der Document Root installiert ist.

Der Filemanager legt alle Metadaten inkl. der URL zu den Files in einem JavaScript-Array files ab, das mittels PHP durch Iteration über vorhandenen Dateien befüllt wird. Hier kommt wird auch der Hostname etc. voran gestellt. Ich habe mich allerdings für eine Manipulation des JavaScript-Codes entschieden, der den kompletten Bildpfad an den Editor zurückgibt, da ich nicht weiß ob der komplette Pfad intern irgendeine nötige Verwendung für den Ajax Filemanager hat.

Folglich habe ich den Code der Funkion selectFile() im Code des TinyMCE-Plugins ajaxfilemanager zu Beginn um eine Manipulation der übergebenen kompletten URL ergänzt:

Code:

---

// /plugins/tinyMCE/plugins/ajaxfilemanager/jscripts/for_tinymce.js
function selectFile(url)
{
    var getPath = function(url) {
        var a = document.createElement('a');
        a.href = url;
        return (a.pathname.substr(0,1) === '/') ? a.pathname.substr(1, a.pathname.length) : a.pathname;
    }
    url = getPath(url);
    // ...
        win.document.getElementById(tinyMCEPopup.getWindowArg("input")).value = url;
    // ...
}

---

Die Funktion selectFile() wird beim Doppelklick auf ein Element des Filemanagers ausgeführt und fügt den Pfad in das Formularfeld von TinyMCE ein über den der Filemanager geöffnet wurde.

Siehe auch auf stackoverflow.com um den Pfadnamen wie im Code oben aus dem URL auszuschneiden.

Gibt es hier eigentlich Neuigkeiten? Hat jemand das Plugin mal so umgeschrieben, dass es reibungslos mit Contao-Rechten zusammenarbeitet?

@Andreas: was hat es mit dem iBrowser-Plugin auf sich? Hört sich interessant an. Vor allem weil ich den Ajaxfilemanager optisch und von der Bedienbarkeit nicht gerade gelungen finde...

Zitat:

---

Zitat von webster

was hat es mit dem iBrowser-Plugin auf sich? Hört sich interessant an. Vor allem weil ich den Ajaxfilemanager optisch und von der Bedienbarkeit nicht gerade gelungen finde...

---

ist leider noch nicht weiter, hab den Auftrag zur Fertigstellung noch nicht bekommen.

Hello,

Firstly, thanks a lot for this plugins and the tutorial about it. However, I have a problem when I tried it on the web. In local mode with a wamp configuration (Windows 7/WAMP) all is ok. But when I try online, I can't see thumbnails and when I open subfolders, I have a blank page. My server is based on a Gentoo configuration and I also have the gd extension for php who is properly instaled.
Have you met the same problem as me? Have you got any solution? Thank you in advance for your answers. Vincent

Hello Vincent,

do you have checked the "Network" Tab in Firebug? Are there any PHP errors in the responses for the file manager? It sounds like there are problems with the write access to generate the thumbs.

Hello,

Thank you for your response.
When I look with firebug, I do have two types of errors.
The first error relates to the generation of thumbnails.
GET ajax_image_thumbnail...s/my-picture - Aborted
The second error concerns the display of the contents of a subfolder.
POST ajax_get_file_list...t/images/my-subfolder - Aborted

My image folder and every pictures who are in this folder is CHMOD 777.

What do you think about this error?

Thanks a lot.

Vincent

Up please :) I have the same problem with the official demo at http://demo.phpletter.com/ajaxfilema...ilemanager.php I can't see any thumbnails, and the contents of all subfolders are empty. :eek:

Boah, große Klasse!
Ganz vielen Dank dafür!

Na das nenne ich ein klasse Tutorial, bei man nichts vermisst. Dann will ich mal versuchen, das so bei mir zum Laufen zu bekommen. Für mich wichtig waren auch die Beiträge zur Pfadgenerierung weiter unten, weil ich den Filemanager auch im FE verwenden möchte. Das möchte ich gern so hinbekommen, dass Bilder automatisch nur aus dem jeweiligen Mitgliedsordner kommen (xtmembers-Extension). Upload muss nicht unbedingt sein, den könnte ich ja auch über Bordmittel per Formular machen und evtl. einen Button dafür im tMCE einbinden.

Ich hab den ganzen Tag nach etwas wirklich Brauchbarem gesucht. Erst der Suchbegriff "dateimanager tinymce" brachte mich schließlich noch hierher. Das einzige, was mir diesbezüglich zum Glück noch fehlt. Gestern ist mir auch ganz gut gelungen, den Editor an mein fluides Responsive Layout anzupassen, dass er halt unbegrenzt in beiden Richtungen skaliert und die Buttons augenfreundlich floaten, und auch noch etwas zu hübschen. War ein bisschen mühselig, weil das ganze Ding als Table mit dazu teils auch etwas kruder CSS-Logik aufgebaut ist, aber ging.

So, nun bin ich mal gespannt, ob das wohl klappen wird. :) Vielen Dank nochmal dafür.