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.

// Documentation for connector options:
// https://github.com/Studio-42/elFinder/wiki/Connector-configuration-options
$opts = array(
// 'debug' => true,
'roots' => array(
// Items volume
array(
'driver'        => 'LocalFileSystem',           // driver for accessing file system (REQUIRED)
'path'          => '../files/',                 // path to files (REQUIRED)
'URL'           => dirname($_SERVER['PHP_SELF']) . '/../files/', // URL to files (REQUIRED)
'trashHash'     => 't1_Lw',                     // elFinder's hash of trash folder
'winHashFix'    => DIRECTORY_SEPARATOR !== '/', // to make hash same to Linux one on windows too
'uploadDeny'    => array('all'),                // All Mimetypes not allowed to upload
'uploadAllow'   => array('image/x-ms-bmp', 'image/gif', 'image/jpeg', 'image/png', 'image/x-icon', 'text/plain'), // Mimetype `image` and `text/plain` allowed to upload
'uploadOrder'   => array('deny', 'allow'),      // allowed Mimetype `image` and `text/plain` only
'accessControl' => 'access'                     // disable and hide dot starting files (OPTIONAL)
),
// Trash volume
array(
'id'            => '1',
'driver'        => 'Trash',
'path'          => '../files/.trash/',
'tmbURL'        => dirname($_SERVER['PHP_SELF']) . '/../files/.trash/.tmb/',
'winHashFix'    => DIRECTORY_SEPARATOR !== '/', // to make hash same to Linux one on windows too
'uploadDeny'    => array('all'),                // Recomend the same settings as the original volume that uses the trash
'uploadAllow'   => array('image/x-ms-bmp', 'image/gif', 'image/jpeg', 'image/png', 'image/x-icon', 'text/plain'), // Same as above
'uploadOrder'   => array('deny', 'allow'),      // Same as above
'accessControl' => 'access',                    // Same as above
),
)
);

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.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<title>Media Library</title>


<script data-main="./main.default.js" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
define('elFinderConfig', {
// elFinder options (REQUIRED)
// Documentation for client options:
// https://github.com/Studio-42/elFinder/wiki/Client-configuration-options
defaultOpts : {
url : 'php/connector.minimal.php', // or connector.maximal.php : connector URL (REQUIRED)
commandsOptions : {
edit : {
extraOptions : {
// set API key to enable Creative Cloud image editor
// see https://console.adobe.io/
creativeCloudApiKey : '',
// browsing manager URL for CKEditor, TinyMCE
// uses self location with the empty value
managerUrl : ''
}
},
quicklook : {
// to enable CAD-Files and 3D-Models preview with sharecad.org
sharecadMimes : ['image/vnd.dwg', 'image/vnd.dxf', 'model/vnd.dwf', 'application/vnd.hp-hpgl', 'application/plt', 'application/step', 'model/iges', 'application/vnd.ms-pki.stl', 'application/sat', 'image/cgm', 'application/x-msmetafile'],
// to enable preview with Google Docs Viewer
googleDocsMimes : ['application/pdf', 'image/tiff', 'application/vnd.ms-office', 'application/msword', 'application/vnd.ms-word', 'application/vnd.ms-excel', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/postscript', 'application/rtf'],
// to enable preview with Microsoft Office Online Viewer
// these MIME types override "googleDocsMimes"
officeOnlineMimes : ['application/vnd.ms-office', 'application/msword', 'application/vnd.ms-word', 'application/vnd.ms-excel', 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.oasis.opendocument.text', 'application/vnd.oasis.opendocument.spreadsheet', 'application/vnd.oasis.opendocument.presentation']
}
},
// bootCalback calls at before elFinder boot up 
bootCallback : function(fm, extraObj) {
/* any bind functions etc. */
fm.bind('init', function() {
// any your code
});
// for example set document.title dynamically.
var title = document.title;
fm.bind('open', function() {
var path = '',
cwd  = fm.cwd();
if (cwd) {
path = fm.path(cwd.hash) || null;
}
document.title = path? path + ':' + title : title;
}).bind('destroy', function() {
document.title = title;
});
}
},
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('(?:[\?&]|&)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
}
}
});
</script>
</head>
<body>

<div id="elfinder"></div>

</body>
</html>

The final result.