前言:
在web開發中, 富文本的編輯器真心很重要. 有電商店鋪的打理, 新聞稿/博客文章/論壇帖子的編輯等等, 這種所見即所的編輯方式, 大大方便了非技術人員從事互利網相關的工作.
因為手頭有個小項目, 正好涉及到這塊, 所以決心好好研究一番. 中間也在ckeditor和ueditor之間徘徊了很久, 后來聽聞大名鼎鼎的微信公眾號也使用了ueditor, 因此最后倒向了ueditor.
本文將講解如何集成springmvc+ueditor的一些要點, 並做下簡單的展望.
ueditor簡介:
UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基於MIT協議，允許自由使用和修改代碼...
ueditor的官網地址如下: http://ueditor.baidu.com/website/index.html.
由於涉及到圖片上傳的部分, ueditor並非純javascript版本, 其出了php, java, asp等語言的支持版本.
源碼的下載鏈接: http://ueditor.baidu.com/website/download.html.
集成:
ueditor的java版提供的是jsp版本的, 還附帶了多個java依賴包. 以下是它的目錄結構.
配置文件config.json, 定義了支持的上傳文件/圖片的接口, 以及限制, 這個很重要.
而當前的web開發, 往往都是基於maven來組織構建web工程的. 同時由於springmvc版本的框架限制. 還是得有一方進行妥協, 或者說是修改.
在這個的前提下, 我們來進一步的地細化集成的工作.
• 依賴包采用maven的方式來組織構建
<!-- 上傳文件的支持 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.10</version>
</dependency>
<!-- org.json -->
<!--JSON is a light-weight, language independent, data interchange format. See http://www.JSON.org/-->
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20160212</version>
</dependency>
這樣就引入了文件上傳, 以及json序列化/反序列化處理的依賴包, ueditor-x.x.x.jar后面介紹.
• 資源訪問配置
單獨把ueditor放入到webapp目錄下, 因此在springmvc映射處理中需要排除.
<mvc:resources mapping="/ueditor/**" location="/ueditor/" />
• 引入ueditor-x.x.x的源碼
其實作為依賴包引入也可以, 只是引入源碼, 方便功能的修改和增強. 和前一種方法相比, 我更加推薦后者, 即引入源碼.
• 添加controller處理類
@Controller
@RequestMapping("/ued")
public class UEditorController {
@RequestMapping(value="/config")
public void config(HttpServletRequest request, HttpServletResponse response) {
response.setContentType("application/json");
String rootPath = request.getSession()
.getServletContext().getRealPath("/");
try {
String exec = new ActionEnter(request, rootPath).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
該controller類照搬了ueditor中原本的controller.jsp的處理代碼, 並改成springmvc的那種模式. 注意這邊的處理ueditor操作的url path為: /ued/config. 它完成了編輯器初始化, 以及文件/圖片的上傳處理.
• 配置config.json文件
config.json文件, 是定義文件/圖片上傳的接口, 以及各種限制(文件大小上限, MimeType類型框定).
具體配置的細節並不重要, 這邊最重要的是: 放在那里, 以及如何被讀取到?
放的位置問題, 可以自由點, 讓我們霸道一回, 就把config.json文件放置到webapp/conf目錄下吧, ^_^.
然后如何被讀取到呢? 原先ueditor的代碼, 默認指定了請求的Context Path. 原因還是在jsp版本中, 默認controller.jsp和config.json是同目錄.
private String getConfigPath () {
return this.parentPath + File.separator + ConfigManager.configFileName;
}
然而現狀已經發生變化了, 若不修改源碼會導致找不到配置文件config.json的錯誤. 因為尋找的路徑和和我們設定的webapp/conf有出路.
在類ConfigManager修改后為:
private String getConfigPath () {
return this.rootPath
+ File.separator + "conf"
+ File.separator + ConfigManager.configFileName;
}
這樣就可以了, 這也是為什么, 我推薦使用源碼引入的原因, 這也是唯一一處必須需要修改的地方.
• 修改ueditor.config.js
這也是最后一個步驟了, 我們需要制定編輯器訪問服務器的初始地址.
window.UEDITOR_CONFIG = {
//為編輯器實例添加一個路徑，這個不能被注釋
UEDITOR_HOME_URL: URL
// 服務器統一請求接口路徑
// 原先默認的
//, serverUrl: URL + "jsp/controller.jsp"
// 修改后的
, serverUrl: "/ued/config"
注: 修改serverUrl, 使得其指向自己的服務器地址.
這樣整個ueditor和springmvc的集成配置工作就做完了, ^_^. 感覺還是有點趕鴨子上架, 卻沒有具體講述原理.
驗證:
驗證過程, 相對比較簡單一些.
引入編輯框代碼:
<script src="/ueditor/ueditor.config.js"></script>
<script src="/ueditor/ueditor.all.min.js"></script>
<script src="/ueditor/lang/zh-cn/zh-cn.js"></script>
<script id="container" name="content" type="text/plain">這里寫你的初始化內容</script>
<script type="text/javascript">
var editor = UE.getEditor('container');
</script>
初始化后, 編輯框如下:
上傳圖片操作后, 編輯框如下:
OK, 非常的成功.
后記:
在查閱網上資料的時候, 也見過其他的集成方式的. 比如添加額外的servlet(path只匹配ueditor), 單獨處理ueditor的jsp. 這樣也能很好的做到集成, 也省心省力. 不過采用后者, 可以修改圖片上傳的模式, 比如放置到專門的圖片服務器. 這也是服務做大的一個必經之路.
后續有機會將講述下使用ueditor+圖片服務器的修改思路, 以及ueditor的定制工作. 希望自己能努力, good good study, day day up.
公眾號&游戲站點:
個人微信公眾號: 木目的H5游戲世界
個人游戲作品集站點(尚在建設中...): www.mmxfgame.com, 也可直接ip訪問: http://120.26.221.54/.