(→Complete Sample: HTML encoding added) |
|||
| (9 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
| − | There are several ways to integrate CKEditor into your pages. This page presents the most common way to achieve it. | + | __TOC__ |
| + | 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 need to include a single file reference in your page. If you have [[CKEditor 3.x/Developers Guide/Installation|installed]] CKEditor in the <code>ckeditor</code> directory for the root of your website, you need to insert the following code fragment into the <code><head></code> section of your page: | ||
| − | + | <source><head> | |
| − | < | ||
... | ... | ||
| − | + | <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> | |
| − | + | </head> | |
| − | + | </source> | |
| + | When the above file is loaded, the CKEditor JavaScript API is ready to be used. | ||
| + | |||
| + | <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 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. | ||
| − | CKEditor | + | 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> | ||
| − | + | 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><p></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. | |
| − | |||
| − | Note 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' ); | ||
| + | </script></source> | ||
| + | |||
| + | 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"> | |
| − | < | ||
| − | |||
| − | |||
| − | |||
| − | < | ||
window.onload = function() | window.onload = function() | ||
{ | { | ||
CKEDITOR.replace( 'editor1' ); | CKEDITOR.replace( 'editor1' ); | ||
}; | }; | ||
| − | + | </script></source> | |
| + | |||
== Step 3: Saving the Editor Data == | == Step 3: Saving the Editor Data == | ||
| + | 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, we could create the following PHP code: | |
| + | <source lang="php"><?php | ||
| + | $editor_data = $_POST[ 'editor1' ]; | ||
| + | ?></source> | ||
| − | + | === Client-Side Data Handling === | |
| − | < | + | 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 == | |
| − | < | + | To insert a CKEditor instance, you can use the following sample that creates a basic page containing a form with a <code>textarea</code> element that is replaced with CKEditor. |
| − | + | <source> | |
| − | + | <html> | |
| − | + | <head> | |
| − | < | + | <title>Sample CKEditor Site</title> |
| − | + | <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> | |
| − | + | </head> | |
| − | + | <body> | |
| − | + | <form method="post"> | |
| − | + | <p> | |
| − | + | My Editor:<br /> | |
| − | + | <textarea id="editor1" name="editor1"><p>Initial value.</p></textarea> | |
| − | My Editor: | + | <script type="text/javascript"> |
| − | |||
| − | |||
CKEDITOR.replace( 'editor1' ); | CKEDITOR.replace( 'editor1' ); | ||
| − | + | </script> | |
| − | + | </p> | |
| − | + | <p> | |
| − | + | <input type="submit" /> | |
| − | + | </p> | |
| − | + | </form> | |
| − | + | </body> | |
| − | + | </html> | |
| − | </ | + | </source> |
Latest revision as of 14:54, 10 March 2011
Contents
There are several ways to integrate CKEditor into your pages. This page presents the most common way to achieve it.
Step 1: Loading CKEditor
CKEditor is a JavaScript application. To load it, you need to include a single file reference in your page. If you have installed CKEditor in the ckeditor directory for the root of your website, you need to insert the following code fragment into the <head> section of your page:
<head> ... <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head>
When the above file is loaded, the CKEditor JavaScript API is ready to be used.
ckeditor.js). If you want to use a different file name, or even merge the CKEditor script into another JavaScript file, refer to the Specifying the Editor Path section of the Developer's Guide first.
Step 2: Creating an Editor Instance
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 <textarea> element, requiring the user to type HTML code inside.
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 <textarea> element to the source code of your HTML page:
<textarea id="editor1" name="editor1"><p>Initial value.</p></textarea>
Note that if you want to load data into the editor, for example from a database, you need to put that data inside the <textarea> element, just like the HTML-encoded <p> element in the example above. In this case the textarea element was named editor1. This name can be used in the server-side code later, when receiving the posted data.
After the textarea element is inserted, we can use the CKEditor JavaScript API to replace this HTML element with an editor instance. A single JavaScript replace call is needed for that:
<script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script>
This script block must be included at any point after the <textarea> tag in the source code of the page. You can also call the replace function inside the <head> section, but in this case you will need to listen for the window.onload event:
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor1' );
};
</script>
Step 3: Saving the Editor Data
As stated above, the editor works just like a <textarea> field. This means that when submitting a form containing an editor instance, its data will be simply posted, using the <textarea> element name as the key to retrieve it.
For example, following the above example, we could create the following PHP code:
<?php $editor_data = $_POST[ 'editor1' ]; ?>
Client-Side Data Handling
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 getData method:
<script type="text/javascript"> var editor_data = CKEDITOR.instances.editor1.getData(); </script>
Complete Sample
To insert a CKEditor instance, you can use the following sample that creates a basic page containing a form with a textarea element that is replaced with CKEditor.
<html> <head> <title>Sample CKEditor Site</title> <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head> <body> <form method="post"> <p> My Editor:<br /> <textarea id="editor1" name="editor1"><p>Initial value.</p></textarea> <script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script> </p> <p> <input type="submit" /> </p> </form> </body> </html>