CKFinder 3 Samples

# CKEditor Integration

## 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( '#editor1' ), {
    		ckfinder: {
    			uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
    		},
    		toolbar: [ 'ckfinder', 'imageUpload', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo' ]
    	} )
    	.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.

You can use the
toolbar button to open a CKFinder window. Then you can mange your files or choose an asset that should be added to the edited content.

For detailed information about the integration between CKEditor 5 and CKFinder, please refer to CKFinder integration article in the CKEditor 5 documentation.

## CKEditor 4

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

    CKEDITOR.replace( 'editor2', {
    	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.