Install file manager plugin for CKEditor 4
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
}
}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']}
];
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);
}
});
}
);