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.

JavaScript

If you have followed the "old" JavaScript integration (V1) instructions, please read CKEditor Integration (V1) instruction instead.


CKFinder comes with built-in API to easily integrate it with CKEditor.

CKFinder.setupCKEditor

The setupCKEditor method accepts four arguments:

CKFinder.setupCKEditor( editorObj, config[, imageType, flashType] )
  • editorObj – the CKEditor instance. If editorObj is null, CKFinder will integrate with all CKEditor instances.
  • config – an object with specific configuration options. Alternatively, it might be just the basePath to the CKFinder installation.
important note
At the moment the only supported configuration options in the config object are: basePath, width and height, all other settings will not be used.
  • imageType – the name of the resource type that should be used when CKFinder is launched from the Image Properties dialog window.
  • flashType – the name of the resource type that should be used when CKFinder is launched from the Flash Properties dialog window.

Example 1

The following sample code shows how to integrate CKFinder with the editor1 instance and use the /ckfinder/ base path.

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

Example 2

It is also possible to pass an object with specific properties as the second argument:

var editor = CKEDITOR.replace( 'editor1' );
CKFinder.setupCKEditor( editor, { basePath : '/ckfinder/', rememberLastFolder : false } ) ;

Example 3

This example shows passing null as the first argument to integrate CKFinder with all CKEditor instances:

CKFinder.setupCKEditor( null, '/ckfinder/' );
var editor = CKEDITOR.replace( 'editor1' );

Check the _samples folder for more examples.

Manual Integration

In order to configure CKEditor manually to use CKFinder, you will need to 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/php/connector.php?command=QuickUpload&type=Files',
	filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
	filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});

Remember to change the /ckfinder/ path in the above URLs, if you have installed CKFinder in a different location.

Changing the Size of the CKFinder Window

To change CKFinder the window width and height, use the filebrowserWindowWidth and filebrowserWindowHeight configuration settings, respectively:

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

It is possible to change the size of the CKFinder window inside a specific dialog window by adding its name to the configuration setting. For example, to change just the size of Image Properties dialog window, set the following property: filebrowserImageWindowWidth.

Specifying Destination Folder for Quick Uploads

The QuickUpload command is used when uploading files directly in the Upload tab (1) in CKEditor.

CKEditor Image Dialog.png


When configuring the filebrowserUploadUrl settings, it is possible to point CKFinder to a subfolder for a given resource type and upload files directly to this subfolder.

In order to do this, add the currentFolder attribute to the query string:

CKEDITOR.replace( 'editor1',
{
	filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
	filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images',
	filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash',
	filebrowserUploadUrl : 
 	   '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&currentFolder=/archive/',
	filebrowserImageUploadUrl : 
	   '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&currentFolder=/cars/',
	filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
important note
The folder specified must already exist on the server (see archive and cars in the example above).

PHP

CKFinder comes with built-in API to easily integrate it with CKEditor. Check the _samples folder for more detailed examples.

important note
PHP integration method is only available for CKEditor 3.x. For CKEditor 4 use the JavaScript integration method instead.

SetupCKEditor Function

The static SetupCKEditor() function accepts four arguments:

SetupCKEditor( $editorObj [, $basePath, $imageType, $flashType] )
  • editorObj – the CKEditor class instance.
  • basePath – the path where CKFinder is installed (optional, default value: /ckfinder/).
  • imageType – the name of the resource type that should be used when CKFinder is launched from the Image Properties dialog window (optional).
  • flashType – the name of the resource type that should be used when CKFinder is launched from the Flash Properties dialog window (optional).

Example 1

<?php
// Make sure you are using correct paths here.
include_once 'ckeditor/ckeditor.php';
include_once 'ckfinder/ckfinder.php';
 
$ckeditor = new CKEditor();
$ckeditor->basePath = '/ckeditor/';
CKFinder::SetupCKEditor($ckeditor, '/ckfinder/');
$ckeditor->editor('CKEditor1');

SetupCKEditorObject Method

The SetupCKEditorObject() method accepts three arguments:

SetupCKEditorObject( $editorObj [, $imageType, $flashType] )
  • editorObj – the CKEditor class instance.
  • imageType – the name of the resource type that should be used when CKFinder is launched from the Image Properties dialog window (optional).
  • flashType – the name of the resource type that should be used when CKFinder is launched from the Flash Properties dialog window (optional).

Example 2

<?php
// Make sure you are using correct paths here.
include_once 'ckeditor/ckeditor.php';
include_once 'ckfinder/ckfinder.php';
 
$ckeditor = new CKEditor();
$ckeditor->basePath = '/ckeditor/';
$ckfinder = new CKFinder();
$ckfinder->BasePath = '/ckfinder/'; // Note: the BasePath property in the CKFinder class starts with a capital letter.
$ckfinder->SetupCKEditorObject($ckeditor);
$ckeditor->editor('CKEditor1');

Manual Integration

In order to configure CKEditor manually to use CKFinder, you will need to pass some additional file browser configuration settings to the config property of the CKEditor instance.

Example 3

<?php
// Make sure you are using a correct path here.
include_once 'ckeditor/ckeditor.php';
 
$ckeditor = new CKEditor();
$ckeditor->basePath = '/ckeditor/';
$ckeditor->config['filebrowserBrowseUrl'] = '/ckfinder/ckfinder.html';
$ckeditor->config['filebrowserImageBrowseUrl'] = '/ckfinder/ckfinder.html?type=Images';
$ckeditor->config['filebrowserFlashBrowseUrl'] = '/ckfinder/ckfinder.html?type=Flash';
$ckeditor->config['filebrowserUploadUrl'] = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';
$ckeditor->config['filebrowserImageUploadUrl'] = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';
$ckeditor->config['filebrowserFlashUploadUrl'] = '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';
$ckeditor->editor('CKEditor1');