Open filemanager in modal window

[philouphil]

Using ckeditor 4.2, is there any way to do that ?

Thx a lot !!

[simogeo]

Hi,

I never tried but I guess it is possible by modifying the default CKEditor behavior. See the following thread (implementation sample with elFinder) : http://stackoverflow.com/questions/16466706/ckeditor-and-elfinder-in-modal-dialog

If you do so, please share your code here, I'll created a Howto wiki page based on it.
Thanks

[simogeo]

any feedback?

[romland]

I am not original poster, but saw the request for feedback.

The way Filemanager gets opened by CKEditor is a bit of an eyesore indeed. I (like original poster) wanted it to open in an iframe instead of a popup. This feels a whole lot better.

As always with these things, no guarantees (testing has been minimal) :), but this is working for me with latest version of both CKEditor (4.3) and Filemanager as of ~20apr2014.

After initializing CKEditor you want:

    CKEDITOR.on('dialogDefinition', function (event)
    {
        var editor = event.editor;
        var dialogDefinition = event.data.definition;
        var dialogName = event.data.name;

        var cleanUpFuncRef = CKEDITOR.tools.addFunction(function ()
        {
            // Do the clean-up of filemanager here (called when an image was selected or cancel was clicked)
            $('#filemanager_iframe').remove();
            $("body").css("overflow-y", "scroll");
        });

        var tabCount = dialogDefinition.contents.length;
        for (var i = 0; i < tabCount; i++) {
            var browseButton = dialogDefinition.contents[i].get('browse');

            if (browseButton !== null) {
                browseButton.hidden = false;
                browseButton.onClick = function (dialog, i)
                {
                    editor._.filebrowserSe = this;
                    var iframe = $("<iframe id='filemanager_iframe'/>").attr({
                        src: '/js/cke4.3/filemanager/index.html' + // Change it to wherever  Filemanager is stored.
                            '?CKEditorFuncNum=' + CKEDITOR.instances[event.editor.name]._.filebrowserFn +
                            '&CKEditorCleanUpFuncNum=' + cleanUpFuncRef +
                            '&langCode=en' +
                            '&CKEditor=' + event.editor.name
                    }).css({
                        border: 0,
                        height: "100%",
                        width: "100%",
                        zIndex: 10011, // Because CKEditor image dialog was at 10010
                        top: 0,
                        left: 0,
                        position: "fixed"
                    });

                    $("body").append(iframe);
                    $("body").css("overflow-y", "hidden");  // Get rid of possible scrollbars in containing document
                }
            }
        }
    }); // dialogDefinition

Due to not being able to exit Filemanager by simply closing the window I added a Cancel button that calls the clean-up method defined above. Even if you apply the changes below to filemanager.js you can revert to normal behaviour by not running the initialization code above.

--- filemanager.js  Fri Apr 11 00:19:02 2014
+++ filemanager-patched.js  Wed Apr 23 01:08:08 2014
@@ -557,7 +557,7 @@ var selectItem = function(data) {
        var url = relPath + data['Path'];
    }

