Difference between revisions of "Template:CKFinder 2.x Integration Javascript"

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

Line 23: Line 23:
 
</source>
 
</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).
 
(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:
 +
 +
<source>
 +
<script type="text/javascript">
 +
var finder = new CKFinder();
 +
finder.basePath = '/ckfinder/';
 +
finder.popup();
 +
</script>
 +
</source>
 +
 +
For an example please check the popup sample distributed with CKFinder (_samples/js/popup.html).
  
 
=== Configuration options ===
 
=== Configuration options ===
Line 49: Line 61:
 
</script>
 
</script>
 
</source>
 
</source>
 +
=== Useful resources ===
  
 
+
* [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.html CKFinder class summary]
=== Available methods ===
+
* [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.config.html Configuration options]
 
 
==== create() ====
 
Renders CKFinder in the current document.
 
<pre>
 
function create( config )
 
</pre>
 
accepts one argument:
 
* <code>config</code> - (Optional) The specific configurations to apply to this application instance. Configurations set here will override global CKFinder settings.
 
 
 
==== popup() ====
 
 
 
The popup() method opens CKFinder in a popup.
 
<pre>
 
function popup( config )
 
</pre>
 
accepts one argument:
 
* <code>config</code> - (Optional) The specific configurations to apply to this application instance. Configurations set here will override global CKFinder settings.
 

Revision as of 13:59, 17 May 2010

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 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>

Useful resources