CKEditor 5 and elFinder Integration
Date: 7-12-2023

In this tutorial I am going to show how to integrate elFinder into CKEditor5 for seamless operation and file management.

At the end we will be able to upload and manage images and other files using the elFinder interface.

The source for this tutorial can be found HERE

For this tutorial I am using the CKEditor 5 Classic CDN and am not downloading the editor. I have also downloaded the latest elFinder build from here elFinder.

Directory Structure:

Folder: -assets

Folder: --assets/elFinder

Folder: --assets/images

Folder: ---assets/images/.trash

Folder: ---assets/images/.tmb

File: assets/index.html

Create a folder named assets.
Open the assets folder and add the elFinder folder that you downloaded.
In the assets folder create a folder named images.
In the images folder 2 folders ( .trash and .tmb )
In the assets folder create a file index.html and copy/paste the following into it.

Copy/paste the following just below the <body> tag. Make sure that the path is correct for "elFinder connector URL"

// elFinder connector URL
const connectorUrl = 'elFinder/php/connector.minimal.php';

// To create CKEditor 5 classic editor
ClassicEditor
.create(document.querySelector('#editor') , {
toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'imageUpload', 'ckfinder', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo']
} )
.then(editor => {
const ckf = editor.commands.get('ckfinder'),
fileRepo = editor.plugins.get('FileRepository'),
ntf = editor.plugins.get('Notification'),
i18 = editor.locale.t,
// Insert images to editor window
insertImages = urls => {
const imgCmd = editor.commands.get('imageUpload');
if (!imgCmd.isEnabled) {
ntf.showWarning(i18('Could not insert image at the current position.'), {
title: i18('Inserting image failed'),
namespace: 'ckfinder'
});
return;
}
editor.execute('imageInsert', { source: urls });
},
// To get elFinder instance
getfm = open => {
return new Promise((resolve, reject) => {
// Execute when the elFinder instance is created
const done = () => {
if (open) {
// request to open folder specify
if (!Object.keys(_fm.files()).length) {
// when initial request
_fm.one('open', () => {
_fm.file(open)? resolve(_fm) : reject(_fm, 'errFolderNotFound');
});
} else {
// elFinder has already been initialized
new Promise((res, rej) => {
if (_fm.file(open)) {
res();
} else {
// To acquire target folder information
_fm.request({cmd: 'parents', target: open}).done(e =>{
_fm.file(open)? res() : rej();
}).fail(() => {
rej();
});
}
}).then(() => {
// Open folder after folder information is acquired
_fm.exec('open', open).done(() => {
resolve(_fm);
}).fail(err => {
reject(_fm, err? err : 'errFolderNotFound');
});
}).catch((err) => {
reject(_fm, err? err : 'errFolderNotFound');
});
}
} else {
// show elFinder manager only
resolve(_fm);
}
};

// Check elFinder instance
if (_fm) {
// elFinder instance has already been created
done();
} else {
// To create elFinder instance
_fm = $('<div/>').dialogelfinder({
// dialog title
title : 'File Manager',
// connector URL
url : connectorUrl,
// start folder setting
startPathHash : open? open : void(0),
// Set to do not use browser history to un-use location.hash
useBrowserHistory : false,
// Disable auto open
autoOpen : false,
// elFinder dialog width
width : '80%',
// set getfile command options
commandsOptions : {
getfile: {
oncomplete : 'close',
multiple : true
}
},
// Insert in CKEditor when choosing files
getFileCallback : (files, fm) => {
let imgs = [];
fm.getUI('cwd').trigger('unselectall');
$.each(files, function(i, f) {
if (f && f.mime.match(/^image\//i)) {
imgs.push(fm.convAbsUrl(f.url));
} else {
editor.execute('link', fm.convAbsUrl(f.url));
}
});
if (imgs.length) {
insertImages(imgs);
}
}
}).elfinder('instance');
done();
}
});
};

// elFinder instance
let _fm;

if (ckf) {
// Take over ckfinder execute()
ckf.execute = () => {
getfm().then(fm => {
fm.getUI().dialogelfinder('open');
});
};
}

// Make uploader
const uploder = function(loader) {
let upload = function(file, resolve, reject) {
getfm(uploadTargetHash).then(fm => {
let fmNode = fm.getUI();
fmNode.dialogelfinder('open');
fm.exec('upload', {files: [file], target: uploadTargetHash}, void(0), uploadTargetHash)
.done(data => {
if (data.added && data.added.length) {
fm.url(data.added[0].hash, { async: true }).done(function(url) {
resolve({
'default': fm.convAbsUrl(url)
});
fmNode.dialogelfinder('close');
}).fail(function() {
reject('errFileNotFound');
});
} else {
reject(fm.i18n(data.error? data.error : 'errUpload'));
fmNode.dialogelfinder('close');
}
})
.fail(err => {
const error = fm.parseError(err);
reject(fm.i18n(error? (error === 'userabort'? 'errAbort' : error) : 'errUploadNoFiles'));
});
}).catch((fm, err) => {
const error = fm.parseError(err);
reject(fm.i18n(error? (error === 'userabort'? 'errAbort' : error) : 'errUploadNoFiles'));
});
};

this.upload = function() {
return new Promise(function(resolve, reject) {
if (loader.file instanceof Promise || (loader.file && typeof loader.file.then === 'function')) {
loader.file.then(function(file) {
upload(file, resolve, reject);
});
} else {
upload(loader.file, resolve, reject);
}
});
};
this.abort = function() {
_fm && _fm.getUI().trigger('uploadabort');
};
};

// Set up image uploader
fileRepo.createUploadAdapter = loader => {
return new uploder(loader);
};
})
.catch(error => {
console.error( error );
});
</script>

Go to elFinder/php/connector.minimal.php and look for the following.

In this tutorial I have the 'path' and 'URL' pointing to a folder named images. If yours is the same you will not have to change anything.

Errors You May Encounter

Unable to connect to backend. (Check the URL and path)

// 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'          => '../../images/',                 // path to files (REQUIRED)
'URL'           => dirname($_SERVER['PHP_SELF']) . '/../../images/', // 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 Mimetypes not allowed to upload
'uploadAllow'   => array('all'), // 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'          => '../../images/.trash/',
'tmbURL'        => dirname($_SERVER['PHP_SELF']) . '/../../images/.trash/.tmb/',
'winHashFix'    => DIRECTORY_SEPARATOR !== '/', // to make hash same to Linux one on windows too
'uploadDeny'    => array(''),                // Recommend the same settings as the original volume that uses the trash
'uploadAllow'   => array('all'), // Same as above
'uploadOrder'   => array('deny', 'allow'),      // Same as above
'accessControl' => 'access',                    // Same as above
),
)
);

CKEditor 5 – Classic editor

Classic CKEditor 5

Click the folder icon to open elFinder. Or to add an image using base64 (not recommended in a production enviornment).

CKEditor 5 and elFinder IntegrationDate: 7-12-2023

Classic CKEditor 5

CKEditor 5 and elFinder Integration
Date: 7-12-2023