ueditor和springmvc整合

阿新 • • 發佈：2019-01-12

前言:
　　在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>   <dependency> <groupId>org.json</groupId> <artifactId>json</artifactId> <version>20160212</version> </dependency>

    這樣就引入了檔案上傳, 以及json序列化/反序列化處理的依賴包, ueditor-x.x.x.jar後面介紹.
    • 資源訪問配置
    單獨把ueditor放入到webapp目錄下, 因此在springmvc對映處理中需要排除.

1	`<mvc:resourcesmapping="/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") publicvoid 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 () { returnthis.parentPath + File.separator + ConfigManager.configFileName; }

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

1 2 3 4 5 private String getConfigPath () { returnthis.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.

ueditor和springmvc整合

ueditor和springmvc整合

Swagger2和springMVC整合測試

03、Swagger2和Springmvc整合詳細記錄（爬坑記錄）

Java分散式跟蹤系統Zipkin（五）：Brave原始碼分析-Brave和SpringMVC整合

spring和springmvc整合案例

springmvc和json整合配置方法

SpringMvc和Mybatis整合總結

Spring+SpringMVC+MyBatis深入學習及搭建(十四)——SpringMVC和MyBatis整合

Dubbo與Zookeeper、SpringMVC整合和使用

SpringMvc基礎知識(二) springmvc和mybatis整合

SpringMVC系列（十五）Spring MVC與Spring整合時實例被創建兩次的解決方案以及Spring 的 IOC 容器和 SpringMVC 的 IOC 容器的關系

SpringMVC學習(四)——Spring、MyBatis和SpringMVC的整合

spring、springmvc和mybatis整合（java config方式）

SpringMVC整合Shiro和Swagger產生的路徑過濾問題

Quartz學習——SSMM(Spring+SpringMVC+Mybatis+Mysql)和Quartz整合詳解（四）

RabbitMQ與SpringMVC整合並實現傳送訊息和接收訊息（持久化）方案二

【Java】SpringMVC整合mybatis 連線池c3p0和druid分別實驗

Dubbo與Zookeeper、SpringMVC整合和使用（負載均衡、容錯）

springmvc整合jsp和freemark兩個模板引擎

UEditor之——與SpringMVC整合

ueditor和springmvc整合

相關推薦