CKEditor SDK

File Upload through Dialogs and Drag&Drop Documentation

By default CKEditor does not include a file manager, but it can be easily integrated with an external tool thanks to the File Browser plugin that is available in all official CKEditor distributions.

Once properly set up through the config.filebrowserBrowseUrl and config.filebrowserUploadUrl configuration settings, all file manager features will automatically become available. This includes the Upload tab in the Link or Image Properties dialog windows as well as the Browse Server button.

Note: The examples on this page integrate CKEditor with CKFinder, but you are free to implement your own solution thanks to the editor File Browser API or choose another existing product. Additionally, file manager integration can be customized thanks to numerous editor configuration features that make it possible to, for example, setup the integration for selected dialog windows or customize the file browser window size.

Uploading Dropped and Pasted Images

The optional Upload Image plugin enables support for uploading images that were dropped or pasted into the editor.

Drag and drop file upload is not supported in Internet Explorer 9 and below. Support for pasting images and its fragments varies depending on the browser, operating system and application from which the image or its fragment was copied. This is a new feature, so it is likely to change in the future.

The sample below uses the Upload Image plugin together with enhanced images. Additional widget styles are defined to control image size and alignment.

Try pasting or dropping images into the editor below (you can drop multiple files at a time). You can also try to paste fragments of images (e.g. copied from an image editing application).

Related Features