Latest revision as of 07:46, 28 May 2010

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 "cfm".

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

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

• ckfinder.js in case of JavaScript integration method,
• ckfinder.cfc in case of ColdFusion integration method.

Examples

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

• Create an instance of the CKFinder class/component.
• Assign CKFinder properties.
• Call the Create function.

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 ColdFusion component:

<cfscript>
ckfinder = createObject( "component", "ckfinder" ) ;
ckfinder.basePath = "/ckfinder/" ;
ckfinder.width = 400 ;
ckfinder.Create() ; // create the editor.
</cfscript>

For a full working examples please refer to the "_samples" directory. Note that in case of javascript integratino method it is required to include the integration file (ckfinder.js) to have access to the CKFinder class.

JavaScript integration

Integration using javascript code is a bit more powerful. The javascript integration file provides also a Popup method, which can be used to open CKFinder in a popup window. Please refer to the popup.html and popups.html samples in the "_samples/js/" directory for a working example.

The JavaScript integration method provides also two static methods to launch CKFinder, which can accept either four arguments or the settings object as the only argument.

• CKFinder.Create( basePath, width, height, selectFunction ) - Simple static method supporting only basic four arguments. All arguments except basePath are optional.
• CKFinder.Create( settingsObject ) - Pass an object with selected properties as the only argument.
• CKFinder.Popup( basePath, width, height, selectFunction ) - Simple static method supporting only basic four arguments. All arguments except basePath are optional.
• CKFinder.Popup( settingsObject ) - Pass an object with selected properties as the only argument.

The example of creating CKFinder using a static javascript method:

<script type="text/javascript">
CKFinder.Create( '/ckfinder/', 700 ) ;
</script>

More flexible method of launching CKFinder, the object with selected settings is passed as the only argument:

<script type="text/javascript">
CKFinder.Create( { BasePath : '/ckfinder/', RememberLastFolder : false } ) ;
</script>

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".