Install file manager plugin into your custom CKEditor 5

Adding a plugin to your custom CKEditor 5 build is useful when you already have some CKEditor 5 installed and wish just to add the plugin. This action requires rebuilding (recompiling) 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 @flmngr/flmngr-ckeditor5

Enable the plugin

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

Import the package:

import Flmngr from "@edsdk/flmngr-ckeditor5/src/flmngr";

and add it to the plugins list enabled in CKEditor 5:

Editor.builtinPlugins = [
    Alignment,
    Autoformat,
    BlockQuote,
    // Here many other default CKEditor plugins go
    // ...
    // ...
    Flmngr
];

Configure CKEditor 5

And finally, add the buttons of Flmngr file manager onto a toolbar and a context menu, and link to your PHP backend you need to install too:

Editor.defaultConfig = {

    // This is a config of Flmngr, see below a section of this manual describing this 
    Flmngr: {
        urlFileManager: "https://your-website/path/to/flmngr.php",
        urlFiles: "https://your-website/dir/of/images",
    },

    toolbar: {
        items: [
            'bold',
            'italic',
            // some other buttons go here
            // ...
            // ...
            '|',
            'upload', // <--
            'flmngr', // <--
            'imgpen', // <--
        ]
    },

    image: {
        toolbar: [
            'imageTextAlternative',
            'imageStyle:inline',
            'imageStyle:block',
            'imageStyle:side',
            'linkImage',
            '|',
            'upload', // <--
            'flmngr', // <--
            'imgpen'  // <--
        ],
    }

    // your config may contain other options here
}; 

Install the backend

Please change 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 PHP Flmngr package onto your server. This is required to let you manage files and images on your own 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 the 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.

Example

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

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&nnbsp;5, for example when you have some file field below.

While CKEditor 5 initialization you need to save a link to the created editor instance into some variable, i.e. ckeditor5:

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

Note: the new API is passed in the callback only (at the first argument). The return value of the method and the second argument of the callback (omit if do you not need it) contain a link to legacy API. Such a link to the old API exists for backward compatibility only.

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 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: