Install file manager plugin into your custom CKEditor 5

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

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:

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ 
            Essentials, 
            Paragraph, 
            Bold, 
            Italic, 
            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: "https://fm.flmngr.com/fileManager", 
            //urlFiles: "https://fm.flmngr.com/files",
        },
        toolbar: [ 
            'bold', 
            'italic', 
            '|', 
            '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