CKEditor 5 file manager integration sample

Play on CodePen All samples on CodePen External link

Demo

HTML

JavaScript

CSS

<h1 class="h5 mb-3">Flmngr: CKEditor 5 file manager</h1>

<textarea id="editor" style="height:300px"></textarea>

"use strict";
ClassicEditor.create(document.querySelector("#editor"), {
    Flmngr: {
        apiKey: "FLMNFLMN",
        urlFileManager: "https://fm.flmngr.com/fileManager",
        urlFiles: "https://fm.flmngr.com/files" // demo file storage
    }
}).then((editor) => {
}).catch((error) => {
    console.log(error);
});

body {
  padding: 20px;
  background-color: #F4F4F4;
}

.ck-editor .ck-editor__main .ck-content {
  min-height: 250px;
}

This sample demonstrates the installation of Flmngr into the CKEditor 5 editor without anything else. Later, you may change the default API key to your own free one (which is necessary if you wish to use the visual configuration Dashboard).