Install file manager plugin for CKEditor 4

File manager for CKEditor

Download and copy the plugin

When you already have CKEditor 4 installed, you can just install the Flmngr add-on for CKEditor.

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

… unpack it into plugins/ directory:

ckeditor/
  plugins/
     file-manager/
        plugin.js

and enable it in config.js or using passing parameters directly on programmatic initialization.

Configure CKEditor

There are two ways to pass parameters into CKEditor (use one of them) by editing config.js or using initialization script.

In config.js

Initialization script

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "file-manager";
    config.toolbar = [['Upload', 'Flmngr', 'ImgPen']];
    config.Flmngr = {
        apiKey: "FLMNFLMN",                                  // default free key
        urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
        urlFiles: 'https://fm.flmngr.com/files',             // demo file storage
    }
}
CKEDITOR.replace("editorId", {
    extraPlugins: "file-manager",
    toolbar: [['Upload', 'Flmngr', 'ImgPen']],
    Flmngr: {
        apiKey: "FLMNFLMN",                                  // default free key
        urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
        urlFiles: 'https://fm.flmngr.com/files',             // demo file storage
    },
});

Add extraPlugins option if you do not have one. If this option already exists in your config you pass to CKEditor, just append file-manager to existing configuration like plugins: "somePlugin,file-manager"

Manual toolbar configuration

By default Flmngr in CKEditor 4 automatically adds its toolbar line to your existing configuration, so there is no need to define toolbar parameter.

So you can do nothing or, if you wish to replace this behavior and manually configure the toolbar button by button, please add such parameters to there:

In config.js

Initialization script

config.ui = {
    useAutoToolbar: false
};
config.toolbar = [
    { name: 'standard', items: ['Bold', 'Italic', '-', 'FontSize', 'Format', '-', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock', '-', 'TextColor','BGColor', '-', 'RemoveFormat']},
    '/',
    { name: 'flmngr', items: ['Upload', 'Flmngr', 'ImgPen', '-', 'Image', 'ImagePreview2', 'ImageGallery2']}
];
ui: {
    useAutoToolbar: false
},
toolbar: [
    { name: 'standard', items: ['Bold', 'Italic', '-', 'FontSize', 'Format', '-', 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock', '-', 'TextColor','BGColor', '-', 'RemoveFormat']},
    '/',
    { name: 'flmngr', items: ['Upload', 'Flmngr', 'ImgPen', '-', 'Image', 'ImagePreview2', 'ImageGallery2']}
],

Install the backend

Now you need to install the Flmngr file manager backend somewhere on your server. Behind the link, there is a manual on how to do it and link with Flmngr CKEditor 4 add-on.

Example

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

Using API

File manager CKEditor 4 add-on adds some buttons to the toolbar, and you can use it right after installed and configured. But sometimes you need to implement a custom logic (as another CKEditor plugin or in a script outside of CKEditor but on the same page).

Flmngr API is available to you when you use CKEditor 4 plugin. This means you do not need to manually embed some other scripts. For example, if you have some file field below the WYSIWYG editor.

Call the method getFlmngr of the CKEditor instance always if you wish to get a link to API (or save the Flmngr object returned in the callback and call it directly each time).

Note: the new API is passed in the callback only (at the first argument). The return value of the method and the second argument of the callback (omit if do you not need it) contain a link to legacy API. Such a link to the old API exists for backward compatibility only.

CKEDITOR.instances["editorId"].getFlmngr(
    (Flmngr) => {
        // Flmngr argument contains Flmngr API, 
        // for example you can open the file manager and let user pick a file:
        Flmngr.open({
            // There is no need to set 'apiKey', 'urlFileManager' or 'urlFiles' here
            // due to you already set them in the config of CKEditor.
            // Also there is not need to call Flmngr.load() API method
            // because CKEditor 4 already loaded the file manager.
            isMultiple: false, // let selecting a single file
            onFinish: (files) => {
                console.log("User picked:");
                console.log(files);
            }
        });
    }
);
We experience problems with Zendesk, our ticket system, mail sent there won't be delivered. Please write us directly to support@flmngr.com until the problem is resolved.