Ready-to-use CKEditor 5 build with the file manager

Download the build

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

Demo: you can fork/clone or just download it and 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 also want 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 point, CKEditor 5 should load with Flmngr, but you need to install the server-side to make it work with your server.

Install the backend

Install the file manager server-side 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 have done everything correctly and changed the default URLs of the file manager script and storage, your CKEditor 5 + Flmngr should be able to browse your server, allow uploads, and display files inserted via the file manager correctly in the editor area.

Ready to use