在網頁中新增富文字編輯器——UEditor的使用
今天專案中接到了一個新的需求，原本的功能是jsp頁面中的 新聞釋出+附件上傳，可是客戶說要改成釋出新聞的時候可以 自由排版+插入圖片+附件上傳 的功能。原來的功能是由一個文字域來實現的，然後在controller接收到文字域的內容時，用html標籤替換所有的空格和回車符。雖然可以實現簡單的排版樣式，但是插入圖片還是太難實現了。所以我就在網上查詢，終於找到了一個合適的開源專案，那就是由百度公司開發的——UEditor。
UEditor的功能非常強大，幾乎是實現了一個富文字編輯器所有的功能，而且可以高度定製，可以自由選則留下或者去掉哪些功能。甚至還可以在裡面新增自己的圖示來實現自己定義的一些功能。由於我在使用過程中踩過一些坑，所以就記錄一下。
本專案使用的是SSM框架，伺服器是tomcat，前端頁面是 .jsp 。如果你也是使用同樣的框架或者類似的框架，那麼就要注意了，因為在SSM框架中會有一些特殊的配置。否則，將會影響使用，搞得你懷疑人生，而且網上還找不到答案（別問我是怎麼知道的）。接下來介紹一下我的使用過程：
1、首先需要做的就是下載 UEditor 所需要的JAR包與其他的js檔案，這些東西百度的開發團隊已經按分類打包好了，我們需要做的就是選擇並下載：
我做的是jsp頁面中的開發，而且選擇了UFT-8編碼方式的版本，點選下載之後就可以直接下載了。
2.下載下來的檔案是一個壓縮包，接著在你的工程根目錄下建立一個 ueditor 資料夾，把之前下載下來的檔案解壓，複製到建立好的資料夾內。
這是我最終的目錄，如果你的根目錄是 WEBROOT/ ，也是一樣的。
3.接下來要做的就是對於工程的配置了。我的框架採用的是 Spring mvc + Spring + Mybaties + maven ，如果你採用其他的框架，但是思想類似的，也可以參考以下的配置方式，因為針對框架的配置雖然很少，但是非常關鍵，需要特別主要。
（1）、首先要做的，便是在 WEB-INF/web.xml 檔案中配置靜態檔案引入，因為如果要使用這個功能，就必須能夠直接訪問到 .jpg 、.js、.css 等檔案，而一般的預設配置是攔截所有的請求，所以需要把這些檔案格式配置靜態訪問。以下是我的 web.xml 中關於這個的配置
如果你沒有配置這個，那麼你在訪問的時候會有錯誤提示,例如我如果把 .html的配置刪掉而直接訪問的話，就會有這個提示：
[org.springframework.web.servlet.PageNotFound] - No mapping found for HTTP request with URI [/huarun/ueditor/index.html] in DispatcherServlet with name 'SpringMVC'
所以如果你也遇到這個錯誤，那麼就需要注意這個問題了。
（2）接著，需要把下載下來的JAR包檔案匯入到你的專案lib中，找到後直接copy即可。所有的都需要複製過去。
（3）配置完成之後，你可以嘗試訪問 http://localhost:8080/你的專案名/ueditor/index.html 這個地址，把漢字部分替換為你的專案名，如果顯示以下的頁面，那麼就說明你的基本配置已經完畢了，可以在頁面中使用了。
如果你發現圖示不全，或者是隻顯示部分功能，但是空白部分可以點選，原因有可能就是你沒有配置靜態引入，相關圖示無法載入。
（4）接下來，就需要編輯配置檔案了
配置資源所在根路徑，配置檔案路徑 /ueditor/ueditor.config.js ：
配置圖片上傳的路徑，配置檔案的路徑為 /ueditor/jsp/config.json
（5）接著就可以按照需求在相關頁面中引入這個功能了，首先你需要在原本需要文字編輯的地方新增一個文字域標籤，命名之後在js程式碼中替換。在編寫js程式碼之前，需要先引入以下的js檔案：
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script> <script type="text/javascript">
var ue = UE.getEditor('content');
</script>把文字域標籤的程式碼新增到你需要的地方即可
<textarea name="content" id="content" style="width: 800px; height: 400px; margin: 0 auto;"></textarea>全部頁面程式碼為：
<%@ 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=UTF-8">
<title>新增文章</title>
</head>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript">
var ue = UE.getEditor('content');
</script>
<body>
<form action="${pageContext.request.contextPath }/article/insertArticle" method="post" enctype="multipart/form-data">
<table>
<tr>
<td>文章標題</td><td><input type="text" name="headline"></td>
</tr>
<tr>
<td>文章屬性id</td><td><input type="text" name="propertyId"></td>
</tr>
<tr>
<td>文章內容</td><td><textarea name="content" id="content" style="width: 800px; height: 400px; margin: 0 auto;"></textarea></td>
</tr>
<tr>
<td>新增附件</td><td><input type="file" name="file"></td>
</tr>
<tr>
<td><input type="submit" value="提交"></td>
</tr>
</table>
</form>
</body>
</html>最終效果是這樣的：
以上所有的步驟完成之後，就可以在後端控制器接收文字域中的內容了，用一個String接收，可以選擇直接儲存到資料庫中或者用io流寫到一個檔案中。到前端顯示的時候，直接在頁面中顯示這個字串就可以展示出所有的效果了。