使用表單不能編輯新聞格式，這篇博客會介紹如何使用ueditor富文本編輯器來編輯新聞。使用ueditor編輯的新聞存儲到數據庫中的是html代碼，并且帶有css樣式，在后臺可以像編輯word一樣編輯新聞。
## 一、導入ueditor文件
關于ueditor的配置請參考官網[JSP 使用說明](http://fex.baidu.com/ueditor/#server-jsp)和我的另外一篇博客[jsp項目中使用UEditor富文本編輯器](http://blog.csdn.net/napoay/article/details/47414851)。在WebContent目錄下新建ueditor文件夾，導入ueditor配置文件：?
## 二、修改newspost.jsp
* * *
~~~
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js">
</script>
<script type="text/javascript" charset="utf-8"
src="ueditor/lang/zh-cn/zh-cn.js"></script>
<title>新聞發布</title>
<script type="text/javascript">
function modifyContent() {
alert("works");
var content = document.getElementById("content");
var arr = [];
arr.push(UE.getEditor('editor').getContent());
content.value = arr;
}
</script>
<style type="text/css">
input {
height: 30px;
width: 300px;
border-radius: 5px;
}
</style>
</head>
<body>
<s:form action="news-save" method="post" onsubmit="modifyContent()">
<s:textfield name="title" label=" 新聞標題"></s:textfield>
<s:textfield name="author" label="新聞作者"></s:textfield>
<s:textfield name="source" label="新聞來源"></s:textfield>
<s:textfield name="posttime" label="發布時間"></s:textfield>
<s:textarea style="display:none" rows="15" cols="50" name="content"
id="content"></s:textarea>
<tr>
<td colspan="2">
<div>
<p>新聞內容:</p>
<script id="editor" type="text/plain"
style="width: 1024px; height: 500px;"></script>
</div>
</td>
</tr>
<s:submit value="錄入"></s:submit>
</s:form>
<!-- <div id="btns">
<div>
<button onclick="getAllHtml()">獲得整個html的內容</button>
<button onclick="getContent()">獲得內容</button>
<button onclick="setContent()">寫入內容</button>
<button onclick="setContent(true)">追加內容</button>
<button onclick="getContentTxt()">獲得純文本</button>
<button onclick="getPlainTxt()">獲得帶格式的純文本</button>
<button onclick="hasContent()">判斷是否有內容</button>
<button onclick="setFocus()">使編輯器獲得焦點</button>
<button onmousedown="isFocus(event)">編輯器是否獲得焦點</button>
<button onmousedown="setblur(event)" >編輯器失去焦點</button>
</div>
<div>
<button onclick="getText()">獲得當前選中的文本</button>
<button onclick="insertHtml()">插入給定的內容</button>
<button id="enable" onclick="setEnabled()">可以編輯</button>
<button onclick="setDisabled()">不可編輯</button>
<button onclick=" UE.getEditor('editor').setHide()">隱藏編輯器</button>
<button onclick=" UE.getEditor('editor').setShow()">顯示編輯器</button>
<button onclick=" UE.getEditor('editor').setHeight(300)">設置高度為300默認關閉了自動長高</button>
</div>
<div>
<button onclick="getLocalData()" >獲取草稿箱內容</button>
<button onclick="clearLocalData()" >清空草稿箱</button>
</div>
</div>
<div>
<button onclick="createEditor()">
創建編輯器</button>
<button onclick="deleteEditor()">
刪除編輯器</button>
</div> -->
<script type="text/javascript">
//實例化編輯器
//建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
var ue = UE.getEditor('editor');
function isFocus(e) {
alert(UE.getEditor('editor').isFocus());
UE.dom.domUtils.preventDefault(e)
}
function setblur(e) {
UE.getEditor('editor').blur();
UE.dom.domUtils.preventDefault(e)
}
function insertHtml() {
var value = prompt('插入html代碼', '');
UE.getEditor('editor').execCommand('insertHtml', value)
}
function createEditor() {
enableBtn();
UE.getEditor('editor');
}
function getAllHtml() {
alert(UE.getEditor('editor').getAllHtml())
}
function getContent() {
var arr = [];
arr.push(UE.getEditor('editor').getContent());
alert(arr.join("\n"));
}
function getPlainTxt() {
var arr = [];
arr.push("使用editor.getPlainTxt()方法可以獲得編輯器的帶格式的純文本內容");
arr.push("內容為：");
arr.push(UE.getEditor('editor').getPlainTxt());
alert(arr.join('\n'))
}
function setContent(isAppendTo) {
var arr = [];
arr.push("使用editor.setContent('歡迎使用ueditor')方法可以設置編輯器的內容");
UE.getEditor('editor').setContent('歡迎使用ueditor', isAppendTo);
alert(arr.join("\n"));
}
function setDisabled() {
UE.getEditor('editor').setDisabled('fullscreen');
disableBtn("enable");
}
function setEnabled() {
UE.getEditor('editor').setEnabled();
enableBtn();
}
function getText() {
//當你點擊按鈕時編輯區域已經失去了焦點，如果直接用getText將不會得到內容，所以要在選回來，然后取得內容
var range = UE.getEditor('editor').selection.getRange();
range.select();
var txt = UE.getEditor('editor').selection.getText();
alert(txt)
}
function getContentTxt() {
var arr = [];
arr.push("使用editor.getContentTxt()方法可以獲得編輯器的純文本內容");
arr.push("編輯器的純文本內容為：");
arr.push(UE.getEditor('editor').getContentTxt());
alert(arr.join("\n"));
}
function hasContent() {
var arr = [];
arr.push("使用editor.hasContents()方法判斷編輯器里是否有內容");
arr.push("判斷結果為：");
arr.push(UE.getEditor('editor').hasContents());
alert(arr.join("\n"));
}
function setFocus() {
UE.getEditor('editor').focus();
}
function deleteEditor() {
disableBtn();
UE.getEditor('editor').destroy();
}
function disableBtn(str) {
var div = document.getElementById('btns');
var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
for (var i = 0, btn; btn = btns[i++];) {
if (btn.id == str) {
UE.dom.domUtils.removeAttributes(btn, [ "disabled" ]);
} else {
btn.setAttribute("disabled", "true");
}
}
}
function enableBtn() {
var div = document.getElementById('btns');
var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
for (var i = 0, btn; btn = btns[i++];) {
UE.dom.domUtils.removeAttributes(btn, [ "disabled" ]);
}
}
function getLocalData() {
alert(UE.getEditor('editor').execCommand("getlocaldata"));
}
function clearLocalData() {
UE.getEditor('editor').execCommand("clearlocaldata");
alert("已清空草稿箱")
}
</script>
</body>
</html>
~~~
## 三、使用自定義攔截器
* * *
新建cn.ac.ucas.filter,新建MyStrutsFilter類，繼承StrutsPrepareAndExecuteFilter類：
~~~
package cn.ac.ucas.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 ("/sshnews/ueditor/jsp/controller.jsp".equals(url)) { //注意路徑
System.out.println("使用自定義的過濾器");
chain.doFilter(req, res);
}else{
System.out.println("使用默認的過濾器");
super.doFilter(req, res, chain);
}
}
}
~~~
## 四、修改ue配置文件
* * *
打開ueditor/jsp/config.json，imageUrlPrefix屬性值為工程名：
~~~
"imageUrlPrefix": "/sshnews", /* 圖片訪問路徑前綴 */
~~~
## 五、測試
* * *
編輯一篇新聞：?
新聞顯示結果：?
查看數據庫可以看到News的content屬性的值是具有css樣式的html代碼。?
?
總結：?
1.這篇博客配置了ueditor，把ueditor編輯的新聞內容使用js復制給content表單存入數據庫?
2.自定義攔截器實現圖片上傳?
3.關于ueditor的使用可以參考官方文檔進行配置。
- 前言
- [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大數類