Integrate elFinder 2.1 with CKEditor 4

This tutorial will show you how to integrate elFinder with CKEditor.

Download CKEditor 4 https://ckeditor.com/cke4/builder

I've downloaded the standard edition which included the standard features but also the plugins and their dependencies.

Unzip and place in a folder

Download elFinder https://studio-42.github.io/elFinder/ unzip and rename to elfinder and place in the same folder as ckeditor

The folder structure will be:

ckeditor
elfinder
index.html

Create a new file called index.html and enter the following:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>A Simple Page with CKEditor</title>
    </head>
    <body>
        <form>
            <textarea name="editor1" class="ckeditor" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor.
            </textarea>

               <script src="ckeditor/ckeditor.js"></script>
        </form>
    </body>
</html>

The important part here is the script to include ckeditor:

<script src="ckeditor/ckeditor.js"></script>

The text area has a class of ckeditor this is a default class so the editor will automatically load on the textarea without any extra steps.

Now open elfinder and rename elfinder.html to index.php (renaming it to .php means you can add php code to secure it based on your needs)

To tell CKEditor where to find elFinder open ckeditor/config.js and add:

config.filebrowserBrowseUrl = '/elfinder/index.php';

(Note, if this does not change you may need to refresh your browser cache as this gets heavily cached)

This is a relative path to elfinder.

Next open elfinder/index.php look for this code on line 60:

managers : {
    // 'DOM Element ID': { /* elFinder options of this DOM Element */ }
    'elfinder': {}
}

Replace it with:

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;]|&amp;amp;)CKEditorFuncNum=([^&amp;]+)', 'i') ;
                var match = window.location.search.match(reParam) ;
                return (match &amp;&amp; match.length > 1) ? match[1] : '' ;
            })(), fm.convAbsUrl(file.url));
            fm.destroy();
            window.close();
        }
        , height : '100%'   // optional
        , resizable : false // optional
    }
}

This will link callbacks to CKEditor

To enable elfinder rename elfinder/php/connector.minimal.php-dist to elfinder/php/connector.minimal.php

Now everything is set up when you click on image icon a popup window will open at the end of URL will be a button called Browse Server clicking on this will open eFinder.

As an added bonus if you go to /elfinder/index.php in the browser you will see the filemanager.

A word of warning elfinder does not come with any security to this page is open to anyone, That's one reason I renamed the file from html to php so I can use sessions / cookies ect to add my own authentication. Here's a post on Securing elFinder with a login page It's quite old (written 3 years ago) but the concepts can still apply.

DC Blog

DC Blog

Integrate elFinder 2.1 with CKEditor 4