CKEditor 4 and elFinder Integration

In this tutorial I am going to show how to integrate elFinder into CKEditor for seamless operation.
At the end we will be able to upload and manage images and other files using the elFinder interface.
I am assuming that you have already downloaded CKEditor 4 and elFinder.

In the CKEditor folder open the file config.php and add the following snippet. This is the correct path if CKEditor and elFinder are in the same folder.

In the elFinder folder go to php/connector.minimal.php and look for the following. Change the path and URL to point to the images folder. Or leave as is to use the default "files" folder located in the elFinder folder.

If you haven't renamed the file connector.minimal.php-dist to connector.minimal.php then you should do that.

In the elFinder folder open the file elfinder.html and look for the following.

And replace it with.

This is the contents of the elfinder.html file.

The final result.