環境要求
JRE 1.4 、Servlet 2.5、JSP 2.1
安裝
添加CKEditor到項目需要兩步:
- 下載CKEditor放在項目web目錄下,
- 下載並安裝CKEditor的集成包(CKEditor for Java).
添加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.x.y表示CKEditor發佈的版本,比如3.5.2
不使用Maven
如果不使用maven,請到 這裏 下載jar包,放到您的/WEB-INF/lib/目錄下
在頁面上使用標籤
在jsp頁面上使用<ckeditor>
標籤,需要指定標籤庫地址(uri),如下:
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
CKEditor使用他自身的實例來替換html的textarea元素,除非你使用<ckeditor:editor>
標籤(稍後介紹),首先你需要jsp頁面的textarea元素。
替換指定的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>
一個html頁面的form表單說明,不多做翻譯。
接下來你需要添加一個CKEditor標籤(這裏我們使用
)到頁面,建議添加在頁面的最後,</body>標籤之前。<ckeditor:replace>
<ckeditor:replace replace="editor1" basePath="/ckeditor/" />
ckeditor:replace replace="editor1" basePath="/ckeditor/" />
上面的CKEditor標籤包含兩個屬性
replace
– 指向html中textarea的id或name,被指向的textarea會被替換爲CKEditor的實例。basePath
– 包含CKEditor的路徑
在這篇文章中,假設CKEditor放在/ckeditor/
目錄(http://example.com/ckeditor/
)
請注意,其他標記屬性也可用(textarea的標記屬性,不一定id或name)。請參考下面的通用標籤屬性部分完整的描述。
下面是示例的完整源代碼:
<!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>
<%@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>
替換所有文本元素
< ckeditor:replaceAll >標籤替換所有可用的textarea爲CKEditor實例,