Difference between revisions of "Template:CKFinder 2.x V1 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 1: Line 1:
 
==== JavaScript integration ====
 
==== JavaScript integration ====
  
−
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.  
+
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  ===
 
=== Step 1: Loading CKFinder  ===
Line 15: Line 15:
  
 
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>
 +
<script type="text/javascript">
 +
var finder = new CKFinder();
 +
finder.BasePath = '/ckfinder/';
 +
finder.Skin = 'v1';
 +
finder.Create();
 +
</script>
 +
</source>
 +
 +
(put this code anywhere inside of the <code><body></code> 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:
 
The example of creating CKFinder using a static javascript method:
Line 29: Line 46:
 
</script>
 
</script>
 
</source>
 
</source>
−
 
−
(put this code anywhere inside of the <code><body></code> tag). For an 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.
 

Revision as of 14:35, 17 May 2010

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>
Retrieved from "https://docs-old.ckeditor.com/index.php?title=Template:CKFinder_2.x_V1_Integration_Javascript&oldid=3097"