CKFinder Logo

CKEditor Integration

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 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.