CKEditor Integration

CKEditor 4

To integrate CKFinder with CKEditor all you have to do is pass some additional configuration options to CKEditor:

CKEDITOR.replace( 'editor1', {
	filebrowserBrowseUrl: '/ckfinder/ckfinder.html',
	filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'
} );

It is also possible to use CKFinder.setupCKEditor() as shown below:

var editor = CKEDITOR.replace( 'ckfinder' );
CKFinder.setupCKEditor( editor );

The sample below presents the result of the integration. You can manage and select files from your server when creating links or embedding images in CKEditor 4 content. In modern browsers you may also try pasting images from clipboard directly into the editing area as well as dropping images — the files will be saved on the fly by CKFinder.

CKEditor 5

To integrate CKFinder with CKEditor 5 all you have to do is pass some additional configuration options to CKEditor:

ClassicEditor
	.create( document.querySelector( '#editor2' ), {
		ckfinder: {
			uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'
		}
	} )
	.catch( error => {
		console.error( error );
	} );

The sample below presents the result of the integration. Try pasting images from clipboard directly into the editing area as well as dropping images — the files will be saved on the fly by CKFinder.