Integration with CKEditor

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

Copy main.default.js to main.cke.js And replace opts = {...}, with the code below. Or download main.cke.js.

opts = {
    getFileCallback : function(file) {
        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] : '' ;
        })(), file.url);
        elf.destroy();
        window.close();
    },
    url : 'php/connector.minimal.php', // connector URL (REQUIRED)
    lang: lang                         // auto detected language (optional)
},

Edit elfinder-cke.html and change main.default.js to main.cke.js

<script data-main="./main.cke.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>

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/