| Line 1: | Line 1: | ||
| − | + | = JavaScript integration = | |
The JavaScript integration method is the most powerful. There are several ways to integrate CKFinder into your pages. This page presents the most common way to achieve it. | The JavaScript integration method is the most powerful. There are several ways to integrate CKFinder into your pages. This page presents the most common way to achieve it. | ||
| Line 10: | Line 10: | ||
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script> | <script type="text/javascript" src="/ckfinder/ckfinder.js"></script> | ||
</head></source> | </head></source> | ||
| − | With the above file loaded, the CKFinder JavaScript API is ready to be used. | + | With the above file loaded, the [http://docs.cksource.com/ckfinder_2.x_api/ CKFinder JavaScript API] is ready to be used. |
| − | == Step 2: Creating an Application Instance == | + | === Step 2: Creating an Application Instance === |
| + | |||
| + | Next thing to do, to have the CKFinder up & running, is creating an instance: | ||
| + | <source> | ||
| + | <script type="text/javascript"> | ||
| + | var finder = new CKFinder(); | ||
| + | finder.basePath = '/ckfinder/'; | ||
| + | finder.create(); | ||
| + | </script> | ||
| + | </source> | ||
| + | (put this code anywhere inside of the <code><body></code> tag). For an example please check the standalone sample distributed with CKFinder (_samples/js/standalone.html). | ||
Revision as of 12:10, 17 May 2010
Contents
JavaScript integration
The JavaScript integration method is the most powerful. There are several ways to integrate CKFinder into your pages. This page presents the most common way to achieve it.
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 at the "ckfinder" directory at the root of your web site, here you have an example:
<head> ... <script type="text/javascript" src="/ckfinder/ckfinder.js"></script> </head>
With the above file loaded, the CKFinder JavaScript API is ready to be used.
Step 2: Creating an Application Instance
Next thing to do, to have the CKFinder up & running, is creating an instance:
<script type="text/javascript"> var finder = new CKFinder(); finder.basePath = '/ckfinder/'; finder.create(); </script>
(put this code anywhere inside of the <body> tag). For an example please check the standalone sample distributed with CKFinder (_samples/js/standalone.html).
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>