使用ckeditor實現在線文本編輯功能

　　1. 從CKEditor官網下載最新版的CKEditor，目前最新版本爲Version 4.3.1。

　　2. 將下載下來的壓縮包解壓縮後，將文件拷貝到項目的WebContent根目錄下，啓動服務器，如果能通過服務器地址訪問\ckeditor\samples下的例子，則證明CKEditor安裝成功。

　　3. 參照\ckeditor\samples\目錄下的replacebyclass.html例子，將以下代碼拷貝到需要需要顯示文本編輯器的地方。

1 2 3

<textarea class="ckeditor" cols="80" id="editor1" name=" blog.content " rows="10">     ${blog.content} </textarea>

　　4. 在該JSP頁面的Header處，引入\ckeditor\ ckeditor.js文件。

　　5. 在\ckeditor\samples\ sample.css文件中，將文本編輯器部分的樣式提取出來，放到單獨的CSS文件（如blog_ckeditor.css）中，並在頁面的Header中引入。

注：請不要直接使用sample.css文件，以防止該文件中的樣式與現有系統的樣式表衝突。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

/**  *  CKEditor editables are automatically set with the "cke_editable" class  *  plus cke_editable_(inline|themed) depending on the editor type.  */ /* Style a bit the inline editables. */ .cke_editable.cke_editable_inline {     cursor: pointer; } /* Once an editable element gets focused, the "cke_focus" class is    added to it, so we can style it differently. */ .cke_editable.cke_editable_inline.cke_focus {     box-shadow: inset 0px 0px 20px 3px #ddd, inset 0 0 1px #000;     outline: none;     background: #eee;     cursor: text; } /* Avoid pre-formatted overflows inline editable. */ .cke_editable_inline pre {     white-space: pre-wrap;     word-wrap: break-word; } .cke_contents_ltr blockquote {     padding-left: 20px;     padding-right: 8px;     border-left-width: 5px; } .cke_contents_rtl blockquote {     padding-left: 8px;     padding-right: 20px;     border-right-width: 5px; }

　　6. 配置改頁面的Action，並將提交方法設置爲Post格式提交，至此你就可以在你的頁面中展示CKEditor的強大功能了。