(Code formatting added) |
|||
| Line 1: | Line 1: | ||
== JavaScript integration == | == 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. | ||
=== Step 1: Loading CKFinder === | === 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: | 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: | ||
<source><head> | <source><head> | ||
| Line 13: | Line 11: | ||
=== 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 application instance: | Next thing to do, to have the CKFinder up & running, is creating an application instance: | ||
<source> | <source> | ||
| Line 24: | Line 21: | ||
(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). | (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). | ||
| − | To open CKFinder in a popup, use the popup() method instead: | + | To open CKFinder in a popup, use the <code>popup()</code> method instead: |
<source> | <source> | ||
| Line 34: | Line 31: | ||
</source> | </source> | ||
| − | For an example please check the popup sample distributed with CKFinder (_samples/js/popup.html). | + | For an example please check the popup sample distributed with CKFinder (<code>_samples/js/popup.html</code>). |
| − | |||
| − | |||
| + | === Configuration Options === | ||
As explained in [[CKFinder_2.x/Developers_Guide/{{{language}}}/Configuration#JavaScript_Configuration|JavaScript Configuration]] section, it is possible to configure CKFinder using '''config.js'''. Because the create() method accepts configuration object as the first argument, we can also pass configuration options inline instead of modyfing config.js (thus making it possible to configure each instance of CKFinder separately): | As explained in [[CKFinder_2.x/Developers_Guide/{{{language}}}/Configuration#JavaScript_Configuration|JavaScript Configuration]] section, it is possible to configure CKFinder using '''config.js'''. Because the create() method accepts configuration object as the first argument, we can also pass configuration options inline instead of modyfing config.js (thus making it possible to configure each instance of CKFinder separately): | ||
| − | <source> | + | <source lang="javascript"> |
<script type="text/javascript"> | <script type="text/javascript"> | ||
var finder = new CKFinder(); | var finder = new CKFinder(); | ||
Revision as of 16:41, 25 May 2011
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 application 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).
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>
For an example please check the popup sample distributed with CKFinder (_samples/js/popup.html).
Configuration Options
As explained in [[CKFinder_2.x/Developers_Guide/{{{language}}}/Configuration#JavaScript_Configuration|JavaScript Configuration]] section, it is possible to configure CKFinder using config.js. Because the create() method accepts configuration object as the first argument, we can also pass configuration options inline instead of modyfing config.js (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 configuration options assigned directly to the CKFinder instance, 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>