PHP & MySQL, Tutorials, Tools, elFinder, CKEditor

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;)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
    }
}

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.

David Carr

David Carr

For the past 12 years, I’ve been developing applications for the web using mostly PHP. I do this for a living and love what I do as every day there is something new and exciting to learn.

In my spare time, the web development community is a big part of my life. Whether managing online programming groups and blogs or attending a conference, I find keeping involved helps me stay up to date. This is also my chance to give back to the community that helped me get started, a place I am proud to be apart of.

Besides programming I love spending time with friends and family and can often be found together going out catching the latest movie, staying in playing games on the sofa or planning a trip to someplace I’ve never been before.