Souborový správce elFinder pro TinyMCE 4

Jelikož poslední TinyMCE vyšel nedávno a není k němu zatím dokumentace, jediné dohledatelné řešení je implementace elFinderu.

1. Ve složce tinymce/plugins vytvořit složku eldinder,
2. do ní nahrát obsah staženého archivu elFinderu,
3. přidat plugin elfinder do inicialisace TinyMCE mezi ostatní pluginy: tinymce.init({plugins: ["elfinder"]}),
4. přejmenovat soubor tinymce/plugins/elfinder/js/elfinder.min.js na plugin.min.js,
5. přímo do adresáře pluginu umístit nový soubor plugin.min.js s obsahem:

tinymce.PluginManager.add("elfinder", function (editor, url) { 

editor.settings.file_browser_callback = function (id, value, type, win) {
  $('<div />').dialogelfinder({
     url: url + '/php/connector.php',
     commandsOptions: {
        getfile: {
           oncomplete: 'destroy'
        }
     },
     getFileCallback: function (url)
     {
        console.log(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"]);

Nakonec už stačí jen připojit na stránce, kde se připojuje skript TinyMCE, potřebné skripty a styly pro elFinder.

To jsou jednak externí knihovny jQuery a jQuery UI (JS + CSS):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css">

A potom skripty a styly elFinderu:

<script type="text/javascript" src="{$basePath}/tinymce/plugins/elfinder/js/plugin.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="{$basePath}/tinymce/plugins/elfinder/css/elfinder.min.css"> 
<link rel="stylesheet" type="text/css" media="screen" href="{$basePath}/tinymce/plugins/elfinder/css/theme.css">