category: features
{@snippet features/build-ckfinder-source}
This {@link module:ckfinder/ckfinder~CKFinder feature} allows you to easily {@link features/image-upload insert images} as well as links to files into the editor content. It is a bridge between the CKEditor 5 WYSIWYG editor and the CKFinder file manager and uploader.
Check out the {@link features/image-upload general image upload guide} to learn about other ways to upload images into CKEditor 5.
This feature can be used in the editor in two different ways:
As a server and client-side file manager integration (recommended): Images dropped and pasted directly into the editor are uploaded to the server (just like in the first option).
But there are more cool features available, for instance:
Use the demo to try the file manager integration with CKEditor 5 now.
Check out the CKFinder project website to learn more about features you can use in your project.
This demo shows the full integration with the CKFinder file manager:
{@snippet features/ckfinder}
This feature is enabled by default in all builds. The installation instructions are for developers interested in building their own, custom editor.
To add this feature to your editor, install the @ckeditor/ckeditor5-ckfinder package:
npm install --save @ckeditor/ckeditor5-ckfinder
Then add CKFinder to your plugin list and configure the feature (when necessary), for instance:
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ CKFinder, ... ],
toolbar: [ 'ckfinder', ... ]
ckfinder: {
// Feature configuration.
}
} )
.then( ... )
.catch( ... );
The feature can be configured using the {@link module:ckfinder/ckfinder~CKFinderConfig config.ckfinder} object.
The file manager configuration can be passed through the {@link module:ckfinder/ckfinder~CKFinderConfig#options config.ckfinder.options} object. Check the {@link @ckfinder ckfinder3/#!/api/CKFinder.Config file manager documentation} for the complete list of options.
By default, the editor language is automatically passed to the file manager — the file manager "inherits" the language of the editor. This behavior can be changed by setting the `ckfinder.options.language` configuration option.
This feature can upload images automatically to the server (e.g. when the image is dropped into the content) thanks to the {@link module:adapter-ckfinder/uploadadapter~CKFinderUploadAdapter CKFinder upload adapter}. All it requires is the correct {@link module:ckfinder/ckfinder~CKFinderConfig#uploadUrl config.ckfinder.uploadUrl} path.
Assuming that the CKFinder file manager is {@link @ckfinder ckfinder3-php/quickstart.html#quickstart_installation_folders installed} (available) under https://example.com/ckfinder/, use the following {@link @ckfinder ckfinder3-php/commands.html#command_quick_upload quick upload} command URL to enable the image upload:
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ CKFinder, ... ],
ckfinder: {
// Upload the images to the server using the CKFinder's QuickUpload command.
uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
}
} )
.then( ... )
.catch( ... );
Drop an image into the content — it should be uploaded automatically to the server using the CKFinder connector.
To enable the automatic image upload to the server, follow the [instructions in the previous section](#configuring-the-image-upload-only).
To display the toolbar button that opens the CKFinder file manager UI allowing users to choose files on the server, make sure 'ckfinder' is present in your {@link module:core/editor/editorconfig~EditorConfig#toolbar config.toolbar}.
Additionally, you can specify {@link @ckfinder ckfinder3/#!/api/CKFinder.Config-cfg-resourceType config.ckfinder.options.resourceTypes} to tell the file manager that only the specified resource type (in this case: the images) can be browsed when the user uses the button:
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ CKFinder, ... ],
// Enable the CKFinder button in the toolbar.
toolbar: [ 'ckfinder', ... ]
ckfinder: {
// Narrow the list of files that can be browsed.
options: {
resourceType: 'Images'
},
// ...
}
} )
.then( ... )
.catch( ... );
{@snippet features/ckfinder-options}
You can change the way the CKFinder file manager opens using the {@link module:ckfinder/ckfinder~CKFinderConfig#openerMethod config.ckfinder.openerMethod} option.
By default, the manager opens as a modal. To open it in a new "pop-up" window, set the configuration value to popup:
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ CKFinder, ... ],
toolbar: [ 'ckfinder', ... ]
ckfinder: {
// Open the file manager in the popup window.
openerMethod: 'popup'
}
} )
.then( ... )
.catch( ... );
The {@link module:ckfinder/ckfinder~CKFinder} plugin registers:
'ckfinder' UI button component,the 'ckfinder' command implemented by the {@link module:ckfinder/ckfindercommand~CKFinderCommand}.
You can open a CKFinder by executing the following code:
editor.execute( 'ckfinder' );
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-ckfinder.