最近在使用ckeditor來寫文章，深深感覺到他的方便，這是一個所見即所得的編輯器，即你在編輯器中輸入的內容是什么樣子，那么最后出來的頁面也是哪個樣子。
下面來講一下這些天來得使用心得：
1。首先需要下載ckeditor的文件
這個可以在ckeditor的官網上免費下載
如果需要實現上傳等功能的話還需要下載ckfinder，同樣也可以在官網上下載相應的文件。
2.接着只需要把ckeditor和ckfinder放到項目中即可：
其中：ckeditor文件夾是下載下來的ckeditor_4.x.x_xx.zip壓縮包下的ckeditor
ckfinder的路徑為（以java為例）：ckfinder_Java_2.x.x/ckfinder/_sources/CKFinder for Java/WebApp/src/mian/webapp/
所需的jar包如下：
3.如果要使用ckfinder則需要進行如下配置：
a。配置config.xml：
config.xml可以在ckfinder_Java_2.x.x/ckfinder/_sources/CKFinder for Java/WebApp/src/mian/webapp/WEB-INF下找到
直接把config.xml復制到項目的WEB-INF下即可
把第一行<enable>false</enable>
改成 <enable>ture</enable>
config.xml下的第三行：
<baseURL>即為文件上傳的路徑
b。配置web.xml
把如下代碼插入即可：
<servlet> <servlet-name>ConnectorServlet</servlet-name> <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class> <init-param> <param-name>XMLConfig</param-name> <param-value>/WEB-INF/config.xml</param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>false</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet> <servlet-name>CkServlet</servlet-name> <servlet-class>cn.coolwind.servlet.CkServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ConnectorServlet</servlet-name> <url-pattern> /ckfinder/core/connector/java/connector.java </url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>CkServlet</servlet-name> <url-pattern>/CkServlet</url-pattern> </servlet-mapping>
4.如果不需要上傳，則不用第三步，直接在頁面中加入ckeditor
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib uri="http://ckeditor.com" prefix="ckeditor"%> <%@ taglib uri="http://ckfinder.com" prefix="ckfinder"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> function test() { //JavaScript判空，如果確定 var editor_data = CKEDITOR.instances.content.getData(); if(editor_data==null||editor_data==""){ alert("數據為空不能提交"); }else{ if(confirm(editor_data)){ document.myform.submit(); } } } </script> <title>ckeditor富文本測試-- by jCuckoo</title> </head> <body> <form action="<c:url value="/CkServlet" />" name="myform" method="post"> <input type="hidden" name="method" value="ckeditor" /> <ckfinder:setupCKEditor editor="content" basePath="ckfinder/" /> <ckeditor:editor basePath="ckeditor/" editor="content" value="test" /> <input type="button" onclick="test()" value="提交數據"/> </form> </body> </html>
至此已經可以顯示出ckeditor了：
下面來說下ckeditor的一些簡單的配置：
1.config.js文件：你可以通過修改他來實現你想要ckeditor展現出來的樣子
CKEDITOR.editorConfig = function (config) { //Define changes to default configuration here. For example: // config.language = 'fr'; //config.uiColor = '#AADC6E'; config.uiColor = '#00BBEC';//修改邊框顏色 //設置寬高 config.width = 700; config.height = 200; config.toolbar = 'MyToolbar'; //config.toolbar = 'Full'; //config.toolbar = 'Basic'; config.toolbar_Full = [ ['Source','-','Save','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['BidiLtr', 'BidiRtl'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'], '/', ['Styles','Format','Font','FontSize'], ['TextColor','BGColor'], ['Maximize', 'ShowBlocks','-','About'] ]; config.toolbar_Basic = [ ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'] ]; config.toolbar_MyToolbar = [ ['NewPage','Preview'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'], ['Image','Flash','Table'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], '/', ['Styles','Format'], ['Bold','Italic','Strike'], ['Link','Unlink','Anchor'], ['TextColor','BGColor','CreateDiv'], ]; };
其中toolbar為工具欄中顯示出來的按鈕，你可以在其中設置你想要出現的按鈕；
2.contents.css文件:修改頁面顯示的CSS樣式
3.styles.js文件：可以在其中增加你想要的樣式
具體的格式為：
{ name:'樣式名稱', element:'樣式的元素', styles:{ 'xxx':'xxx', 'xxx':'xxx' } }，
例如：
{
name: 'MyStyle3',
element: 'section',
styles: {
'max-width': '740px',
'word-wrap': 'break-word',
'padding': '15px 25px',
'top': '0px',
'line-height': '24px',
'font-size': '14px',
'vertical-align': 'baseline',
'border-left': '10px solid #00BBEC',
'background-color': '#EFEFEF'
}
},
效果為：