Install file manager plugin for CKEditor 4

1

Download

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

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