Contents
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/js/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: