How to make file manager load in CKEditor 4

You will have problems with loading Flmngr and even CKEditor 4 if did not pass plugin installation correctly. The most of such issues will have some messages in the browser console (press F12 in Chrome to open it) and there will be no file manager related buttons on the toolbar.

Check CKEditor initialization code

First of all, you may have a syntax problem in the config. Please check the JS syntax in the config.js or inside the CKEDITOR.replace(..) method (this depends on a way you use to pass the configuration).

If the config is fine, but the plugin is not loaded, you need to check did you correctly enumerated plugins insideextraPlugins parameter. Note that if you have more than one plugin declared there, they should be comma separated without spaces.

In config.js

Initialization script

CKEDITOR.editorConfig = function(config) {
    config.extraPlugins = "link,image,file-manager";
}
CKEDITOR.replace("editorId", {
    extraPlugins: "link,image,file-manager",
});

After you sure you correctly specified file-manager in extraPlugins parameter, but the plugin is still not loaded and in the browser console you see some messages related to unable to load the plugin.js file, this means it is unaccessible. Check that you really have copied it into plugins/file-manager/ directory and the server allows reading it.

Enable plugin while using CKEditor CDN

If you are loading CKEditor from a CDN you need to host Flmngr plugin somewhere on your website and specify the path to Flmngr using CKEDITOR.plugins.addExternal() method. The method must be called first so that CKEditor knew from where to load the plugin.

Example:

CKEDITOR.plugins.addExternal( 'file-manager', '/myplugins/file-manager/', 'plugin.js' );

// extraPlugins needs to be set too.
CKEDITOR.replace( "editorId", {
    extraPlugins: "file-manager"
});

See also: