JavaScript integration
The 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.
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_v1.js"></script> </head>
With the above file loaded, the CKFinder class is ready to be used.
Step 2: Creating an Application Instance
Next thing to do, to have the CKFinder up & running, is creating an application instance.
<script type="text/javascript"> var finder = new CKFinder(); finder.BasePath = '/ckfinder/'; finder.Skin = 'v1'; finder.Create(); </script>
(put this code anywhere inside of the <body> tag). For a working example please check the standalone v1 sample distributed with CKFinder (_samples/js/standalone_v1.html).
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>