Integration with CKEditor

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.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 = 'includes/elFinder/elfinder.html';
};

Update the elFinder page being called by CKEditor

Edit elfinder.html to get next code

<script type="text/javascript" charset="utf-8">
    // Helper function to get parameters from the query string.
    function getUrlParam(paramName) {
        var reParam = new RegExp('(?:[\?&]|&amp;)' + paramName + '=([^&]+)', 'i') ;
        var match = window.location.search.match(reParam) ;
        
        return (match && match.length > 1) ? match[1] : '' ;
    }

    $().ready(function() {
        var funcNum = getUrlParam('CKEditorFuncNum');

        var elf = $('#elfinder').elfinder({
            url : 'php/connector.php',
            getFileCallback : function(file) {
                window.opener.CKEDITOR.tools.callFunction(funcNum, file.url);
                window.close();
            },
            resizable: false
        }).elfinder('instance');
    });
</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

Alternate getFileCallback to help populate the new image2 insert dialog with dimensions

            getFileCallback : function(file) {
                window.opener.CKEDITOR.tools.callFunction( funcNum, EXPONENT.PATH_RELATIVE+file.url.replace(EXPONENT.URL_FULL, ''), function() {
                    var dialog = this.getDialog();
                    if ( dialog.getName() == 'image2' ) {
                        dialog.getContentElement( 'info', 'height' ).setValue( file.height );  //work-around
                        dialog.getContentElement( 'info', 'width' ).setValue( file.width );  //work-around
                    }
                });
                window.close();
            },

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/