Install CKEditor 5 build with file manager
The easiest way to install CKEditor 5 with a file manager and an image editor on board is to use ready build.
Download the build
We have compiled for you a build where Flmngr file manager is already installed as a plugin into CKEditor 5, its buttons are added onto the toolbar:
Demo: you can fork/clone or just download it check it on your computer without any installation, just click on the file sample/index.html
. Please use this file as a sample of how to configure CKEditor 5.
Install CKEditor 5 on the website
So for your final integration, you will need to:
- Copy the
build/
folder to somewhere on your server, you may want also to rename it. - Include this line into the page where you wish to use the editor (do not forget to change the path):
<script src="https://your-website.com/path/to/ckeditor.js"></script>
. - Copy CKEditor 5 initialization code
ClassicEditor.create(...)
fromsample/index.html
to the page where you included the script.
At this moment CKEditor 5 should load with Flmngr, but you need to install the server-side to let it work with your server.
Install the backend
Install the PHP file manager script somewhere on your server, the instructions are behind the link.
Initialize CKEditor 5
Here is a sample code how to initialize CKEditor 5 and link it with your server (change urlFileManager
and urlFiles
parameters):
let ckeditor5;
ClassicEditor.create(
document.querySelector('#editorId'),
{
Flmngr: {
apiKey: "FLMNFLMN", // default free key
urlFileManager: 'https://fm.flmngr.com/fileManager', // demo server
urlFiles: 'https://fm.flmngr.com/files', // demo file storage
}
}
).then(
(editor) => {
ckeditor5 = editor; // or save the link where you need
}
).catch(
(error) => {
// ...
}
);
If you did everything correctly and changed the default URLs of the file manager script and storage, your CKEditor 5 + Flmngr should normally browse your server, and allow uploads, and files inserted via the file manager should be displayed fine in the editor area.
Example
There is a sample of CKEditor 5 with the file manager installation and using its API:
Flmngr API
Flmngr file manager adds some buttons to the toolbar of CKEditor 5, but also you can use direct Flmngr API. This is useful when you need to call the file manager dialog (or some other functions) outside of CKEditor 5, for example when you have some file field below.
While the installation you initialized CKEditor 5 and saved a link to the instance into ckeditor5
variable:
let ckeditor5;
ClassicEditor.create( ... ).then(editor => ckeditor5 = editor );
Now you can get the API of the Flmngr instance of this CKEditor 5 instance by calling ckeditor5.getFlmngr(callback)
method. Call it always when you wish to get a link to Flmngr 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.
ckeditor5.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 5 already loaded the file manager.
isMultiple: false,
onFinish: (files) => {
console.log("User picked:");
console.log(files);
}
});
}
);
Be sure that you run this code after you set the ckeditor5
variable - it is set in a callback, so you need to wait until CKEditor 5 is initialized.
There is also a sample of API usage on our website: