SSM配置Ueditor實現圖片的上傳
阿新 • • 發佈：2019-01-04
最近想學點新的東西，於是琢磨著用SSM整合Ueditor來實現圖片的上傳！至於為什麼選Ueditor，道理你懂得啦！百度開發的而且開源，能自定義自己想要的內容，版本更新什麼的也比較勤快！接下來我準備記錄下探索的過程！
1.下載
你可以到上面的地址下載Ueditor外掛，選擇UTF-8編碼的Jsp版本。
2.構建工程
新建一個Maven工程，首先把ssm框架的基本的東西搭建好，如果你不清楚ssm基本框架，我部落格裡面有詳細的搭建過程可以參考！在這我就直接上圖了！
3.初始化編輯器
我在進行這一步的時候遇到了很多問題，希望你仔細看，避免走太多彎路！
下面是我的index.jsp頁面的程式碼，js的引入順序是有要求的要不然會報錯！
這裡就完成Ueditor的初始化建立了，但是在你的頁面中卻始終無法出現富文字編輯器的編輯框，這是為什麼呢？<%@ 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> <% String rootPath = request.getContextPath(); %> <head> <title>完整demo</title> <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> <!--建議手動加在語言，避免在ie下有時因為載入語言失敗導致編輯器載入失敗--> <!--這裡載入的語言檔案會覆蓋你在配置專案裡新增的語言型別，比如你在配置專案裡配置的是英文，這裡載入的中文，那最後就是中文--> <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script> </head> <style type="text/css"> div{ width:100%; } </style> <body> <h1>完整demo</h1> <script type="text/plain" id="myEditor"> </script> <script type="text/javascript"> var ue = UE.getEditor('myEditor'); </script> </body> </html>
是這樣的，假如你在web.xml配置的攔截內容如下
<servlet-mapping>
<servlet-name>SpringMVCDemo</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping> 不出意外的話，現在你已經能在index.jsp頁面上看到富文字編輯器了，但是此時的上傳圖片功能還是無法使用，你還得進行如下的配置！<!--靜態資源攔截問題 --> <mvc:resources location="/ueditor/" mapping="/ueditor/**"/>
4.實現圖片上傳功能
在這我也就不一步一步跟著原始碼來介紹業務邏輯的實現過程了，如果你希望詳細瞭解的話，去下面這個大牛的部落格看看詳細實現過程！直接上程式碼，找到config.json檔案
"imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
"imageFieldName": "upfile", /* 提交的圖片表單名稱 */
"imageMaxSize": 2048000, /* 上傳大小限制，單位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
"imageCompressEnable": true, /* 是否壓縮圖片,預設是true */
"imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
"imageInsertAlign": "none", /* 插入的圖片浮動方式 */
"imageUrlPrefix": "http://localhost:8080/SpringMVCDemo", /* 圖片訪問路徑字首 */
"imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
/* {filename} 會替換成原檔名,配置這項需要注意中文亂碼問題 */
/* {rand:6} 會替換成隨機數,後面的數字是隨機數的位數 */
/* {time} 會替換成時間戳 */
/* {yyyy} 會替換成四位年份 */
/* {yy} 會替換成兩位年份 */
/* {mm} 會替換成兩位月份 */
/* {dd} 會替換成兩位日期 */
/* {hh} 會替換成兩位小時 */
/* {ii} 會替換成兩位分鐘 */
/* {ss} 會替換成兩位秒 */
/* 非法字元 \ : * ? " < > | */
/* 具請體看線上文件: fex.baidu.com/ueditor/#use-format_upload_filename */5.截圖
你可以在如下的目錄中找到上傳的圖片：
可是這樣真的就夠了麼？顯然，在實際的開發過程中，我們是要將圖片的資訊存到資料庫進行管理的，因此這樣的實現遠遠不夠，由於篇幅原因請看下一篇！點選進入SSM配置圖片上傳<二>