CKEditor 3.x/Developers Guide/Integration - Revision history

Anna: /* Complete Sample */ HTML encoding added

2011-03-10T13:54:32Z

‎Complete Sample: HTML encoding added

Anna: /* Step 2: Creating an Editor Instance */ Text and code corrections

2011-03-10T13:53:32Z

‎Step 2: Creating an Editor Instance: Text and code corrections

Anna: /* Complete Sample */ Article section proof-read

2011-01-04T14:13:54Z

‎Complete Sample: Article section proof-read

Anna: /* Step 3: Saving the Editor Data */ Article section proof-read and formatted

2011-01-04T12:30:28Z

‎Step 3: Saving the Editor Data: Article section proof-read and formatted

Anna: /* Step 2: Creating an Editor Instance */ Article section rewritten and formatted

2011-01-04T12:22:12Z

‎Step 2: Creating an Editor Instance: Article section rewritten and formatted

Anna: TOC moved, codes formatted with GeSHi

2011-01-04T08:44:02Z

TOC moved, codes formatted with GeSHi

Anna: Introduction and Step 1 section proof-read and formatted

2011-01-04T08:39:00Z

Introduction and Step 1 section proof-read and formatted

Fredck at 08:16, 12 October 2009

2009-10-12T08:16:11Z

Fredck: /* JavaScript API */

2009-10-12T08:10:15Z

‎JavaScript API

Martinkou at 08:16, 16 April 2009

2009-04-16T08:16:52Z

@@ Line 63: / Line 63: @@
 		<p>
 			My Editor:<br />
-			<textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>
+			<textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
 			<script type="text/javascript">
 				CKEDITOR.replace( 'editor1' );

@@ Line 19: / Line 19: @@
 As a matter of fact, CKEditor uses the textarea to transfer its data to the server. The textarea element is invisible to the end user. In order to create an editor instance, you must first add a <code><textarea></code> element to the source code of your HTML page:
