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

1 Answer 1

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')
                    }
                })
            }
        }
    }
});