Template:CKFinder CKEditor Integration

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

CKFinder 1.4 comes with built it APIs to easily integrate it with CKEditor (CKFinder.SetupCKEditor() method). Check the "_samples" folder for specific examples of it.

To instead configure CKEditor manually to use CKFinder, pass some additional CKFinder configuration settings to the CKEditor instance:

Enabling CKFinder

CKEDITOR.replace( 'editor1',
		{
			filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
			filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
			filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
			filebrowserUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Files',
			filebrowserImageUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Images',
			filebrowserFlashUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Flash'
		} 
);

Just change "/ckfinder/" in the above URLs if you have CKFinder installed in a different place.

Changing size of CKFinder window

To change CKFinder window width/height use filebrowserWindowWidth / filebrowserWindowHeight settings:

CKEDITOR.replace( 'editor1',
		{
			filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
			filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?Type=Images',
			filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?Type=Flash',
			filebrowserUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Files',
			filebrowserImageUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Images',
			filebrowserFlashUploadUrl : '/ckfinder/core/connector/{{{ext}}}/connector.{{{ext}}}?command=QuickUpload&type=Flash',
			filebrowserWindowWidth : '1000',
			filebrowserWindowHeight : '700'
		} 
);


It is possible to change the size of CKFinder window inside of specific dialog by adding it's name to the configuration setting, for example to change just the size of Image dialog, set the following property: filebrowserImageWindowWidth.