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

  1. Create a folder named assets.
  2. Open the assets folder and add the elFinder folder that you downloaded.
  3. In the assets folder create a folder named images.
  4. In the images folder 2 folders ( .trash and .tmb )
  5. 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"

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)

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).