CKEditor 4 File Manager from Field
Browse all samples

CKEditor 4 File Manager: Manual Toolbar

File Manager live demo with code sample 26 of 27

Play on CodePen External link File Manager API
Froala File Manager

When to use

The file manager plugin for CKEditor 4 automatically attaches to the editor and adds its button to the toolbar.

However, if you want to configure the CKEditor 4 toolbar in a custom way, this sample shows how to manually add Flmngr file manager buttons to the toolbar one by one.

How it works

There is a special option for disabling automatic toolbar population: set ui.useAutoToolbar to false, as shown in the code section of this live demo.

Then add the desired button to your toolbar as you normally do in CKEditor 4 using the toolbar option in the CKEditor configuration.

How to start using

Run this code after a very simple installation if CKEditor 4 WYSIWYG HTML editor is already installed in your CMS or app.

The CKEditor 4 file manager plugin installs as easily as any other CKEditor add-on.

Another way to add the file manager to your app with CKEditor 4 is to install the N1ED plugin for CKEditor, which provides file manager features as well as modern Bootstrap/Tailwind block-by-block content editing and widget support.

This gives you excellent media management inside CKEditor 4, plus the ability to call the Flmngr API outside the editor.

Demo
Code
HTML
CSS
let editor = CKEDITOR.replace("editor", {
  extraPlugins: "file-manager",
  skin: "n1theme",
  ui: {
    useAutoToolbar: false
  },
  toolbar: [
    { 
      name: 'standard', 
      items: [
        'Upload', 'Flmngr', 'ImgPen', '-', 'Image', 'ImagePreview2', 'ImageGallery2', '-', 
        'Bold', 'Italic', '-', 'Link', 'Unlink', '-',  '-', 'FontSize', 'Format', '-', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'
      ]
    },
  ],
  Flmngr:  {
    apiKey: "FLMN24RR1234123412341234", // default free key
  }
});
<h2 class="mb-3">Flmngr: CKEditor 4 File Manager (Manual Toolbar)</h2>

<textarea id="editor"></textarea>
body {
  padding: 20px;
  background-color: #F4F4F4;
}

h2 {
  font-weight: bold;
}