-<source><textarea id="editor1" name="editor1"><p>Initial value.</p></textarea></source>
+<source><textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea></source>
-In this case, the textarea element was named <code>editor1</code>. This name can be used in the server-side code later, when receiving the posted data.
+Note that if you want to load data into the editor, for example from a database, you need to put that data inside the <code><textarea></code> element, just like the HTML-encoded <code>&lt;p&gt;</code> element in the example above. In this case the textarea element was named <code>editor1</code>. This name can be used in the server-side code later, when receiving the posted data.
-After the <code>textarea</code> element is inserted, we can use the [http://docs.cksource.com/ckeditor_api/ CKEditor JavaScript API] to replace this HTML element with an editor instance. A single JavaScript call is needed for that:
+After the <code>textarea</code> element is inserted, we can use the [http://docs.cksource.com/ckeditor_api/ CKEditor JavaScript API] to replace this HTML element with an editor instance. A single JavaScript <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.html#.replace replace]</code> call is needed for that:
 <source lang="javascript"><script type="text/javascript">
 	CKEDITOR.replace( 'editor1' );

@@ Line 53: / Line 53: @@
 == Complete Sample ==
 <source>
 <html>
@@ Line 63: / Line 64: @@
 		<p>
 			My Editor:<br />
-			<textarea name="editor1"><p>Initial value.</p></textarea>
+			<textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>
 			<script type="text/javascript">
 				CKEDITOR.replace( 'editor1' );

@@ Line 38: / Line 38: @@
 </script></source>
-== Step 3: Saving the Editor Data  ==
+== Step 3: Saving the Editor Data ==
-As previously described, the editor works just like a &lt;textarea&gt; field. So, when submitting a form containing an editor instance, its data will be simply posted, using the textarea name as the key to retrieve it.
+As stated above, the editor works just like a <code><textarea></code> field. This means that when submitting a form containing an editor instance, its data will be simply posted, using the <code><textarea></code> element name as the key to retrieve it.
-For example, following the above example, in PHP we would do something like this:
+For example, following the above example, we could create the following PHP code:
 <source lang="php"><?php
 	$editor_data = $_POST[ 'editor1' ];
 ?></source>
-=== Client Side Data Handling  ===
+=== Client-Side Data Handling ===
-Some applications (like Ajax applications) need to handle all data at the client side, sending it to the server by its own ways. In such case, it's enough to use the CKEditor API to easily retrieve an editor instance data. For example:
+Some applications (like those based on Ajax) need to handle all data on the client side, sending it to the server using their specific methods. If this is the case, it is enough to use the CKEditor API to easily retrieve the editor instance data. In order to do this, you can use the [http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#getData getData] method:
 <source language="javascript"><script type="text/javascript">
 	var editor_data = CKEDITOR.instances.editor1.getData();
 </script></source>
 == Complete Sample ==

@@ Line 16: / Line 16: @@
 == Step 2: Creating an Editor Instance ==
-CKEditor works just like a textarea in your page. While the editor offers a user interface to easily write, format and work with rich text, the same thing could be achieved, not that easily, with a textarea, requiring the user to type HTML code inside of it.
+CKEditor works just like a textarea element in your page. The editor offers a user interface to easily write, format, and work with rich text, but the same thing could be achieved (though not that easily) with a <code><textarea></code> element, requiring the user to type HTML code inside.
-But, as a matter of fact, CKEditor uses a textarea to transfer its data to the server. The textarea is invisible to the end user. So, to create and editor instance you must, ironically, create a textarea first:
+As a matter of fact, CKEditor uses the textarea to transfer its data to the server. The textarea element is invisible to the end user. In order to create an editor instance, you must first add a <code><textarea></code> element to the source code of your HTML page:
-<source><textarea name="editor1"><p>Initial value.</p></textarea></source>
+<source><textarea id="editor1" name="editor1"><p>Initial value.</p></textarea></source>
-Note that, if you want to load data into the editor, from a database for example, just put that data inside the textarea, just like the above example.
+Note that if you want to load data into the editor, for example from a database, you need to put that data inside the <code><textarea></code> element, just like in the example above.
-In this example, we have named our textarea "editor1". This name can be used in the server side later, when receiving the posted data.
+In this case, the textarea element was named <code>editor1</code>. This name can be used in the server-side code later, when receiving the posted data.
-Now, using the CKEditor JavaScript API, we "replace" the plain textarea with an editor instance. A single JavaScript call is needed for that:
+After the <code>textarea</code> element is inserted, we can use the [http://docs.cksource.com/ckeditor_api/ CKEditor JavaScript API] to replace this HTML element with an editor instance. A single JavaScript call is needed for that:
 <source lang="javascript"><script type="text/javascript">
 	CKEDITOR.replace( 'editor1' );
 </script></source>
-This script block must be included at any point "after" the &lt;textarea&gt; tag in the page. You can also call the replace function inside &lt;head&gt;, but you need to listen for the "window.onload" event in such case:
+This script block must be included at any point '''after''' the <code><textarea></code> tag in the source code of the page. You can also call the <code>replace</code> function inside the <code><head></code> section, but in this case you will need to listen for the <code>window.onload</code> event:
 <source lang="javascript"><script type="text/javascript">
@@ Line 36: / Line 36: @@
 		CKEDITOR.replace( 'editor1' );
 	};
 </script></source>
 == Step 3: Saving the Editor Data  ==

@@ Line 1: / Line 1: @@
 There are several ways to integrate CKEditor into your pages. This page presents the most common way to achieve it.
-== Step 1: Loading CKEditor  ==
+== Step 1: Loading CKEditor ==
-CKEditor is a JavaScript application. To load it, you just need to include a single file reference at your page. Supposing that you have [[CKEditor 3.x/Developers Guide/Installation|installed]] CKEditor at the "ckeditor" directory at the root of your web site, here you have an example:
+<note>When adding CKEditor to your web pages, use the original file name (<code>ckeditor.js</code>). If you want to use a different file name, or even merge the CKEditor script into another JavaScript file, refer to the [[CKEditor 3.x/Developers Guide/Specifying the Editor Path|Specifying the Editor Path]] section of the Developer's Guide first.</note>
-== Step 2: Creating an Editor Instance  ==
+== Step 2: Creating an Editor Instance ==
 CKEditor works just like a textarea in your page. While the editor offers a user interface to easily write, format and work with rich text, the same thing could be achieved, not that easily, with a textarea, requiring the user to type HTML code inside of it.

@@ Line 9: / Line 9: @@
 &lt;/head&gt;</pre>
 With the above file loaded, the CKEditor JavaScript API is ready to be used.
 == Step 2: Creating an Editor Instance  ==

@@ Line 66: / Line 66: @@
 &lt;/body&gt;
 &lt;/html&gt;
 </pre>