Template:CKFinder 2.x Integration Javascript - Revision history

J.swiderski: /* Step 2: Creating an Application Instance */

2011-11-21T08:35:48Z

‎Step 2: Creating an Application Instance

J.swiderski: /* Step 2: Creating an Application Instance */

2011-11-21T08:35:32Z

‎Step 2: Creating an Application Instance

Anna: Article contents proof-read and formatted

2011-05-27T09:16:52Z

Article contents proof-read and formatted

Anna: Code formatting added

2011-05-25T14:41:40Z

Code formatting added

Wiktor at 07:51, 18 May 2010

2010-05-18T07:51:59Z

Wiktor at 12:59, 17 May 2010

2010-05-17T12:59:54Z

Wiktor at 12:52, 17 May 2010

2010-05-17T12:52:56Z

Wiktor at 12:49, 17 May 2010

2010-05-17T12:49:42Z

Wiktor at 12:28, 17 May 2010

2010-05-17T12:28:48Z

Wiktor at 12:27, 17 May 2010

2010-05-17T12:27:27Z

@@ Line 21: / Line 21: @@
 </script>
 </source>
-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/js/standalone.html</code>) for a working example.
+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:

@@ Line 32: / Line 32: @@
 </script>
 </source>
-Refer to the popup sample distributed with CKFinder (<code>_samples/js/popup.html</code>) for a working example.
+Refer to the popup sample distributed with CKFinder (<code>_samples/popup.html</code>) for a working example.
 === Configuration Options ===

@@ 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 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 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 in the <code>ckfinder</code> directory at the root of your website, you can use the following example:
-<source><head>
+<source lang="html4strict">
 	...
 	<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>
 === Step 2: Creating an Application Instance  ===
-Next thing to do, to have the CKFinder up & running, is creating an application instance:
+In order to have CKFinder up and running, you now need to create an application instance:
-<source>
+<source lang="javascript">
 <script type="text/javascript">
 var finder = new CKFinder();
@@ Line 19: / Line 21: @@
 </script>
 </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/js/standalone.html</code>) for a working example.
 To open CKFinder in a popup, use the <code>popup()</code> method instead:
-<source>
+<source lang="javascript">
 <script type="text/javascript">
 var finder = new CKFinder();
@@ Line 30: / Line 32: @@
 </script>
 </source>
+Refer to the popup sample distributed with CKFinder (<code>_samples/js/popup.html</code>) for a working example.
 === 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 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):
 <source lang="javascript">
@@ Line 45: / Line 46: @@
 </source>
-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:
+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">
 var finder = new CKFinder();
@@ Line 57: / Line 58: @@
 </script>
 </source>
 * [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]

@@ Line 1: / Line 1: @@
 == 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:
 <source><head>
@@ Line 13: / Line 11: @@
 === Step 2: Creating an Application Instance  ===
 Next thing to do, to have the CKFinder up & running, is creating an application instance:
 <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).
-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>
@@ Line 34: / Line 31: @@
 </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>).
 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">
 var finder = new CKFinder();

@@ Line 38: / Line 38: @@
 === Configuration options ===
-As explained in [[CKFinder_2.x/Developers_Guide/PHP/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>

← Older revision		Revision as of 12:49, 17 May 2010
Line 25:		Line 25:

	=== Configuration options ===		=== Configuration options ===
		+
		+	As explained in [[CKFinder_2.x/Developers_Guide/PHP/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 in a different way):
		+
		+	<source>
		+	<script type="text/javascript">
		+	var finder = new CKFinder();
		+	finder.basePath = '/ckfinder/';
		+	// Setting custom width and user language.
		+	finder.create({ width : 700, language : 'de' });
		+	</script>
		+	</source>
		+
		+	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:
		+
		+	<source>
		+	<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>
		+	</source>
		+

	=== Available methods ===		=== Available methods ===

← Older revision		Revision as of 12:27, 17 May 2010
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).
		+
		+	=== Available methods ===
		+
		+	==== 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.