| Line 1: | Line 1: | ||
| − | There are several ways to integrate CKEditor into your pages. This page presents the most common way to achieve it. | + | 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 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: |
<pre><head> | <pre><head> | ||
... | ... | ||
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script> | <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> | ||
| − | </head></pre> | + | </head></pre> |
| − | With the above file loaded, the CKEditor JavaScript API is ready to be used. | + | With the above file loaded, the CKEditor JavaScript API is ready to be used. |
| − | == 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. | + | 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. |
| − | 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: | + | 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: |
| − | <pre><textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea></pre> | + | <pre><textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea></pre> |
| − | 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, from a database for example, just put that data inside the textarea, just like the above example. |
| − | 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 example, we have named our textarea "editor1". This name can be used in the server side 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: | + | Now, using the CKEditor JavaScript API, we "replace" the plain textarea with an editor instance. A single JavaScript call is needed for that: |
<pre><script type="text/javascript"> | <pre><script type="text/javascript"> | ||
CKEDITOR.replace( 'editor1' ); | CKEDITOR.replace( 'editor1' ); | ||
| − | </script></pre> | + | </script></pre> |
| − | This script block must be included at any point "after" the <textarea> tag in the page. You can also call the replace function inside <head>, but you need to listen for the "window.onload" event in such case: | + | This script block must be included at any point "after" the <textarea> tag in the page. You can also call the replace function inside <head>, but you need to listen for the "window.onload" event in such case: |
<pre><script type="text/javascript"> | <pre><script type="text/javascript"> | ||
window.onload = function() | window.onload = function() | ||
| Line 30: | Line 30: | ||
CKEDITOR.replace( 'editor1' ); | CKEDITOR.replace( 'editor1' ); | ||
}; | }; | ||
| − | </script></pre> | + | </script></pre> |
| − | == Step 3: Saving the Editor Data == | + | == Step 3: Saving the Editor Data == |
| − | As previously described, the editor works just like a <textarea> 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 previously described, the editor works just like a <textarea> 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. |
| − | For example, following the above example, in PHP we would do something like this: | + | For example, following the above example, in PHP we would do something like this: |
<pre><?php | <pre><?php | ||
$editor_data = $_POST[ 'editor1' ]; | $editor_data = $_POST[ 'editor1' ]; | ||
| − | ?></pre> | + | ?></pre> |
| − | === 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 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: |
<pre><script type="text/javascript"> | <pre><script type="text/javascript"> | ||
var editor_data = CKEDITOR.instances.editor1.getData(); | var editor_data = CKEDITOR.instances.editor1.getData(); | ||
| − | </script></pre> | + | </script></pre> |
== Complete Sample == | == Complete Sample == | ||
<pre><html> | <pre><html> | ||
| Line 66: | Line 66: | ||
</body> | </body> | ||
</html> | </html> | ||
| − | </pre> | + | </pre> |
| + | == JavaScript API == | ||
| + | |||
| + | Work in progress... | ||
| + | |||
| + | One of our users has put up a temporary guide [[Talk:CKEditor_3.x/Developers_Guide/Integration|here]]. Thank you Christiaan. | ||
Revision as of 09:16, 16 April 2009
There are several ways to integrate CKEditor into your pages. This page presents the most common way to achieve it.
Contents
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 installed CKEditor at the "ckeditor" directory at the root of your web site, here you have an example:
<head> ... <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head>
With the above file loaded, the CKEditor JavaScript API is ready to be used.
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.
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:
<textarea name="editor1"><p>Initial value.</p></textarea>
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.
In this example, we have named our textarea "editor1". This name can be used in the server side 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:
<script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script>
This script block must be included at any point "after" the <textarea> tag in the page. You can also call the replace function inside <head>, but you need to listen for the "window.onload" event in such case:
<script type="text/javascript">
window.onload = function()
{
CKEDITOR.replace( 'editor1' );
};
</script>
Step 3: Saving the Editor Data
As previously described, the editor works just like a <textarea> 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.
For example, following the above example, in PHP we would do something like this:
<?php $editor_data = $_POST[ 'editor1' ]; ?>
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:
<script type="text/javascript"> var editor_data = CKEDITOR.instances.editor1.getData(); </script>
Complete Sample
<html> <head> <title>Sample - CKEditor</title> <script type="text/javascript" src="/ckeditor/ckeditor.js"></script> </head> <body> <form method="post"> <p> My Editor:<br /> <textarea name="editor1"><p>Initial value.</p></textarea> <script type="text/javascript"> CKEDITOR.replace( 'editor1' ); </script> </p> <p> <input type="submit" /> </p> </form> </body> </html>
JavaScript API
Work in progress...
One of our users has put up a temporary guide here. Thank you Christiaan.