-   if(window.opener || window.tinyMCEPopup || $.urlParam('field_name')){
+   if(window.opener || window.tinyMCEPopup || $.urlParam('CKEditorCleanUpFuncNum') || $.urlParam('CKEditor')){
        if(window.tinyMCEPopup){
            // use TinyMCE > 3.0 integration method
             var win = tinyMCEPopup.getWindowArg("window");
@@ -588,7 +588,14 @@ var selectItem = function(data) {

        else if($.urlParam('CKEditor')){
            // use CKEditor 3.0 integration method
-           window.opener.CKEDITOR.tools.callFunction($.urlParam('CKEditorFuncNum'), url);
+           if (window.opener) {
+               // Popup
+               window.opener.CKEDITOR.tools.callFunction($.urlParam('CKEditorFuncNum'), url);
+           } else {
+               // Modal (in iframe)
+               parent.CKEDITOR.tools.callFunction($.urlParam('CKEditorFuncNum'), url);
+               parent.CKEDITOR.tools.callFunction($.urlParam('CKEditorCleanUpFuncNum'));
+           }
        } else {
            // use FCKEditor 2.0 integration method
            if(data['Properties']['Width'] != ''){
@@ -601,7 +608,9 @@ var selectItem = function(data) {
            }       
        }

-       window.close();
+       if (window.opener) {
+           window.close();
+       }
    } else {
        $.prompt(lg.fck_select_integration);
    }
@@ -1183,7 +1192,7 @@ var getFileInfo = function(file) {
    var template = '<div id="preview"><img /><h1></h1><dl></dl></div>';
    template += '<form id="toolbar">';
    template += '<button id="parentfolder">' + lg.parentfolder + '</button>';
-   if($.inArray('select', capabilities)  != -1 && (window.opener || window.tinyMCEPopup || $.urlParam('field_name'))) template += '<button id="select" name="select" type="button" value="Select">' + lg.select + '</button>';
+   if($.inArray('select', capabilities)  != -1 && ($.urlParam('CKEditor') || window.opener || window.tinyMCEPopup || $.urlParam('field_name'))) template += '<button id="select" name="select" type="button" value="Select">' + lg.select + '</button>';
    if($.inArray('download', capabilities)  != -1) template += '<button id="download" name="download" type="button" value="Download">' + lg.download + '</button>';
    if($.inArray('rename', capabilities)  != -1 && config.options.browseOnly != true) template += '<button id="rename" name="rename" type="button" value="Rename">' + lg.rename + '</button>';
    if($.inArray('move', capabilities)  != -1 && config.options.browseOnly != true) template += '<button id="move" name="move" type="button" value="Move">' + lg.move + '</button>';
@@ -1495,6 +1504,9 @@ $(function(){
        $('#itemOptions a[href$="#move"]').append(lg.move);
        $('#itemOptions a[href$="#replace"]').append(lg.replace);
        $('#itemOptions a[href$="#delete"]').append(lg.del);
+       if($.urlParam('CKEditorCleanUpFuncNum')) {
+           $("#uploader").append('<button id="cancel-all" type="button">' + lg.cancel + '</button>');
+       }
    }

    /** Input file Replacement */
@@ -1525,6 +1537,13 @@ $(function(){
        getFolderInfo(fileRoot);
    });

+   if ($.urlParam('CKEditorCleanUpFuncNum')) {
+       $('#cancel-all').click(function ()
+       {
+           parent.CKEDITOR.tools.callFunction($.urlParam('CKEditorCleanUpFuncNum'));
+       });
+   }
+
    // Set buttons to switch between grid and list views.
    $('#grid').click(function() {
        setViewButtonsFor('grid');

Finally, add the following style to filemanager.css

#cancel-all span {
    background-image: url(../images/reset.png);
}

This post was thrown together rather quickly as ... well ... you know how it is ... more things to do :-)

[simogeo]

Thanks for your post!

It is great. I just wonder if all these changes in Filemanager are necessary.

Indeed, just providing the field_name param in URL as described in the Colorbox integration wiki page should do the trick!

This would imply getting this value (input type=text) dynamically and closing the iframe when selecting the file. I will think about it.

Any idea is welcome

[romland]

It's probably not necessary at all. This was the path of least resistance for me at the time when I dug into it :-)

Oh, and the reason for Cancel was to not lock the user into doing something they did not intend to do (say, they clicked Browse Server by accident).

[simogeo]

It's probably not necessary at all. This was the path of least resistance for me at the time when I dug into it :-)

At the same time I think the way you did it is very flexible and reliable.

Oh, and the reason for Cancel was really to not lock the user into having to do something they did not intend to do (say, the clicked Browse Server by accident) -- they need to be able to get out of there, so to speak. :)

It is of course, necessary but I don't think the button itself should be located here. I'll let you know of changes.

Anyway, many thanks for sharing!

[simogeo]

@romland
Based on your proposal, I made few changes and update the FM : 4fb1847

I also wrote a wiki page regarding modal mode : https://github.com/simogeo/Filemanager/wiki/How-to-open-the-Filemanager-from-CKEditor-in-a-modal-window-%3F