CKEditor 4 File Manager: Manual Toolbar
Browse all samples

Froala File Manager

File Manager live demo with code sample 27 of 27

Play on CodePen External link File Manager API

When to use

Froala Editor is excellent for many tasks, even though it doesn't have the same popularity as open-source editors like CKEditor or TinyMCE.

However, it also lacks advanced media management features. The Flmngr file manager plugin for Froala addresses this gap, providing full file and image handling capabilities.

How it works

Refer to the HTML section of this code sample to see how the Froala file manager plugin is integrated. Copy these two script tags to your page where Froala Editor is used.

Next, include the file manager configuration directly within the Froala editor configuration under the Flmngr section, as shown in the code sample below.

How to start using

Call Flmngr from Froala using this code, in addition to the seamless integration the Flmngr plugin provides inside the editor.

Installing the Froala file manager plugin will add all file manager features inside the editor and also allow external usage through the Flmngr API.

Demo
Code
HTML
CSS
new FroalaEditor('#editor', {
  Flmngr: {
    apiKey: 'FLMN24RR1234123412341234',
    urlFileManager: 'https://fm.flmngr.com/fileManager',
    urlFiles: 'https://fm.flmngr.com/files'
  }
});
<!-- Froala files -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/image.min.js"></script>

<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/file.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/image.min.css" rel="stylesheet" type="text/css" />

<!-- Flmngr files -->
<script type="text/javascript" src="https://cloud.n1ed.com/v/latest/froala/froala-file-manager.js"></script>
<script type="text/javascript" src="https://cloud.n1ed.com/v/latest/froala/froala-image-editor.js"></script>

<h2 class="mb-3">Flmngr: Froala File Manager</h2>

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

h2 {
  font-weight: bold;
}

.show-placeholder > div > a,
.fr-wrapper > div > a { display: none !important; }