JavaScript 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 Integration

The JavaScript integration method is the most powerful one. There are several ways to integrate CKFinder into your pages. This article describes the most common way to achieve this.

Step 1: Loading CKFinder

CKFinder is a JavaScript application. To load it, you just need to include a single file reference at your page. Supposing that you have [[CKFinder_2.x/Developers_Guide/{{{language}}}/Installation|installed]] CKFinder in the ckfinder directory at the root of your website, you can use the following example: 

<head>
	...
	<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
</head>

When the file above is loaded, the CKFinder JavaScript API is ready to be used.

Step 2: Creating an Application Instance

In order to have CKFinder up and running, you now need to create an application instance: 

<script type="text/javascript">
var finder = new CKFinder();
finder.basePath = '/ckfinder/';
finder.create();
</script>

This code needs to be placed anywhere inside the <body> element of the page. Refer to the standalone sample distributed with CKFinder (_samples/standalone.html) for a working example.

To open CKFinder in a popup, use the popup() method instead: 

<script type="text/javascript">
var finder = new CKFinder();
finder.basePath = '/ckfinder/';
finder.popup();
</script>

Refer to the popup sample distributed with CKFinder (_samples/popup.html) for a working example.

Configuration Options

As explained in the [[CKFinder_2.x/Developers_Guide/{{{language}}}/Configuration#JavaScript_Configuration|JavaScript Configuration]] section, it is possible to configure CKFinder using the config.js. Because the create() method accepts the configuration object as the first argument, you can also pass the configuration options inline instead of modifying the config.js file (thus making it possible to configure each instance of CKFinder separately): 

<script type="text/javascript">
var finder = new CKFinder();
finder.basePath = '/ckfinder/';
// Setting custom width and user language.
finder.create({ width : 700, language : 'de' });
</script>

CKFinder is smart enough to recognize the configuration options assigned directly to a CKFinder instance, so the following code does exactly the same as the code above: 

<script type="text/javascript">
var finder = new CKFinder();
finder.basePath = '/ckfinder/';
// Setting custom width and user language.
finder.width = 700;
finder.language = 'de';
finder.create();
</script>

Useful Resources

For more information regarding JavaScript integration refer to the following resources:

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". Please refer to the js/popups.html file for a usage example.
  • SelectThumbnailFunction - An optional function to be called when the user selects a thumbnail in CKFinder. Default value: "SelectFunction" (if "SelectFunction" is set).
  • SelectThumbnailFunctionData - An optional argument of type string that will be passed to the "SelectThumbnailFunction".
  • DisableThumbnailSelection - If set to true, "Select thumbnail" item will not appear in the context menu. Default value: false.
  • ResourceType - Resource type to display. By default CKFinder displays all available resource types. If ResourceType property is set, CKFinder will display only specified resource type (e.g. "Files", "Images").
  • 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 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".

Retrieved from "https://docs-old.ckeditor.com/index.php?title=CKFinder_2.x/Developers_Guide/PHP/Integration/JavaScript&oldid=3068"