TinyMCE 4 mit elFinder

Question

Wurde bereits versucht, elFinder in die neue (4b1) Version von TinyMCE zu integrieren? Es sieht aus wie previousimplementation funktioniert nicht. Bitte posten Sie einige Schnipsel, vielen Dank.

Answer 1

Ok. Ich fand die Lösung:

1. Erstellen Sie Ordner in Plugins namens Elfinder.
2. Laden Sie neueste elFinder und in diesen Ordner plugins/elfinder.
3. Fügen Sie das Plugin 'Elfinder' zur Liste der Plugins (tinymce.init) hinzu.
4. Rename js/elfinder.min.js zu js/plugin.min.js
5. Datei plugin.min.js in Stammordner Plugin erstellen (elfinder/plugin.min.js)
6. Insert nächsten Text innerhalb und sparen:

tinymce.PluginManager.add ("elfinder", Funktion (Editor, url) {

editor.settings.file_browser_callback = function (id, Wert, Typ, win) {

$('<div />').dialogelfinder({ 
    url: url + '/php/connector.php', 
    commandsOptions: { 
     getfile: { 
      oncomplete: 'destroy' 
     } 
    }, 
    getFileCallback: function (url) 
    { 
     var fieldElm = win.document.getElementById(id); 
     fieldElm.value = editor.convertURL(url, null, true); 
     if ("fireEvent"in fieldElm) { 
      fieldElm.fireEvent("onchange") 
     } else { 
      var evt = document.createEvent("HTMLEvents"); 
      evt.initEvent("change", false, true); 
      fieldElm.dispatchEvent(evt) 
     } 
    } 
    }); 

}; }, ["elfinder/js"]);

Answer 2

ich das Wiki aktualisiert, sollte jetzt funktionieren, wenn im Anschluss an die Schritte: https://github.com/Studio-42/elFinder/wiki/Integration-with-TinyMCE-4.x

Primäre Änderungen sind, dass TinyMCE nicht die InlinePopup nicht verwendet Plugin nicht mehr, wird der Rückruf geändert und statt file_browser_callback : 'elFinderBrowser' Sie müssen entfernen Sie die Anführungszeichen:

im TinyMCE init: file_browser_callback : elFinderBrowser

Fügen Sie den elFinderBrowser Rückruf an Ihre javascript:

function elFinderBrowser (field_name, url, type, win) { 
    tinymce.activeEditor.windowManager.open({ 
    file: '/elfinder/elfinder.html',// use an absolute path! 
    title: 'elFinder 2.0', 
    width: 900, 
    height: 450, 
    resizable: 'yes' 
    }, { 
    setUrl: function (url) { 
     win.document.getElementById(field_name).value = url; 
    } 
    }); 
    return false; 
} 

Und schließlich ändern/kopieren elfinder.html Datei den Rückruf zu verwenden:

<!-- Include jQuery, jQuery UI, elFinder (REQUIRED) --> 

<script type="text/javascript"> 
    var FileBrowserDialogue = { 
    init: function() { 
     // Here goes your code for setting your custom things onLoad. 
    }, 
    mySubmit: function (URL) { 
     // pass selected file path to TinyMCE 
     top.tinymce.activeEditor.windowManager.getParams().setUrl(URL); 

     // close popup window 
     top.tinymce.activeEditor.windowManager.close(); 
    } 
    } 

    $().ready(function() { 
    var elf = $('#elfinder').elfinder({ 
     // set your elFinder options here 
     url: 'php/connector.php', // connector URL 
     getFileCallback: function(file) { // editor callback 
     FileBrowserDialogue.mySubmit(file.url); // pass selected file path to TinyMCE 
     } 
    }).elfinder('instance');  
    }); 
</script>