Installation and basic use of ckeditor (JSP)

article Category: Web Front end

First, download CKEditor

1. Direct, currently the latest version is 3.5:

Http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip

2. Or you can download it directly to the official website:

Http://ckeditor.com/download

Second, installation CKEditor

Unzip the Ckeditor_3.5.zip, get the CKEditor folder, copy ckeditor entire folder to the project's root directory, that is Webroot

Third, verify the CKEditor is installed successfully

Deployment Run project, Access: http://localhost/project name/ckeditor/_samples/index.html

The "CKEditor Samples List" can appear on the demo page, indicating that CKEditor has been successfully installed

Iv. Application of CKEditor

1. Import JS file

<script type= "Text/javascript" src= "<%=request.getcontextpath ()%>/ckeditor/ckeditor.js" ></script >

2. Create and use CKEditor

Java code

1. <textareaclass="CKEditor"cols="a"id="Content"name="Content"rows="Ten">
3. CKEditor Test ... (The content here will be displayed in the editor)
5. </textarea>
9. <script type=" Text/javascript " >&NBSP;&NBSP;
11. //<! [cdata[ &NBSP;&NBSP;
12.      ckeditor.replace (,{toolbar: ' full ' ,&NBSP;SKIN&NBSP;:&NBSP; Span class= "string" style= "margin:0px; padding:0px; Border:none; Color:blue; Background-color:inherit "> ' Kama '
14. //]] >
16. </script>

Description

1) TextArea attribute value name= "Content": the name can be arbitrarily defined, but must be associated with the following ckeditor.replace (' content '); The

2) ckeditor.replace (' content '); is the most basic notation, representing an instance of the editor created using the CKEditor JavaScript API,

Replace the textareaabove.

To add some property settings for CKEditor, its properties must be written in the {} curly braces,

As above {toolbar:' full ', skin: ' kama '},

Specific properties on the Web many articles can be searched, here is not exhausted.

3) "ckeditor.replace (' content ') on the back of the textarea; Scripts can also be written in the

Java code

2. < script type= " Text/javascript " >&NBSP;&NBSP;
4.     window.onload = function () {  
6.         ckeditor.replace (
8. }
10. </script>

V. Get the data in the editor

Sometimes when submitting a form, you need to determine if the contents of the editor are empty, and then use the CKEditor JavaScript API:

CKEDITOR.instances.content.getData ()

Java code

2. function Test () {
4.     var editor_data =  CKEDITOR.instances.content.getData ();   
5.       If span class= "keyword" style= "margin:0px; padding:0px; Border:none; Color:rgb (0,102,153); Background-color:inherit ">null  | |  editor_data== " "
7.         alert (" Please fill in the content! "
9.         return &NBSP; false ;&NBSP;&NBSP;
11. }
13. }

Note: If you hit a bunch of spaces in the editor, the content is not empty, because the editor will convert the spaces you have played into &nbsp;

At this point, the CKEDIOTR Editor can be displayed and used on the page.

Note: If you use a framework such as STRUTS2 in your project, you can also get the contents of the editor based on the properties of the textarea above name= "content", preferably using blobs to store.

Installation and basic use of ckeditor (JSP)