Ajaxfilemanager for Tinymce 4.x

Question

I was trying to make ajaxfilemanager v1.1 work with Tinymce 4.x. It worked fine with Tinymce 3.x, but there were some API changes which broke it. After spending some time on it I made it working again - see my answer...

Answer 1

..., so if you are interested you can make it working too. You just need to create a tinymce4 init script (mandatory) and copy tinymce config and CSS (optional).

First step - make new javascript in jscripts/

Go to ajaxfilemanager/jscripts folder and copy for_tinymce.js to for_tinymce4.js and then patch (or modify) it.

Here is the complete patch, so you can use it

--- for_tinymce.js  2010-02-05 15:14:48.000000000 +0100
+++ for_tinymce4.js 2013-10-08 11:44:44.000000000 +0200
@@ -1,5 +1,5 @@
 // Some global instances
-var tinymce = null, tinyMCEPopup, tinyMCE;
+var tinymce = null, tinyMCEPopup;

 tinyMCEPopup = {
    init : function() {
@@ -7,12 +7,11 @@

        // Find API
        tinymce = w.tinymce;
-       tinyMCE = w.tinyMCE;
        t.editor = tinymce.EditorManager.activeEditor;
-       t.params = t.editor.windowManager.params;
+       t.params = t.editor.windowManager.getParams();

-       // Setup local DOM
-       t.dom = t.editor.windowManager.createInstance('tinymce.dom.DOMUtils', document);
+       // Setup local DOM (because of IE)
+       t.dom = new tinymce.dom.DOMUtils(document);
        t.dom.loadCSS(t.editor.settings.popup_css);

        // Setup on init listeners
@@ -25,7 +24,6 @@

        t.isWindow = !t.getWindowArg('mce_inline');
        t.id = t.getWindowArg('mce_window_id');
-       t.editor.windowManager.onOpen.dispatch(t.editor.windowManager, window);
    },

    getWin : function() {

If the patch didn't work for you, you can make the changes manually by following the steps I made:

1. open for_tinymce4.js in your favourite editor (vim, nano, joe, gedit, ...)

2. on line 2 remove tinyMCE declaration (it's useless), but keep tinymce and tinyMCEPopup

   var tinymce = null, tinyMCEPopup;
   

3. remove line 10 where tinyMCE is assigned a w.tinyMCE;

   tinyMCE = w.tinyMCE;

4. replace t.params assignment on line 11 with

   t.params = t.editor.windowManager.getParams();
   

5. replace t.dom assignment on line 14 with

   t.dom = new tinymce.dom.DOMUtils(document);
   

6. remove line 27 where onOpen event is dispatched as there is no such event handler in Tinymce4

   t.editor.windowManager.onOpen.dispatch(t.editor.windowManager, window);

After that you can init ajaxfilemanager from Tinymce 4.x by changing editor parameter of query string in ajaxfilemanager URL in file_browser_callback from tinymce to tinymce4.

I have this

<script type="text/javascript>
tinymce.init({
    selector: "textarea.editor",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    file_browser_callback : ajaxfilemanager
});
function ajaxfilemanager(field_name, url, type, win) {
    var ajaxfilemanagerurl = "/lib/ajaxfilemanager/ajaxfilemanager.php?editor=tinymce4&config=tinymce4&language=cs";
    switch (type) {
        case "image":
            ajaxfilemanagerurl += "&type=img";
            break;
        case "media":
            ajaxfilemanagerurl += "&type=media";
            break;
        case "file":
            ajaxfilemanagerurl += "&type=files";
            break;
        default:
            return false;
    }
    tinymce.activeEditor.windowManager.open(
        {url : ajaxfilemanagerurl,
         title : 'Ajax File Manager',
         width : 782,
         height : 440 },
        {window : win,
         input : field_name}
    );
    return false;
}
</script>

Second step - copy config and CSS

If you want to use different config and CSS for tinymce4, you have to copy inc/config.tinymce.php to inc/config.tinymce4.config and then copy theme/default/css/tinymce.css to theme/default/css/tinymce4.css (or other theme folder if used) and modify them to fit your needs.

Then you can refer to these files by setting config parameter of query string in ajaxfilemanager URL in file_browser_callback to tinymce4. See above.

If you don't need different config and CSS, set the config parameter to tinymce.

That's all folks.