I need to integrate elFinder to CKEditor. I followed this:

It is working but opening pop-up window for image selection is not very nice so I want to open elFinder in modal dialog.

For "modal integration" i followed this thread: /

The last post there partially works. It really opens elfinder in modal. BUT: When I want to insert image URL to URL field in CKFinder I have to know its exact ID. Is also does not fill image resolution and brings some other problems. The best solution would be to run function called in "ordinary popup" integration, which handles everything:

window.opener.CKEDITOR.tools.callFunction(funcNum, file);

But in "popup integration", funcNum callback is registered, in modal integration it is not so I'm unable call it. Do you have any tip to run elfinder (or any other image manager - it would be the same) in modal window? I'm desperate.

I need to integrate elFinder to CKEditor. I followed this:

https://github./Studio-42/elFinder/wiki/Integration-with-CKEditor

It is working but opening pop-up window for image selection is not very nice so I want to open elFinder in modal dialog.

For "modal integration" i followed this thread: http://bxuulgygd9.tal.ki/20110728/integration-with-ckeditor-759177/

The last post there partially works. It really opens elfinder in modal. BUT: When I want to insert image URL to URL field in CKFinder I have to know its exact ID. Is also does not fill image resolution and brings some other problems. The best solution would be to run function called in "ordinary popup" integration, which handles everything:

window.opener.CKEDITOR.tools.callFunction(funcNum, file);

But in "popup integration", funcNum callback is registered, in modal integration it is not so I'm unable call it. Do you have any tip to run elfinder (or any other image manager - it would be the same) in modal window? I'm desperate.

• javascript
• ckeditor
• modal-dialog
• elfinder

Share Improve this question Follow asked May 9, 2013 at 16:36 Martin StrouhalMartin Strouhal 1,22411 gold badge1313 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

I have solved it myself. This code is bination of several tutorials and allows to fully integrate elFinder in modal window. Maybe somebody will consider it useful.

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

    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;
                jQuery('<div \>').dialog({modal: true, width: "80%", title: "Insert image", zIndex: 99999,
                    create: function(event, ui) {
                        jQuery(this).elfinder({
                            resizable: false,
                            url: "/path/to/connector.php",
                            getFileCallback: function(url) {
                                CKEDITOR.tools.callFunction(editor._.filebrowserFn, url);
                                jQuery('a.ui-dialog-titlebar-close[role="button"]').click()
                            }
                        }).elfinder('instance')
                    }
                })
            }
        }
    }
});