Install file manager
CKEditor 4
More features
FAQ
Use with API
Integration sample
Manual toolbar sample
Integration sample (with API)
Install on server
Debug manual
Changelog
Cloud storage
Amazon S3
Azure Blob
Multiple users
Stock images
API reference
Samples
Open file manager
Select image with a preview
Manage image gallery
Select multiple files
Browse a folder
Upload files
Upload images with rename hook
Open image editor
Custom image editing

Install file manager plugin for CKEditor 4

Note: the latest free version of CKEditor is 4.22 due to the end-of-life they announced.

Starting from CKEditor 4.23, it is available under commercial terms, and is no longer available for free.

Flmngr works with any version, but CKEditor 4.22 can work without a CKEditor license key (for free).

Download CKEditor 4.22 (latest free)   -  Free, stable, safe. The Flmngr plugin and sample are included.
1
CKEditor 4 with Flmngr file manager

Download

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

Download Flmngr 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
    };
    // 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
    },
    // 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