Install file manager plugin into your custom CKEditor 5

Adding a plugin to your custom CKEditor 5 build is useful when you already have CKEditor 5 installed and wish to add the plugin. This action requires rebuilding (recompiling) CKEditor 5.

This manual assumes that you have already prepared CKEditor 5 project as described in the official instructions.


Install the plugin

First of all, go into your CKEditor 5 project and install the plugin by calling the command:

npm install --save-dev @edsdk/flmngr-ckeditor5

Please do not forget to also install the default image plugin of CKEditor 5 that is required for Flmngr:

npm install --save-dev @ckeditor/ckeditor5-image
CKEditor 5 with Flmngr file manager

Enable the plugin

Make the required changes in your JS file where you define your editor class (extend it from ClassicEditor class, for example):

1. Import the Flmngr and Image plugins:

import Flmngr from "@edsdk/flmngr-ckeditor5/src/flmngr";
import Image from '@ckeditor/ckeditor5-image/src/image';

2. Pass them among other plugins into the create() method of CKEditor 5:

    .create( document.querySelector( '#editor' ), {
        plugins: [ 
            Image, // the standard image plugin 
            Flmngr // Flmngr plugin
        Flmngr: {
            apiKey: "FLMNFLMN", // or your own API key
            // Override the values below if you don't do this in Dashboard
            //urlFileManager: "", 
            //urlFiles: "",
        toolbar: [ 
            'upload', // three
            'flmngr', // buttons
            'imgpen'  // of Flmngr
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

Install the backend

Please get your own free API key and link Flmngr plugin to your server in the visual Dashboard or set the values of flmngr.urlFileManager (URL of your PHP Flmngr handler) and flmngr.urlFiles (URL prefix of the root of files and images storage on your server) parameters in the config above.

This can be done after you install the file manager server-side script onto your server. This is required to let you manage files and images on your server.


Rebuild CKEditor 5

Rebuild your custom CKEditor 5 build with new enabled Flmngr file manager plugin.

Usually, you do this with the command run from the directory with CKEditor 5 project:

npm run build

As a result, you will have an updated build/ckeditor.js file you can use on your website. Copy it there if your build process does not automatize this yet.

If you did everything correctly, at this moment, you have CKEditor 5 with the Flmngr plugin working on your page.

Ready to use


CKEditor file manager control panel

We recommend you to register a free own API key to configure Flmngr visually using Dashboard. Or you can configure it by passing API parameters directly.



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

You can also check our own CKEditor 5 build with Flmngr included:

Hint: this build can be directly used as ready-to-use build.