Installation and basic use of ckeditor (JSP)

Source: Internet
Author: User


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">
  2. CKEditor Test ... (The content here will be displayed in the editor)
  3. </textarea>
  4. <script type=" Text/javascript " >&NBSP;&NBSP;
  5. //<! [cdata[ &NBSP;&NBSP;
  6.      ckeditor.replace (,{toolbar: ' full ' ,&NBSP;SKIN&NBSP;:&NBSP; Span class= "string" style= "margin:0px; padding:0px; Border:none; Color:blue; Background-color:inherit "> ' Kama '
  7. //]] >
  8. </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
  1. < script type= " Text/javascript " >&NBSP;&NBSP;
  2.     window.onload = function () {  
  3.         ckeditor.replace (
  4. }
  5. </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
  1. function Test () {
  2.     var editor_data =  CKEDITOR.instances.content.getData ();   
  3.       If span class= "keyword" style= "margin:0px; padding:0px; Border:none; Color:rgb (0,102,153); Background-color:inherit ">null  | |  editor_data== " "
  4.         alert (" Please fill in the content! "
  5.         return &NBSP; false ;&NBSP;&NBSP;
  6. }
  7. }

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.