Install File Manager
CKEditor 4
More features
FAQ
Use API
Samples (4)
Install on Server
Cloud Storage
Changelog
Debug Manual
Multi-user Apps
Parent/child API keys
Stock Images
API reference
Samples (30)

Install file manager plugin for CKEditor 4

The CKEditor 4 file manager plugin lets you:

  • Insert images
  • Insert small interactive previews
  • Insert image galleries
  • Reference files in links or buttons
  • Edit images
  • Support your current storage
CKEditor 4 with Flmngr file manager
1

Download

Get the file manager plugin for your CKEditor 4:

Download plugin
2

Unpack

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

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

Enable

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

In config.js

Initialization script

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "file-manager";
    config.Flmngr = {
        apiKey: "FLMN24RR1234123412341234", // Default free key
                            // Get free own API key to use with a visual configurator:
                            // https://flmngr.com/dashboard
    };
    config.versionCheck = false; // skip its upgrade notice of CKEditor itself
    // Toolbar is configured automatically
}
CKEDITOR.replace("editorId", {
    extraPlugins: "file-manager",
    Flmngr: {
        apiKey: "FLMN24RR1234123412341234", // Default free key
                            // Get free own API key to use with a visual configurator:
                            // https://flmngr.com/dashboard
    },
    versionCheck: false, // skip its upgrade notice of CKEditor itself
    // Toolbar is configured automatically
});
4

Install the backend

Now you need to install the file manager server-side script somewhere on your server. There is a manual behind the link on how to do it and link the backend with the Flmngr CKEditor plugin.

✓

Ready to use

Customize

CKEditor 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

Here are the samples 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 it from JavaScript to ask it to pick files, upload an image, etc.

Use from API