installation
Installing CKEditor is an easy task, just follow the simple steps below to complete it.
1. Download the latest version of CKEditor from our website http://www.jb51.net/codes/21295.html.
2. Extract the downloaded files into the "CKEditor" folder in your site directory.
Note: You can also place these files in any one of your sites, by default, "CKEditor".
Test your installation
The editor comes with a few simple example pages to verify that the installation results are working correctly, check the "_samples" directory. Visit the following address for testing:
http://< your site domain name >/<ckeditor installation path >/_samples/index.html
For example:
Http://www.example.com/ckeditor/_samples/index.html
Integrated
There is a hard way to integrate CKEditor into your Web page, where you can introduce the most common implementations.
The first step: Loading into the CKEditor
CKEditor is a JavaScript application that you can load only if you include a file reference in your Web page. If you have installed CKEditor on your site's "CKEditor" directory, you can refer to the following example:
Copy Code code as follows:
...
<script type= "Text/javascript" src= "/ckeditor/ckeditor.js" ></script>
Loaded in the above way, the CKEditor JavaScript API is ready to be used.
Step Two: Create an editor instance
CKEditor is like a text area on your Web page (textarea) that provides a simple and easy to write user interface, layout, and Rich text entry area, but it's not easy to use a text area to achieve the same effect, it requires the user to enter HTML code.
However, in fact, CKEditor still uses a text area to pass its data to the server, the text area is not visible to the user, so you must create and edit an instance, first create an instance:
<textarea name= "Editor1" ><p>initial value.</p></textarea>
Note that if you want to load some data into the editor, such as reading data from a database, just place the data in the text area (textarea), just like the example above. In this example, we have named the text area (textarea) as the "Editor1". When receiving post-submitted data, the name is used in the server operation. Now, starting with the CKEditor JavaScript API, we use an editor instance to "replace" the normal text area (textarea), which is required for a section of JavaScript commands:
Copy Code code as follows:
<script type= "Text/javascript" >
Ckeditor.replace (' editor1 ');
</script>
The above script block can only be included after the <textarea> tag of the Web page. You can also run the replacement process within the
Copy Code code as follows:
<script type= "Text/javascript" >
Window.onload = function ()
{
Ckeditor.replace (' editor1 ');
};
</script>
Step three: Save editor content Data
As previously described, the editor works just as a text area (textarea), so when submitting a form that contains an instance of an editor, his data is also very simple to pass, using the name of the text area (textarea) as the health name to receive the data. For example, according to the above example, in PHP we need to work with data like this:
Copy Code code as follows:
<?php
$editor _data = $_post[' editor1 '];
?>
Client Data Processing
Some applications, such as Ajax, need to process all the data on the client, and then send the data to the server in its own way, in which case the CKEditor API is easy enough to get the contents of the editor instance. e.g.
Copy Code code as follows:
<script type= "Text/javascript" >
var editor_data = CKEDITOR.instances.editor1.getData ();
</script>
Complete Example
Copy Code code as follows:
<title>sample-ckeditor</titl e>
<script type= "Text/javascript" src= "/ckeditor/ckeditor.js" ></script>
& L t;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& Gt
</body>
