Integration with CKEditor 4 - Studio-42/elFinder GitHub Wiki

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': {}
}

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('(?:[\?&]|&amp;)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
    }
}