CKEditor 4 File Manager
Browse all samples

CKEditor 4 File Manager in inline mode

File Manager live demo with code sample 25 of 28

Play on CodePen External link File Manager API
CKEditor 4 File Manager from Field

When to use

When you use CKEditor 4 in inline mode, you can still use the Flmngr file manager to insert images.

It fully supports the same features as the classic CKEditor 4, but in the floating in-place toolbar.

How it works

No special extra configuration is required. Just, in addition to the standard CKEditor file manager plugin configuration, use the CKEDITOR.inline(...) call instead of the CKEDITOR.replace(...) one.

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.inline("editor", {
  extraPlugins: "file-manager",
  skin: "n1theme",
  ui: {
    useAutoToolbar: false
  },
  toolbar: [
    { 
      name: 'standard', 
      items: [
        'Format', '-', 'Bold', 'Italic', '-', 'Link', 'Unlink', '-',
        'Upload', 'Flmngr', 'ImgPen', '-', 'Image', 'ImagePreview2', 'ImageGallery2',
      ]
    },
  ],
  Flmngr:  {
    apiKey: "FLMN24RR1234123412341234", // default free key
  }
});
<div class="root">
  
  <h2 class="mb-3">Flmngr: CKEditor 4 File Manager (inline mode)</h2>

  <div id="editor" contenteditable="true">

    <p>Test test 1</p>

    <p>Test test 2</p>
    
  </div>
  
</div>

<script src="https://cdn.n1ed.com/widgets.js?apiKey=DEMODFLT"></script>
body {
  background-color: #F4F4F4;
}

.root {
  max-width: 900px;
  margin: 20px auto;
}

h2 {
  font-weight: bold;
}

#editor {
  outline: 2px #CCC dotted;
  background-color: white;
  padding: 16px;
}