CKEditor 4 file manager integration sample

Play on CodePen All samples on CodePen External link

Demo

HTML

JavaScript

CSS

<h1 class="h5 mb-3">Flmngr: CKEditor 4 file manager (simple integration)</h1>

<textarea id="editor"></textarea>

"use strict";
let editor = CKEDITOR.replace("editor", {
    extraPlugins: "file-manager",
    skin: "n1theme",
    toolbar: [
        { name: 'standard', items: ['Link', 'Unlink', '-', 'Bold', 'Italic', '-', 'FontSize', 'Format', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'TextColor', 'BGColor', '-', 'RemoveFormat'] }
    ],
    Flmngr: {
        apiKey: "FLMNFLMN", // default free key
    }
});

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

This sample demonstrates the installation of Flmngr into the CKEditor 4 editor without anything else, just by passing a file-manager plugin name into plugins and specifying the default API key. Later, you may change this API key to your own free one (which is necessary if you wish to use the visual configuration Dashboard).