tinyMCE custom file_browser_callback()

[Felix Riesterer]

Liebe Selfer,

kennt sich jemand unter euch mit dem tinyMCE insoweit aus, als dass er/sie mir weiterhelfen kann, wie ich einen eigenen Dateibrowser in den tinyMCE integrieren kann?

Ein passendes PHP-Skript für eine Dialog-Seite habe ich schon. Es gelingt mir nur noch nicht, die auf dieser Dialogseite ermittelten Datei-Daten in den Editor "zurückzuführen". Die Dokumentation ist da leider etwas dünne, und im Forum schreiben Leute über externe Plugins, die sie eingebaut haben (also nix selber entwickeltes).

Ich verstehe auch noch nicht, warum das vom Editor geöffnete Javascript-Dialogfenster (z.B. Bild-Einfügung) keinen eigenen Eintrag in der Windows-Taskleiste hat, während mein Dialogfenster dort extra erscheint. Wenn ich mit self.opener arbeite, dann bezieht sich der opener auf das editor-Fenster selbst, und nicht etwa auf sein geöffnetes Javascript-Dialogfenster (also hier Bild-Einfügung).

Wer kann mir weiterhelfen?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Sven Rautenberg]

Moin!

kennt sich jemand unter euch mit dem tinyMCE insoweit aus, als dass er/sie mir weiterhelfen kann, wie ich einen eigenen Dateibrowser in den tinyMCE integrieren kann?

Es mag sein, dass es einen "offiziellen" Weg gibt - ich bin den "einfachen" Weg gegangen und habe

• die aufgerufene HTML-Datei für die URL- und Bildeinfügung auf "....php" geändert und an der Stelle auch die Popup-Größe geändert
• an der passenden Stelle die *.html-Datei als Grundlage für die *.php-Datei genommen (umbenennen ändert ja erstmal nichts)
• mit PHP dann einen passenden Zusatz generiert, welcher in das Ursprungsformular mittels Javascript den auf schönere Weise (SELECT-Liste oder sonstiges Klickzeugs) ermittelten Dateiwunsch reinschreibt und abschickt.

Damit du in den Javascripten von TinyMCE arbeiten kannst, mußt du die leerzeichenkomprimierte Version mit der unkomprimierten Version überschreiben, ansonsten wird das ein ziemlicher Fummelkram. :)

• Sven Rautenberg

[Felix Riesterer]

Lieber Sven,

vielen Dank für Deine Antwort. Das mit den komprimierten .js-Dateien habe ich auch schon gemerkt. Ich lese auch immer die mit _src.js im Dateinamen.

Dein Vorschlag ist für mich nicht realisierbar, da meine User-Verwaltung völlig untypisch per-directory gehandhabt wird. Daher wird der Editor von den verschiedensten Stellen der Seite benutzt. Aber der Filemanager soll jedesmal dabei in den entsprechenden Unterverzeichnissen lesen und schreiben. Daher kann ich eigentlich nur den "offiziellen" Weg gehen.

Mittlerweile beschäftige ich mich mit einigen Funktionen wie z.B. tinyMCE.openWindow() usw. Das Prinzip, wie die einzelnen Dialog-Menüs miteinander komunizieren ist mir allerdings immer noch nicht wirklich klar... :-(

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Liebe Selfer,

mittlerweile habe ich herausgefunden, dass das Dialogfenster einen Namen hat. Ich kann es aber "von aussen" nicht ansprechen. Und das verstehe ich nicht!

Wie schon beschrieben, hat das Dialogfenster des tinyMCE (ein WYSIWYG HTML-Editor in Javascript) keinen Eintrag in meiner Taskleiste. Das muss doch was bedeuten... Ein Javascript-Alert nennt mit als "name"-Eigenschaft dieses Fensters "mcePopup". Wenn ich jetzt aus meinem File-Browser heraus dieses Fenster mit z.B. mcePopup.location ansprechen will, dann heißt es im Firefox "mcePopup has no properties". Ein typeof(mcePopup) bringt mir "undefined". Was is da los?

Was mich generell verstört, scheint die besondere Natur dieses Dialogfensters zu sein. Wie macht man denn sowas? Ich kenne nur window.open(), was ein echtes Browserfenster öffnet.

Freue mich auf frische Ideen, denn mir gehen sie so langsam aus. <:-(

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Liebe Selfer,

nachdem ich jetzt zwei ganze Tage daran gesessen habe, hier meine Lösung für's Archiv:

Man bekommt mit dem Aufruf der callback-Funktion vier Parameter übermittelt, wovon in den ersten dreien übermittelt wird, um welche Informationen nachgefragt wird. Den vierten kann man mit einer Funktion sozusagen "nachschlagen".
     fileBrowserCallBack(field_name, url, type, win);
In "field_name" steht z.B. "src" oder "href", "url" ist logischerweise noch leer, in "type" steht dann "image" oder "file" und in "win" ist eine Referenz zum aufrufenden Fenster enthalten.

Egal was man mit dieser Funktion auch anstellt, das jeweils aufrufende Dialogfenster kann wohl oder übel nur mit einer Funktion aus dem Set des Editors angesprochen werden, um ihm die ermittelten Werte zurückzugeben, da sich die Referenz zu "win" nicht in ein anderes Browserfenster retten lässt. Selbst der Versuch das Dialogfenster mittels seines Namens ("mcePopup") anzusprechen war umsonst.

In meinem Fall habe ich aus der callback-Funktion heraus ein neues Browserfenster geöffnet (window.open()), in welchem ich ein PHP-Skript aufrufe, das mir das Uploaden und Auswählen von Dateien ermöglicht. Dieses PHP-Skript bekommt dann auch einen Parameter, denn bei einem Bilderbrowser ist eine Voransicht ganz schön, bei einem Dateibrowser für mögliche Verlinkungen eher nicht...

Das große Problem war, die selektierte Datei dem ursprünglichen Dialogfenster des Editors zurückzugeben. Dazu _muss_ ein Set an Javascript-Funktionen des Editors im eigenen Browserfenster geladen sein! Es handelt sich dabei um die Datei tiny_mce_popup.js, die im Dateikopf in einem Scriptbereich nachgeladen werden _muss_! Zum Beispiel so:
     <script language="javascript" type="text/javascript" src="irgendwo/tiny_mce/tiny_mce_popup.js"></script>

Damit kann man dann die Referenz zu dem Dialogfenster ermitteln (ehemals der Parameter "win" aus dem callback-Aufruf), indem man aus diesem Set an Funktionen folgende einsetzt:
     win = tinyMCE.getWindowArg("window");
Damit kann man dann die ermittelten Informationen aus dem eigenen Dateibrowser übermitteln:
     win.document.getElementById(field_name).value = url;

Mögen meine Erkenntnisse anderen dienlich sein. Mir jedenfalls hat diese Mühsal auch Spaß gemacht, obwohl es für echten Spaß dann doch eindeutig zu lange gedauert hat ;-)
Ach ja, diese Javascript-nachlade-Datei lädt gleich noch eine CSS-Datei (ungefragt) mit. Wer die nicht will kann das href-Attribut im per Javascript in die Datei geschriebenen <link>-Tag "töten":
     document.getElementsByTagName("link")[??].removeAttribute("href");
Das richtige Tag erwischt man am ehesten, indem man als Index ("??")  den höchsten Wert einsetzt (vorher mit alert(getElementsByTagName("link").length) prüfen!).

Liebe Grüße aus Ellwangen,

Felix Riesterer.