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.

Introduction

Before reading this section, please read the installation and configuration instructions and make sure that the examples located in the "_samples" directory are working correctly.

The "_samples" directory with examples contains two directories: "js" and "php".

  • The "js" folder stores examples of launching CKFinder using the JavaScript code.
  • The "php" folder stores examples of launching CKFinder using the PHP language.

The following files are used when either javascript or PHP method of launching CKFinder is used:

  • ckfinder.js in case of JavaScript integration method
  • ckfinder.php in case of PHP integration method

Examples

The example of creating CKFinder using a javascript object:

<script type="text/javascript">
var finder = new CKFinder() ;
finder.BasePath = '/ckfinder/' ;
finder.StartupFolderExpanded = true ;
finder.Width = 800 ;
finder.Create() ;
</script>

The example of creating CKFinder using a PHP class:

<?php
$finder = new CKFinder() ;
$finder->BasePath = '/ckfinder/' ;
$finder->SelectFunction = 'ShowFileInfo' ;
$finder->Width = 800 ;
$finder->Create() ;
?>

For a full working examples please refer to the "_samples" directory. Note that in both cases it is required to include the integration class (ckfinder.js or ckfinder.php).

Properties

To use CKFinder, both integration methods can be used. Regardless of chosen method, the following properties are available in the CKFinder object in both cases:

  • BasePath - The URL path for the installation folder of CKFinder. Default value: "/ckfinder/".
  • Width - The CKFinder width (for example: 600, '80%'). Default value: "100%".
  • Height - The CKFinder height (for example: 500, '100%'). Default value: 400.
  • SelectFunction - An optional function to be called when the user selects a file in CKFinder.
  • SelectFunctionData - An optional argument of type string that will be passed to the "SelectFunction".
  • SelectThumbnailFunction - An optional function to be called when the user selects a thumbnail in CKFinder. Default value: SelectFunction (if set).
  • SelectThumbnailFunctionData - An optional argument of type string that will be passed to the "SelectThumbnailFunction". Default values are:
    • SelectFunctionData - when SelectThumbnailFunction is set to null
    • null - when SelectThumbnailFunction is defined.
  • DisableThumbnailSelection - If set to true, "Select thumbnail" item will not appear in the context menu. Default value: false.
  • StartupPath - Resource Type and the name of the startup folder, separated with a colon (for example: "Files:/", "Images:/cars/"). If defined, CKFinder will open the selected folder automatically.
  • StartupFolderExpanded - Used only when StartupPath is set. If set to true, the initial folder will be opened automatically on startup.
  • RememberLastFolder - If set to true, CKFinder will remember the last used folder in a cookie. In some cases, it may be required to store the name of last used folder in a separate cookies for different CKFinder instances, in such case, assign the "Id property" (explained below). Default value: true.
  • Id - Used to identify the CKFinder object, optional. If set, the Id variable will be passed to the server connector on each request. When RememberLastFolder is enabled and the "Id" is set, CKFinder will remember the last directory in a separate cookie.
  • ClassName - The name of the CSS class rule assigned to the CKFinder frame. Default value: "CKFinderFrame".

To use CKFinder, both integration methods can be used, however the javascript integration method is more powerful