php

integrating elFinder file manager with CKEditor


url: https://github.com/Studio-42/elFinder/wiki/Integration-with-CKEditor
 

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);
                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
http://elfinder.org/forum/#/20120619/ckeditor-3-1700374/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s