category: features-image-upload menu-title: CKFinder file manager
{@snippet features/build-ckfinder-source}
This feature allows you to insert images as well as links to files into the rich-text editor content. It is a bridge between the CKEditor 5 WYSIWYG editor and the CKFinder file manager and uploader.
Check out the comprehensive {@link features/image-upload Image upload overview} to learn about other ways to upload images into CKEditor 5.
This feature can be used in the rich-text editor in two different ways:
As a server and client-side file manager integration (demo). 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:
Check out the CKFinder file manager website to learn more about the features you can use in your project.
This feature is enabled by default in all builds.
This demo shows the integration where the file manager's server connector handles the image upload only:
{@snippet features/ckfinder-upload-only}
This demo shows the full integration with the CKFinder file uploader:
{@snippet features/ckfinder}
The feature is configurable by using the {@link module:ckfinder/ckfinder~CKFinderConfig config.ckfinder} object.
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 PHP server-side connector is installed (available) under https://example.com/ckfinder/, use the following quick upload command URL to enable the image upload:
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ CKFinder, ... ],
// Enable the "Insert image" button in the toolbar.
toolbar: [ 'imageUpload', ... ],
ckfinder: {
// Upload the images to the server using the CKFinder QuickUpload command.
uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
}
} )
.then( ... )
.catch( ... );
See the demo of the image upload only.
To use both the image upload functionality and the file manager user interface in your application, you must first load the CKFinder JavaScript library and then enable CKFinder integration in your rich-text editor instance.
The easiest way to load the CKFinder library is to include the <script> tag loading the ckfinder.js file first:
<script src="https://ckeditor.com/apps/ckfinder/3.5.0/ckfinder.js"></script>
Then:
config.ckfinder.uploadUrl} path.'ckfinder' is present in your {@link module:core/editor/editorconfig~EditorConfig#toolbar config.toolbar}.config.ckfinder.options} to define CKFinder's options. For example:
options.resourceType to tell CKFinder the specified resource type can be browsed when the user clicks the button.options.language to set the UI language of CKFinder. By default it will be set to the UI language of the editor.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: {
// Upload the images to the server using the CKFinder QuickUpload command.
uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json',
// Define the CKFinder configuration (if necessary).
options: {
resourceType: 'Images'
}
}
} )
.then( ... )
.catch( ... );
See the demo of the full integration.
You can change the way CKFinder opens using the {@link module:ckfinder/ckfinder~CKFinderConfig#openerMethod config.ckfinder.openerMethod} option.
By default, the file 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 pop-up window.
openerMethod: 'popup'
}
} )
.then( ... )
.catch( ... );
The allowed file types that can be uploaded should actually be configured in two places:
Use the {@link module:image/imageupload~ImageUploadConfig#types image.upload.types} configuration option to define the allowed image MIME types that can be uploaded to CKEditor 5.
By default, users are allowed to upload jpeg, png, gif, bmp, webp and tiff files, but you can customize this behavior to accept, for example, SVG files.
Use the allowedExtensions configuration option to define the file extension allowed to be uploaded with CKFinder for a particular resource type. Refer to the relevant server-side connector documentation to learn more.
This feature is enabled by default in all builds. The installation instructions are for developers interested in building their own, custom WYSIWYG editor.
To add this feature to your editor, install the @ckeditor/ckeditor5-ckfinder package:
npm install --save @ckeditor/ckeditor5-ckfinder
Then add {@link module:ckfinder/ckfinder~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', 'imageUpload' ... ], // Depending on your preference.
ckfinder: {
// Feature configuration.
}
} )
.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 CKFinder by executing the following code:
editor.execute( 'ckfinder' );
Additionally, in the "image upload only" integration, you can use the following button and command registered by the {@link module:image/imageupload~ImageUpload} plugin:
'imageUpload' UI button component.'imageUpload' command implemented by the {@link module:image/imageupload/imageuploadcommand~ImageUploadCommand}.
We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
Check out the comprehensive {@link features/image-upload Image upload overview} to learn more about different ways of uploading images in CKEditor 5.
See the {@link features/image Image feature} guide to find out more about handling images in CKEditor 5.
The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-ckfinder.