(Created page with '{{Integration Introduction_2.x|language=ASP|ext=asp|classext=asp}} === Examples === To start the CKFinder, basically we need to do three things: * Create an instance of the CKFi…') |
(No difference)
|
Revision as of 18:54, 14 May 2010
Contents
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 asp
folder with examples of launching CKFinder by using the ASP language.
The following files are used when either the JavaScript or the ASP method of launching CKFinder is used:
-
ckfinder.js
in case of the JavaScript integration method, -
ckfinder_v1.js
in case of JavaScript V1 integration method (useful when migrating from CKFinder 1.x), -
ckfinder.asp
in case of the ASP integration method.
Examples
To start the CKFinder, basically we need to do three things:
- Create an instance of the CKFinder class.
- 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.create(); </script>
The example of creating CKFinder using an ASP class:
<% Dim oFinder Set oFinder = New CKFinder oFinder.BasePath = "/ckfinder" oFinder.Width = "800" oFinder.Create %>
For a full working examples please refer to the "_samples" directory. Note that in both cases it is required to include the integration file (ckfinder.js or ckfinder.asp) to have access to the CKFinder class.
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".