1. 程式人生 > >CKEditor for java 整合指南

CKEditor for java 整合指南

 

環境要求

 

JRE 1.4 、Servlet 2.5、JSP 2.1

 

安裝

 

 

新增CKEditor到專案需要兩步:

  1. 下載CKEditor放在專案web目錄下,
  2. 下載並安裝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標籤(這裡我們使用<ckeditor:replace>)到頁面,建議新增在頁面的最後,</body>標籤之前。

 

<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例項,