?

springmvc學習筆記--ueditor和springmvc的集成

?

前言:
　　在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的方式來組織構建

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<!-- 上傳文件的支持 --> <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映射處理中需要排除.

1	<mvc:resources mapping="/ueditor/**" location="/ueditor/" />

? 引入ueditor-x.x.x的源碼
其實作為依賴包引入也可以, 只是引入源碼, 方便功能的修改和增強. 和前一種方法相比, 我更加推薦后者, 即引入源碼.

　　

? 添加controller處理類

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

@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是同目錄.

1 2 3

private String getConfigPath () { ????return this.parentPath + File.separator + ConfigManager.configFileName; }

然而現狀已經發生變化了, 若不修改源碼會導致找不到配置文件config.json的錯誤. 因為尋找的路徑和和我們設定的webapp/conf有出路.
在類ConfigManager修改后為:

1 2 3 4 5

private String getConfigPath () { ????return this.rootPath ????????????+ File.separator + "conf" ????????????+ File.separator + ConfigManager.configFileName; }

這樣就可以了, 這也是為什么, 我推薦使用源碼引入的原因, 這也是唯一一處必須需要修改的地方.
? 修改ueditor.config.js
這也是最后一個步驟了, 我們需要制定編輯器訪問服務器的初始地址.

1 2 3 4 5 6 7 8 9 10

window.UEDITOR_CONFIG = { ????//為編輯器實例添加一個路徑，這個不能被注釋 ????UEDITOR_HOME_URL: URL ????// 服務器統一請求接口路徑 ????//????? 原先默認的 ????//, serverUrl: URL + "jsp/controller.jsp" ????//????? 修改后的 ????, serverUrl: "/ued/config"

注: 修改serverUrl, 使得其指向自己的服務器地址.
這樣整個ueditor和springmvc的集成配置工作就做完了, ^_^. 感覺還是有點趕鴨子上架, 卻沒有具體講述原理.

驗證:
驗證過程, 相對比較簡單一些.
引入編輯框代碼:

1 2 3 4 5 6 7 8

<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/. springmvc學習筆記--ueditor和springmvc的集成 [Springmvc xuéxí bǐjì--ueditor hé springmvc de jíchéng] Springmvc study notes - integration of ueditor and springmvc

轉載于:https://www.cnblogs.com/hfultrastrong/p/10767429.html

總結

以上是生活随笔為你收集整理的springmvc学习笔记--ueditor和springmvc的集成的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。