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 contains HTML files with examples of launching CKFinder by using the JavaScript code as well as a aspx folder with examples of launching CKFinder by using the ASP.NET language.

Examples

To start the CKFinder in javascript, basically we need to do three things:

  • Create an instance of the CKFinder class.
  • Assign CKFinder properties.
  • Call the Create method.

The example of creating CKFinder using a javascript object: 

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

The example of creating CKFinder in the ASP.NET page: 

<CKFinder:FileBrowser ID="FileBrowser1" BasePath="/ckfinder/" Width="800" runat="server"></CKFinder:FileBrowser>

For a full working examples please refer to the "_samples" directory. Note that in case of javascript integration, it is required to include the integration file (ckfinder.js) to have access to the CKFinder class. In case of ASP.NET integration, you must copy the CKFinder.dll file to your "bin" directory or make a reference to it in your Visual Studio project.

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 "CKFinderId" property (explained below). Default value: true.
  • CKFinderId - Used to identify the CKFinder object, optional. If set, the "CKFinderId" variable will be passed to the server connector on each request. When "RememberLastFolder" is enabled and the "CKFinderId" 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/ASP.NET/Integration&oldid=2962"