Install file manager
NPM package
React
Vue
Angular
JS snippet
N1ED
TinyMCE
CKEditor 4
FAQ
Use with API
Integration sample
Integration sample (with API)
Manual toolbar sample
CKEditor 5
Froala
Drupal 10
Drupal 9
Drupal 8
Joomla 4
Joomla 3
Changelog
Server side
PHP Composer package
PHP include files
Cloud storage
Amazon S3
Azure Blob
Multiple users
API reference
Open file manager
Select image with a preview
Manage image gallery
Select multiple files
Browse a folder
Upload files
Open image editor
Custom image editing

Install file manager plugin for CKEditor 4

1

Download

In order to install the file manager plugin for CKEditor 4, download it:

Download Flmngr plugin
2

Unpack

Unpack the archive with plugin into plugins/ directory this way:

ckeditor/
  plugins/
     file-manager/
        plugin.js
3

Enable

Find the place in HTML/JavaScript code where you load TinyMCE and enable the file manager add-on in initialization parameters:

In config.js

Initialization script

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "file-manager";
    config.Flmngr = {
        apiKey: "FLMNFLMN", // Default free key
                            // Get free own API key to use wish a visual configurator:
                            // https://flmngr.com/dashboard
    };
    // Toolbar is configured automatically
}
CKEDITOR.replace("editorId", {
    extraPlugins: "file-manager",
    Flmngr: {
        apiKey: "FLMNFLMN", // Default free key
                            // Get free own API key to use wish a visual configurator:
                            // https://flmngr.com/dashboard
    },
    // Toolbar is configured automatically
});
4

Install the backend

Now you need to install PHP script somewhere on your server. Behind the link, there is a manual on how to do it and link the backend with Flmngr CKEditor plugin.

✓

Ready to use

Customize

TinyMCE file manager control panel

We recommend you to register a free own API key to configure Flmngr visually using Dashboard. Or you can configure it by passing API parameters directly. There is also a short FAQ related to CKEditor 4 plugin.

Dashboard

Samples

There is a sample of CKEditor 4 with the file manager installation and using its API:

API

If you need to use Flmngr outside of CKEditor 4 on the same page, you can get its object and call from JavaScript to ask it to pick files, upload an image, etc.

Use from API