系統(tǒng)需求
請(qǐng)注意，你至少需要JRE 1.4和Servlet的2.5/JSP 2.1使用整合。
安裝
將CKEditor添加到您的應(yīng)用程序，有兩步的過程：
- 下載獨(dú)立CKEditor和放置在Web應(yīng)用程序目錄。
- 下載并安裝服務(wù)器端集成（用于Java CKEditor）。
添加客戶端CKEditor
去官方的CKEditor下載頁面下載CKEditor的最新版本。將它放置在你的web應(yīng)用程序的目錄里。
添加標(biāo)簽庫（ckeditor-java-core）
當(dāng)你想添加CKEditor庫，你可以選擇使用Maven或手動(dòng)添加。
使用Maven2
如果您的應(yīng)用程序使用Maven，你可以添加以下的依賴在你的pom.xml文件里：
<dependency>
<groupId>com.ckeditor</groupId>
<artifactId>ckeditor-java-core</artifactId>
<version>3.x.y</version>
</dependency>請(qǐng)注意，3.xy表示版本，例如<version> 3.6</version> 。當(dāng)CKEditor版本添加到Maven中，將自動(dòng)下載指定版本。
沒有Maven
如果你不使用Maven，你必須手動(dòng)添加CKEditor jar庫。在CKEditor下載網(wǎng)站，下載的ckeditor-java-core- 3.xy* .jar文件，并把它放在在你的/ WEB-INF/lib目錄。
*請(qǐng)注意，3.xy表示一個(gè)CKEditor發(fā)布的版本。
在頁面上使用標(biāo)簽
要在JSP頁面中使用<ckeditor>標(biāo)簽，你需要在頁面中聲明CKEditor標(biāo)記庫：
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
在以下的實(shí)例中CKEditor取代HTML中textarea的元素。除非你正在使用的<ckeditor:editor>標(biāo)簽（將在后面介紹），你首先需要的是一個(gè)帶有HTMLtextarea的元素的JSP頁面。
更換所選擇的textarea元素
我們的目的是這樣的：讓我們假設(shè)有個(gè)頁面看起來像這樣：
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<html>
<body>
<form action="sample_posteddata.jsp" method="get">
<p>
<label for="editor1">Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
</body>
</html>正如在上面的代碼中所看到的，該頁面的table元素的屬性包含sample_posteddata.jsp這個(gè)值，這是一個(gè)在樣例中應(yīng)用的 web.xml映射，當(dāng)頁面被提交，鏈接到servlet，輸出出CKEditor的內(nèi)容。
接下來，你必須在頁面中添加CKEditor標(biāo)簽（<ckeditor:replace>在這種情況下）。建議添加在底部</ BODY>標(biāo)記之前：
<ckeditor:replace replace="editor1" basePath="/ckeditor/" />
請(qǐng)注意，上面的CKEditor標(biāo)簽包含兩個(gè)屬性：
本文件的目的：假設(shè)CKEditor是在/ ckeditor /目錄（http://example.com/ckeditor/）。
請(qǐng)注意，也可用其他標(biāo)記屬性。請(qǐng)參閱第一個(gè)完整的描述通用標(biāo)簽屬性的。
下面是我們的示例頁面的完整的源代碼：
<!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<html>
<body>
<form action="sample_posteddata.jsp" method="get">
<p>
<label for="editor1">Editor 1:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
</form>
<ckeditor:replace replace="editor1" basePath="/ckeditor/" />
</body>
</html>
更換所有的textarea元素
<ckeditor:replaceAll>標(biāo)簽用Editor實(shí)例取代文件中的所有textarea的元素。它可以選擇只更換一個(gè)CSS Class的值與CKEditor 的className屬性的值相等的textarea元素。
<ckeditor:replaceAll basePath="/ckeditor/" className="myclass"/>
這個(gè)標(biāo)簽用CKEditor實(shí)例替換所有的Class為MyClass的textarea元素。
創(chuàng)建一個(gè)CKEditor實(shí)例
<ckeditor:editor>標(biāo)簽創(chuàng)建一個(gè)CKEditor實(shí)例。
<ckeditor:editor textareaAttributes="<%=attr %>" basePath="/ckeditor/" editor="editor1" value="Type here" />
對(duì)于這個(gè)么有HTML textarea元素的標(biāo)簽，必須在當(dāng)前頁面上創(chuàng)建并立即用CKEditor實(shí)例取代。上面的代碼包含以下元素：
<%
Map<String, String> attr = new HashMap<String, String>();
attr.put("rows", "8");
attr.put("cols", "50");
%>常見的標(biāo)記屬性
下面的列表列出一些常用的標(biāo)簽屬性。
basePath
basePath -包含CKEditor主目錄的路徑。
例如，如果在CKEdito下r的http://example.com/3rdparty/ckeditor/中，basePath屬性應(yīng)設(shè)置為/ 3rdparty/ckeditor /。
config
將配置選項(xiàng)存儲(chǔ)在CKEditorConfig對(duì)象的。他們使用添加addConfigValue方法：
<%
CKEditorConfig settings = new CKEditorConfig();
settings.addConfigValue("width","500");
%>
<ckeditor:replace replace="editor1" basePath="/ckeditor/" config="<%=settings %>" />這種方法的第一個(gè)參數(shù)始終是一個(gè)字符串形式的配置選項(xiàng)的名稱。第二個(gè)可以使用String，Boolean，Number，List，或Map對(duì)象其中一個(gè)。無論使用何種類型，CKEditor將嘗試將每個(gè)值映射到一個(gè)可以接受的形式。例如，下面的代碼：
<%
CKEditorConfig settings = new CKEditorConfig();
settings.addConfigValue("toolbar","[[ 'Source', '-', 'Bold', 'Italic' ]]");
%>等同于
<%
CKEditorConfig settings = new CKEditorConfig();
List<List<String>> list = new ArrayList<List<String>>();
List<String> subList = new ArrayList<String>();
subList.add("Source");
subList.add("-");
subList.add("Bold");
subList.add("Italic");
list.add(subList);
settings.addConfigValue("toolbar", list);
%>
新的CKEditor 3.6工具欄語法
在CKEditor 3.6中，工具欄按鈕可以組織成組。每個(gè)組都有自己的名字和它包含的一組按鈕。這個(gè)新的定義可以表現(xiàn)在兩個(gè)方面。
下面的代碼：
<%
CKEditorConfig settings = new CKEditorConfig();
settings.addConfigValue("toolbar","[{name: 'document', items: ['Source', '-', 'NewPage']},
'/', {name: 'styles', items: ['Styles','Format']} ]");
%>
等同于：
<%
CKEditorConfig settings = new CKEditorConfig();
List<Object> mainList = new ArrayList<Object>();
HashMap<String, Object> toolbarSectionMap = new HashMap<String, Object>();
List<String> subList = new ArrayList<String>();
subList.add("Source");
subList.add("-");
subList.add("NewPage");
toolbarSectionMap.put("name", "document");
toolbarSectionMap.put("items", subList);
mainList.add(toolbarSectionMap);
mainList.add("/");
toolbarSectionMap = new HashMap<String, Object>();
subList = new ArrayList<String>();
subList.add("Styles");
subList.add("Format");
toolbarSectionMap.put("name", "styles");
toolbarSectionMap.put("items", subList);
mainList.add(toolbarSectionMap);
settings.addConfigValue("toolbar", mainList);
%>
timestamp
timestamp -此參數(shù)存儲(chǔ)一個(gè)特定的CKEditor的發(fā)行的值，這有助于避免瀏覽器緩存的問題，當(dāng)一個(gè)新的客戶端CKEditor版本上傳到服務(wù)器時(shí)，它的價(jià)值就體現(xiàn)了。
initialized
initialized - 設(shè)置這個(gè)值為true意味著ckeditor.js腳本已經(jīng)包含在頁面里面了，有沒有必要再次添加。另一方面，將它設(shè)置為false，意味著，ckeditor.js腳本應(yīng)該被添加到頁面中。
Event
Event -此參數(shù)存儲(chǔ)客戶端的事件監(jiān)聽器列表這是com.ckeditor.EventHandler類型。
例如：
首先，創(chuàng)建一個(gè)EventHandler實(shí)例。然后，您可以通過使用事件的addEvent方法，其中第一個(gè)參數(shù)是CKEditor事件關(guān)鍵字，第二個(gè)是JavaScript函數(shù)中的一個(gè)連接字符串。
<%
EventHandler eventHandler = new EventHandler();
eventHandler.addEvent("instanceReady","function (ev) { alert(\"Loaded: \" + ev.editor.name); }");
%>為了使用頁面上的事件，可以添加以下表達(dá)式：
<ckeditor:editor basePath="/ckeditor/" editor="editor1" events="<%=eventHandler %>"/>
globalEvents
globalEvents -此參數(shù)存儲(chǔ)著可被所有CKEditor實(shí)例使用的是客戶端事件監(jiān)聽器列表，是個(gè)GlobalEventHandler類型。
<%
GlobalEventHandler globalEventHandler = new GlobalEventHandler();
globalEventHandler.addEvent("dialogDefinition","function (ev) { alert(\"Loading dialog window: \" + ev.data.name); }");
%>
在一個(gè)Java類中設(shè)置配置選項(xiàng)
configuration, events和global events可以被創(chuàng)建在一個(gè)scriptlet實(shí)例，或在一個(gè)獨(dú)立的Java類。下面是一個(gè)例子：
package com.ckeditor.samples;
import java.util.ArrayList;
import java.util.List;
import com.ckeditor.CKEditorConfig;
import com.ckeditor.EventHandler;
import com.ckeditor.GlobalEventHandler;
public class ConfigurationHelper {
public static CKEditorConfig createConfig() {
CKEditorConfig config = new CKEditorConfig();
List<List<String>> list = new ArrayList<List<String>>();
List<String> subList = new ArrayList<String>();
subList.add("Source");
subList.add("-");
subList.add("Bold");
subList.add("Italic");
list.add(subList);
config.addConfigValue("toolbar", list);
config.addConfigValue("width","500");
return config;
}
public static EventHandler createEventHandlers() {
EventHandler handler = new EventHandler();
handler.addEvent("instanceReady","function (ev) { alert(\"Loaded: \" + ev.editor.name); }");
return handler;
}
public static GlobalEventHandler createGlobalEventHandlers() {
GlobalEventHandler handler = new GlobalEventHandler();
handler.addEvent("dialogDefinition","function (ev) { alert(\"Loading dialog window: \" + ev.data.name); }");
return handler;
}
}
要在JSP頁面上訪問這個(gè)類，你可以使用以下表達(dá)式：
<ckeditor:replace replace="editor1" basePath="ckeditor/"
config="<%= ConfigurationHelper.createConfig() %>"
events="<%= ConfigurationHelper.createEventHandlers() %>" />