系統需求
請注意，你至少需要JRE 1.4和Servlet的2.5/JSP 2.1使用整合。
安裝
將CKEditor添加到您的應用程序，有兩步的過程：
- 下載獨立CKEditor和放置在Web應用程序目錄。
- 下載并安裝服務器端集成（用于Java CKEditor）。
添加客戶端CKEditor
去官方的CKEditor下載頁面下載CKEditor的最新版本。將它放置在你的web應用程序的目錄里。
添加標簽庫（ckeditor-java-core）
當你想添加CKEditor庫，你可以選擇使用Maven或手動添加。
使用Maven2
如果您的應用程序使用Maven，你可以添加以下的依賴在你的pom.xml文件里：
<dependency>
<groupId>com.ckeditor</groupId>
<artifactId>ckeditor-java-core</artifactId>
<version>3.x.y</version>
</dependency>請注意，3.xy表示版本，例如<version> 3.6</version> 。當CKEditor版本添加到Maven中，將自動下載指定版本。
沒有Maven
如果你不使用Maven，你必須手動添加CKEditor jar庫。在CKEditor下載網站，下載的ckeditor-java-core- 3.xy* .jar文件，并把它放在在你的/ WEB-INF/lib目錄。
*請注意，3.xy表示一個CKEditor發布的版本。
在頁面上使用標簽
要在JSP頁面中使用<ckeditor>標簽，你需要在頁面中聲明CKEditor標記庫：
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
在以下的實例中CKEditor取代HTML中textarea的元素。除非你正在使用的<ckeditor:editor>標簽（將在后面介紹），你首先需要的是一個帶有HTMLtextarea的元素的JSP頁面。
更換所選擇的textarea元素
我們的目的是這樣的：讓我們假設有個頁面看起來像這樣：
<!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這個值，這是一個在樣例中應用的 web.xml映射，當頁面被提交，鏈接到servlet，輸出出CKEditor的內容。
接下來，你必須在頁面中添加CKEditor標簽（<ckeditor:replace>在這種情況下）。建議添加在底部</ BODY>標記之前：
<ckeditor:replace replace="editor1" basePath="/ckeditor/" />
請注意，上面的CKEditor標簽包含兩個屬性：
本文件的目的：假設CKEditor是在/ ckeditor /目錄（http://example.com/ckeditor/）。
請注意，也可用其他標記屬性。請參閱第一個完整的描述通用標簽屬性的。
下面是我們的示例頁面的完整的源代碼：
<!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>標簽用Editor實例取代文件中的所有textarea的元素。它可以選擇只更換一個CSS Class的值與CKEditor 的className屬性的值相等的textarea元素。
<ckeditor:replaceAll basePath="/ckeditor/" className="myclass"/>
這個標簽用CKEditor實例替換所有的Class為MyClass的textarea元素。
創建一個CKEditor實例
<ckeditor:editor>標簽創建一個CKEditor實例。
<ckeditor:editor textareaAttributes="<%=attr %>" basePath="/ckeditor/" editor="editor1" value="Type here" />
對于這個么有HTML textarea元素的標簽，必須在當前頁面上創建并立即用CKEditor實例取代。上面的代碼包含以下元素：
<%
Map<String, String> attr = new HashMap<String, String>();
attr.put("rows", "8");
attr.put("cols", "50");
%>常見的標記屬性
下面的列表列出一些常用的標簽屬性。
basePath
basePath -包含CKEditor主目錄的路徑。
例如，如果在CKEdito下r的http://example.com/3rdparty/ckeditor/中，basePath屬性應設置為/ 3rdparty/ckeditor /。
config
將配置選項存儲在CKEditorConfig對象的。他們使用添加addConfigValue方法：
<%
CKEditorConfig settings = new CKEditorConfig();
settings.addConfigValue("width","500");
%>
<ckeditor:replace replace="editor1" basePath="/ckeditor/" config="<%=settings %>" />這種方法的第一個參數始終是一個字符串形式的配置選項的名稱。第二個可以使用String，Boolean，Number，List，或Map對象其中一個。無論使用何種類型，CKEditor將嘗試將每個值映射到一個可以接受的形式。例如，下面的代碼：
<%
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中，工具欄按鈕可以組織成組。每個組都有自己的名字和它包含的一組按鈕。這個新的定義可以表現在兩個方面。
下面的代碼：
<%
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 -此參數存儲一個特定的CKEditor的發行的值，這有助于避免瀏覽器緩存的問題，當一個新的客戶端CKEditor版本上傳到服務器時，它的價值就體現了。
initialized
initialized - 設置這個值為true意味著ckeditor.js腳本已經包含在頁面里面了，有沒有必要再次添加。另一方面，將它設置為false，意味著，ckeditor.js腳本應該被添加到頁面中。
Event
Event -此參數存儲客戶端的事件監聽器列表這是com.ckeditor.EventHandler類型。
例如：
首先，創建一個EventHandler實例。然后，您可以通過使用事件的addEvent方法，其中第一個參數是CKEditor事件關鍵字，第二個是JavaScript函數中的一個連接字符串。
<%
EventHandler eventHandler = new EventHandler();
eventHandler.addEvent("instanceReady","function (ev) { alert(\"Loaded: \" + ev.editor.name); }");
%>為了使用頁面上的事件，可以添加以下表達式：
<ckeditor:editor basePath="/ckeditor/" editor="editor1" events="<%=eventHandler %>"/>
globalEvents
globalEvents -此參數存儲著可被所有CKEditor實例使用的是客戶端事件監聽器列表，是個GlobalEventHandler類型。
<%
GlobalEventHandler globalEventHandler = new GlobalEventHandler();
globalEventHandler.addEvent("dialogDefinition","function (ev) { alert(\"Loading dialog window: \" + ev.data.name); }");
%>
在一個Java類中設置配置選項
configuration, events和global events可以被創建在一個scriptlet實例，或在一個獨立的Java類。下面是一個例子：
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頁面上訪問這個類，你可以使用以下表達式：
<ckeditor:replace replace="editor1" basePath="ckeditor/"
config="<%= ConfigurationHelper.createConfig() %>"
events="<%= ConfigurationHelper.createEventHandlers() %>" />