## 需求
- ? 新聞中心模塊需要實現新聞瀏覽功能.
- ?管理員能在后臺編輯新聞、發布新聞.
- ?能夠實現圖文混排.
## 解決方案
? ? ? ? 使用在線HTML編輯器實現傻瓜式編輯，編輯完成后存儲html代碼到數據庫，動態讀取數據庫實現前臺展示.HTML編輯器選用Ueditor[【官網】.](http://ueditor.baidu.com/website/index.html)
## UEditor簡介
- Ueditor是百度前端團隊研發富文本編輯器，可以像編輯word一樣編輯html實現所見即所得的效果.
- 基于MIT開源協議，功能強大，允許自由使用和修改。
## 安裝配置
? ? ? 1.下載UEditor【1.4.3 JSP版本】.下載地址:[http://ueditor.baidu.com/website/download.html](http://ueditor.baidu.com/website/download.html)?
? ? ? ? ?解壓之后的文件的目錄是這樣的：
? ? ? ? ? ? ? ? ? ??
? ?2.Eclipse中新建動態web項目.
? ? ? 打開eclipse，file->NEW->Other->Web->Dynamic Web Project->next. Project name自定義,Dynamic web module version選擇 2.5.Finish。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
3.在WebContent目錄下新建文件夾ueditor1_4_3,導入UEditor下載的ueditor配置文件到該文件下.
全選
?4. ?拷貝ueditor1_4_3/jsp/lib下的庫文件到WEN-INF/lib文件夾下.?
?5. 添加項目到tomcat中并啟動,瀏覽器中輸入以下URL
? ? http://localhost:8080/uetest/ueditor1_4_3/jsp/controller.jsp?action=config
? ? 工程目錄和測試成功后的的內容如下
? ? ?
6.單擊WebContent/ueditor1_4_3/index.html，右鍵->Run As->Run On Server.可以看到完整版demo實例.
7.編輯一篇新聞:
8.點擊編輯框左上角的"HTML"圖標，查看編輯內容的HTML源碼
?9.點擊"獲得內容"按鈕,js會輸出編輯框內的html代碼:
說明編輯的內容會自動轉換為HTML，而且HTML代碼片段是可以輸出的，那么如何獲取編輯內容?
1.在WebContent目錄下新建news.jsp.
2.打開index.jsp,找到下面這幾行代碼:
? ?
3.增加表單,action="news.jsp"
? ?
4.在index.jsp的編輯框中隨便輸入一串字符，提交.
? ?
5.查看瀏覽器地址欄變化，可以看到編輯表單的name為editorValue
6.將form表單傳輸數據方法改為post.刪去暫時用不到的JS方法和button,在news.jsp中使用getParameter方法接收editorVaule值，并用jsp代碼片段展示新聞編輯內容.
index.jsp
~~~
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>完整demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" charset="utf-8" src="ueditor1_4_3/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor1_4_3/ueditor.all.min.js"> </script>
<!--建議手動加在語言，避免在ie下有時因為加載語言失敗導致編輯器加載失敗-->
<!--這里加載的語言文件會覆蓋你在配置項目里添加的語言類型，比如你在配置項目里配置的是英文，這里加載的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="ueditor1_4_3/lang/zh-cn/zh-cn.js"></script>
<style type="text/css">
div{
width:100%;
}
</style>
</head>
<body>
<div>
<form action="news.jsp" method="post" target="_blank">
<h1>完整demo</h1>
<script id="editor" type="text/plain" style="width:1024px;height:500px;">
</script>
<input type="submit" value="編輯完成">
</form>
</div>
<script type="text/javascript">
//實例化編輯器
//建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
var ue = UE.getEditor('editor');
function getContent() {
var arr = [];
arr.push("使用editor.getContent()方法可以獲得編輯器的內容");
arr.push("內容為：");
arr.push(UE.getEditor('editor').getContent());
alert(arr.join("\n"));
}
</script>
</body>
</html>
~~~
news.jsp
~~~
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>news</title>
<style type="text/css">
.news {
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
String newsbody = request.getParameter("editorValue");
%>
<div class="news">
<%=newsbody%>
</div>
</body>
</html>
~~~
7.編輯新聞:
8.點擊編輯完成，轉至news.jsp，效果如下.
至此可見ueditor配置使用非常簡單，對編輯內容進行處理只需要接收editorVaule值即可進行進行下一步處理.
## 配置圖片上傳路徑
? 要實現圖文混排需要對配置文件進行修改.
?1.打開/uetest/WebContent/ueditor1_4_3/jsp/config.json,imageUrlPrefix值為"/工程名",注意要加上/.imagePathFormat路徑要和工程目錄配置一致.
?
2.打開ueditor.config.js,修改window.UEDITOR_HOME_URL為符合項目訪問的路徑。
??
3.config.json文件中有提交的圖片圖片表單名稱設置, ?“ ?"imageFieldName": "upfile", /* 提交的圖片表單名稱 */”,上傳圖片的表單屬性中加入一行name="upfile",測試:
## Struts框架下圖片上傳配置
? ? 在struts框架下按照上面的配置圖片上傳仍然不成功，原因是配置struts時默認攔截器把所有請求都做了處理。
解決方法就是自定義攔截器,步驟
1.創建攔截器類
~~~
package com.test.filter;
import java.io.IOException;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;
public class MyStrutsFilter extends StrutsPrepareAndExecuteFilter{
public void doFilter(ServletRequest req, ServletResponse res,FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
//不過濾的url
String url = request.getRequestURI();
System.out.println(url);
if ("/uetest/ueditor1_4_3/jsp/controller.jsp".equals(url)) { //注意路徑
System.out.println("使用自定義的過濾器");
chain.doFilter(req, res);
}else{
System.out.println("使用默認的過濾器");
super.doFilter(req, res, chain);
}
}
}
~~~
2.修改web.xml，把默認攔截器修改為自定義攔截器
~~~
<filter>
<filter-name>struts2</filter-name>
<filter-class>com.test.filter.MyStrutsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>struts2</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
~~~
## 總結
- ? UE功能強大,配置比較簡單
- ? 圖片上傳要注意配置文件中的路徑，最終上傳到服務器的圖片文件默認是以時間戳命名文件夾保存圖片的.
- ?在struts中配置UE需要自定義攔截器
程序下載地址:
[http://download.csdn.net/detail/napoay/8998779](http://download.csdn.net/detail/napoay/8998779)
? ??
??
- 前言
- [J2EE]java web項目中調用word轉html命令行工具
- [J2EE]jsp項目中使用UEditor富文本編輯器
- [J2EE]The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
- [j2ee]Eclipse搭建SSH開發框架
- Could not open Hibernate Session for transaction
- class org.springframework.web.context.ContextLoaderListener
- [java01]Java基本數據類型
- [java02]運算符
- jsp、javabean學生信息管理系統
- [java03]java字符串
- [ssh新聞發布系統一]搭建開發環境
- [ssh新聞發布系統二] 讀取新聞
- [ssh新聞發布系統三]存儲新聞
- [ssh新聞發布系統四]使用富文本編輯器發布新聞
- [ssh新聞發布系統五]刪除新聞
- struts2 helloworld
- struts請求走向流程
- [java04]java大數類