CKEditor 4 file manager integration sample (manual toolbar)

Play on CodePen All samples on CodePen External link

Demo

HTML

JavaScript

CSS

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

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

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

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

This sample demonstrates the installation of Flmngr into the CKEditor 4 editor with a feature to add Flmngr buttons one by one instead of the default automatic buttons added by Flmngr itself.

The parameter ui.useAutoToolbar handles the type of the toolbar. If you already have your own free API key, you can do it in visually in the Dashboard).

Then, you can modify your existing toolbar definition and pass all available Flmngr buttons to it (they are also listed in the Dashboard).