CKEditor for java 整合指南
阿新 • • 發佈:2019-01-04
環境要求
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>
替換指定的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例項,