Integration with CKEditor 4

Note: CKEditor 5 Integration is here.

Create a copy of the default html page

Copy elfinder.html to elfinder-cke.html.
This way the changes that you will make to this file (as described below) will not be overwritten when you upgrade elFinder in the future.

Configure CKEditor to use the elFinder file manager

You must tell CKEditor where the file manager is.

Method 1 - during init

CKEDITOR.replace( 'editor1', {
    filebrowserBrowseUrl : 'path/to/editor/file', // eg. 'includes/elFinder/elfinder-cke.html'
    uiColor : '#9AB8F3'
});

Method 2 - by editing the config.js file

CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.filebrowserBrowseUrl = 'path/to/editor/file'; // eg. 'includes/elFinder/elfinder-cke.html'
};

Update the elFinder page being called by CKEditor

Edit elfinder-cke.html to set elfinder node option for the CKEditor.

managers : {
    // 'DOM Element ID': { /* elFinder options of this DOM Element */ }
    'elfinder': {}
}

to

managers : {
    // 'DOM Element ID': { /* elFinder options of this DOM Element */ }
    'elfinder': {
        getFileCallback : function(file, fm) {
            window.opener.CKEDITOR.tools.callFunction((function() {
                var reParam = new RegExp('(?:[\?&]|&)CKEditorFuncNum=([^&]+)', 'i') ;
                var match = window.location.search.match(reParam) ;
                return (match && match.length > 1) ? match[1] : '' ;
            })(), fm.convAbsUrl(file.url));
            fm.destroy();
            window.close();
        }
        , height : '100%'   // optional
        , resizable : false // optional
    }
}

Code Variations

Type of data returned by elFinder is determined by it's options

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

see https://github.com/Studio-42/elFinder/wiki/Client-configuration-options#commandsoptions

commandsOptions.getfile.onlyURL = false is file.url

commandsOptions.getfile.onlyURL = true is file

Discussion

http://elfinder.org/forum/#/20110728/integration-with-ckeditor-759177/

Other HOWTOs

http://forrst.com/posts/Elfinder_2_0_beta_filemanager_for_the_web_Ex-PPS
http://elfinder.org/forum/#/20120619/ckeditor-3-1700374/