Install CKEditor 5 build with file manager

The easiest way to install CKEditor 5 with a file manager and an image editor on board is to use ready build.

Download the build

We have compiled for you a build where Flmngr file manager is already installed as a plugin into CKEditor 5, its buttons are added onto the toolbar:

Demo: you can fork/clone or just download it check it on your computer without any installation, just click on the file sample/index.html. Please use this file as a sample of how to configure CKEditor 5.

Install CKEditor 5 on the website

So for your final integration, you will need to:

1. Copy the build/ folder to somewhere on your server, you may want also to rename it.
2. Include this line into the page where you wish to use the editor (do not forget to change the path): <script src="https://your-website.com/path/to/ckeditor.js"></script>.
3. Copy CKEditor 5 initialization code ClassicEditor.create(...) from sample/index.html to the page where you included the script.

At this moment CKEditor 5 should load with Flmngr, but you need to install the server-side to let it work with your server.

Install the backend

Install the PHP file manager script somewhere on your server, the instructions are behind the link.

Initialize CKEditor 5

Here is a sample code how to initialize CKEditor 5 and link it with your server (change urlFileManager and urlFiles parameters):

let ckeditor5;
ClassicEditor.create(
    document.querySelector('#editorId'), 
    {

        Flmngr: {
            apiKey: "FLMNFLMN",                                  // default free key
            urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
            urlFiles: 'https://fm.flmngr.com/files',             // demo file storage
        }

    } 
).then( 
    (editor) => {
        ckeditor5 = editor;                                  // or save the link where you need
    } 
).catch( 
    (error) => {
        // ...
    } 
);

If you did everything correctly and changed the default URLs of the file manager script and storage, your CKEditor 5 + Flmngr should normally browse your server, and allow uploads, and files inserted via the file manager should be displayed fine in the editor area.

Example

There is a sample of CKEditor 5 with the file manager installation and using its API:

CKEditor 5 file manager

Flmngr API

Flmngr file manager adds some buttons to the toolbar of CKEditor 5, but also you can use direct Flmngr API. This is useful when you need to call the file manager dialog (or some other functions) outside of CKEditor 5, for example when you have some file field below.

While the installation you initialized CKEditor 5 and saved a link to the instance into ckeditor5 variable:

let ckeditor5;
ClassicEditor.create( ... ).then(editor => ckeditor5 = editor );

Now you can get the API of the Flmngr instance of this CKEditor 5 instance by calling ckeditor5.getFlmngr(callback) method. Call it always when you wish to get a link to Flmngr API (or save the Flmngr object returned in the callback and call it directly each time).

ckeditor5.getFlmngr(
    (Flmngr) => {
        // Flmngr argument contains Flmngr API, 
        // for example you can open the file manager and let user pick a file:
        Flmngr.open({
            // There is no need to set 'apiKey', 'urlFileManager' or 'urlFiles' here
            // due to you already set them in the config of CKEditor.
            // Also there is not need to call Flmngr.load() API method
            // because CKEditor 5 already loaded the file manager.
            isMultiple: false,
            onFinish: (files) => {
                console.log("User picked:");
                console.log(files);
            }
        });
    }
);

Be sure that you run this code after you set the ckeditor5 variable - it is set in a callback, so you need to wait until CKEditor 5 is initialized.

There is also a sample of API usage on our website:

Open file manager