Integration with CKEditor

Configure CKEditor to use the elFinder file manager

You must tell CKEditor you 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

Replace next code in elfinder.html

<!-- elFinder initialization (REQUIRED) -->
<script type="text/javascript" charset="utf-8">
    $().ready(function() {
        var elf = $('#elfinder').elfinder({
            url : 'php/connector.php'  // connector URL (REQUIRED)
            // lang: 'ru',             // language (OPTIONAL)
        }).elfinder('instance');
    });
</script>

with this

<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);
                window.close();
            },
            resizable: false
        }).elfinder('instance');
    });
</script>

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