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.

(→‎Step 2: Creating an Application Instance)
 
(11 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
= JavaScript integration =
+
== 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.  
−
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 in the <code>ckfinder</code> directory at the root of your website, you can use the following 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 lang="html4strict">
−
<source><head>
+
<head>
 
...
 
...
 
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
 
<script type="text/javascript" src="/ckfinder/ckfinder.js"></script>
−
</head></source>  
+
</head>
−
With the above file loaded, the [http://docs.cksource.com/ckfinder_2.x_api/ CKFinder JavaScript API] is ready to be used.  
+
</source>  
 +
When the file above is 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  ===
−
 
+
In order to have CKFinder up and running, you now need to create an application instance:
−
Next thing to do, to have the CKFinder up & running, is creating an instance:
+
<source lang="javascript">
−
<source>
 
 
<script type="text/javascript">
 
<script type="text/javascript">
 
var finder = new CKFinder();
 
var finder = new CKFinder();
Line 22: Line 21:
 
</script>
 
</script>
 
</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).
+
This code needs to be placed anywhere inside the <code><body></code> element of the page. Refer to the standalone sample distributed with CKFinder (<code>_samples/standalone.html</code>) for a working example.
  
 +
To open CKFinder in a popup, use the <code>popup()</code> method instead:
  
−
==== JavaScript integration ====
+
<source lang="javascript">
−
 
+
<script type="text/javascript">
−
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.
+
var finder = new CKFinder();
 +
finder.basePath = '/ckfinder/';
 +
finder.popup();
 +
</script>
 +
</source>
 +
Refer to the popup sample distributed with CKFinder (<code>_samples/popup.html</code>) 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.
+
=== Configuration Options ===
−
* '''CKFinder.Create'''( basePath, width, height, selectFunction ) - Simple static method supporting only basic four arguments. All arguments except basePath are optional.
+
As explained in the [[CKFinder_2.x/Developers_Guide/{{{language}}}/Configuration#JavaScript_Configuration|JavaScript Configuration]] section, it is possible to configure CKFinder using the <code>config.js</code>. Because the <code>create()</code> method accepts the configuration object as the first argument, you can also pass the configuration options inline instead of modifying the <code>config.js</code> file (thus making it possible to configure each instance of CKFinder separately):
−
* '''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:
+
<source lang="javascript">
−
<source>
 
 
<script type="text/javascript">
 
<script type="text/javascript">
−
CKFinder.Create( '/ckfinder/', 700 ) ;
+
var finder = new CKFinder();
 +
finder.basePath = '/ckfinder/';
 +
// Setting custom width and user language.
 +
finder.create({ width : 700, language : 'de' });
 
</script>
 
</script>
 
</source>
 
</source>
  
−
More flexible method of launching CKFinder, the object with selected settings is passed as the only argument:
+
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:
−
<source>
+
 
 +
<source lang="javascript">
 
<script type="text/javascript">
 
<script type="text/javascript">
−
CKFinder.Create( { BasePath : '/ckfinder/', RememberLastFolder : false } ) ;
+
var finder = new CKFinder();
 +
finder.basePath = '/ckfinder/';
 +
// Setting custom width and user language.
 +
finder.width = 700;
 +
finder.language = 'de';
 +
finder.create();
 
</script>
 
</script>
 
</source>
 
</source>
 +
 +
=== Useful Resources ===
 +
For more information regarding JavaScript integration refer to the following resources:
 +
* [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.html CKFinder class summary]
 +
* [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.config.html Configuration options]

Latest revision as of 10:35, 21 November 2011

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

Retrieved from "https://docs-old.ckeditor.com/index.php?title=Template:CKFinder_2.x_Integration_Javascript&oldid=6683"
This page was last edited on 21 November 2011, at 10:35.