CKEditor 5 file manager 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 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:

CKEditor 5 file manager