When to use

CKEditor 4 is a widely used WYSIWYG editor, commonly included as the default editor in many CMS platforms.

A frequent enhancement is adding advanced file management features. This allows you to insert images from your server storage, upload new images, and manage image previews or galleries.

The Flmngr file manager plugin for CKEditor 4 delivers all these functionalities, ensuring smooth and efficient file handling directly within the editor.

How it works

CKEditor 4 is a widely used WYSIWYG editor, commonly included as the default editor in many CMS platforms.

A frequent enhancement is adding advanced file management features. This allows you to insert images from your server storage, upload new images, and manage image previews or galleries.

The Flmngr file manager plugin for CKEditor 4 delivers all these functionalities, ensuring smooth and efficient file handling directly within the editor.

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",
  Flmngr:  {
    apiKey: "FLMN24RR1234123412341234", // default free key
  }
});
<h2 class="mb-3">Flmngr: CKEditor 4 File Manager</h2>

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

h2 {
  font-weight: bold;
}