1. 程式人生 > >嵌入百度UEditor到JAVA+MAVEN+SpringMVC專案中

嵌入百度UEditor到JAVA+MAVEN+SpringMVC專案中

1、下載UEditor JSP版本

 http://ueditor.baidu.com/website/download.html

2、嵌入UEditor 到專案

1、解壓剛剛下載的ueditor1_4_3_3-utf8-jsp.zip後;

2、然後把資料夾名稱修改成ueditorutf8或者ueditor等容易辨識的資料夾名稱;

3、把修改好名字的資料夾嵌入到JAVA專案的webapp;

4、把ueditorutf8/jsp/lib資料夾下的JAR 複製加入到WEB-INF資料夾下的lib資料夾;

5、選中剛剛拷貝好的jar檔案,右鍵後Build Path--->add 到專案中;

{ueditorutf8/jsp/lib}

3、配置spring-mvc.xml的許可權與資源

1、設定靜態資源

	<mvc:resources mapping="/ueditorutf8/**" location="/ueditorutf8/**"
		cache-period="31556926" />

2、跳過許可權限制

如果沒有有設定攔截器,不用執行這一步

如果有則新增下列程式碼中的“不需要攔截的地址”節點

<span style="white-space:pre">	</span><!-- Session失效攔截 -->
	<mvc:interceptors>
		<!-- 定義攔截器 -->
		<mvc:interceptor>
			<!-- 匹配的是url路徑, 如果不配置或/**,將攔截所有的Controller -->
			<mvc:mapping path="/**" />
			<!-- 不需要攔截的地址 -->
			<mvc:exclude-mapping path="/ueditorutf8/**" />
		</mvc:interceptor>
	</mvc:interceptors>
4、新增JSP頁面
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 配置檔案 -->
<script type="text/javascript" src="/ueditorutf8/ueditor.config.js"></script>
<!-- 編輯器原始碼檔案 -->
<script type="text/javascript" src="/ueditorutf8/ueditor.all.js"></script>
<!-- 語言包檔案(建議手動載入語言包,避免在ie下,因為載入語言失敗導致編輯器載入失敗) -->
<script type="text/javascript" src="/ueditorutf8/lang/zh-cn/zh-cn.js"></script>
<title>Insert title here</title>
</head>
<body>
	<script id="container" name="content" type="text/plain">這裡寫你的初始化內容</script>
	<script type="text/javascript">
		var editor = UE.getEditor('container', {
			//預設的編輯區域高度  
			initialFrameHeight : 300,
			//預設的編輯區域寬度
			initialFrameWidth : 800
		})
	</script>
</body>
</html>

5、執行效果

程式的內容不屬於本部落格的內容,指定跳轉到上一步新增的JSP頁面

執行效果如下圖:

{執行效果}