KindEditor結合ssm框架使用
介紹
最近專案中要用的檔案上傳的元件與富文字編輯器的使用。一直用的富文字編輯器是金山的KindEditor和百度的Ueditor。之前沒有負責處理上傳的業務邏輯，只是用的kindEditor的預設uploadjson.jsp.由於業務的變動。需要自己手動處理一下上傳的服務端。廢話不多說，今天先來介紹一下KindEditor的使用。之後會把Ueditor使用補上。
使用kindEditor的好處
srping-mvc給我們提供了檔案上傳的api，如果一個專案中只有一個檔案上傳的模組，參考spring-mvc 官方文件，可以在原始的from 標籤中完成文件上傳。但如果多個模組中都有檔案上傳的需要的話，每次都要負責處理檔案上傳的業務。程式顯得臃腫，並且程式碼得不到重用。使用editor的思路是：使用前端js完成非同步檔案上傳。等到檔案上傳結束後，將檔案的儲存路徑利用json的格式輸出到前端頁面。前端將表單提交即可。
程式演示
點選檔案上傳按鈕，彈出檔案選擇框。
點選上傳後，開始上傳檔案。當檔案上傳完成後，會將檔案的儲存路徑顯示到文字框中。效果如下：
最後將該表單提交即可。如此便完成了表單提交與檔案上傳業務的程式碼隔離。
環境介紹
首先用kindeditor的官網中下載最新版的kindeditor版本，解壓，匯出到專案中去。在這裡我將kindeditor進行了精簡。如下圖：
jsp介面程式碼如下：
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 匯入css --> <link rel="stylesheet" href="/upload/kindeditor/themes/default/default.css" /> <!-- 匯入核心js --> <script src="/upload/kindeditor/kindeditor.js"></script> <!-- 匯入語言包 --> <script src="/upload/kindeditor/lang/zh_CN.js"></script> <script src="/upload/kindeditor/jquery.js"></script> <script type="text/javascript"> //初始化kindeditor元件 KindEditor.ready(function(K) { var editor = K.editor({ allowFileManager : true, uploadJson : '/upload/uploadController',//後臺檔案上傳處理的路徑 filePostName : 'file'//檔案的欄位名，一會看到後臺程式碼時會解釋怎麼使用 }); K('#image3').click(//為檔案上傳按鈕繫結事件 function() { editor.loadPlugin('image', function() {//載入檔案上傳外掛 editor.plugin.imageDialog({ showRemote : false, imageUrl : K('#url3').val(),//獲取本地檔案路徑:如:c:/doc/ccc.png檔案 clickFn : function(url, title, width, height, border, align) {//當上傳檔案成功時的回撥函式 K('#url3').val(url);//將路徑回顯 editor.hideDialog();//隱藏檔案上傳kuang } }); }); }); }); </script> </head> <body> <p> <input type="text" id="url3" value="" /> <input type="button" id="image3" value="選擇檔案" /> </p> </body> </html>
檔案上傳後臺程式碼：
@RequestMapping(value = "/uploadController", produces = { "application/json;charset=UTF-8" }) @ResponseBody public Map<String, Object> upload(@RequestParam("file") MultipartFile file) { // 獲取檔案原始名稱 :如：DSC_0058.JPG String originalFilename = file.getOriginalFilename(); /** * 在這裡可以負責處理檔案上傳的邏輯 如：為檔案重新命名，寫到自定義的路徑或者上傳到ftp伺服器等。 處理完檔案上傳後要通知前臺上傳的結果 * 成功時json串： { "error" : 0, "url" : "http://www.example.com/path/to/file.ext"} * 失敗時json串： { "error" : 1, "message" : "錯誤資訊" } * 這裡我用map封裝了一下如下 */ Map<String, Object> result = new HashMap<>(); result.put("error", 0); result.put("message", "上傳成功"); result.put("url", "/upload/kindeditor/editor.gif"); return result; }
至此，檔案單檔案上傳完成。
富文字編輯器的使用
執行效果如下：
涉及到檔案上傳的有：
從左到右依次為：單檔案上傳，多檔案上傳，flash上傳，視訊上傳，檔案上傳等。 利用此外掛，以及我們剛才的後臺程式碼。可以把所有檔案上傳的業務交給一個controller來空中。做到一次編寫，多次使用。
執行效果如下（顯示多圖片上傳）
檔案選擇：
點選上傳：
結果：
由於後臺我們沒有處理真正的業務上傳邏輯，所以本次範圍的是一個靜態頁面：
result.put("url", "/upload/kindeditor/editor.gif");
也就說 無論上傳什麼，返回的都是同一張圖片 哈哈。
下面粘上前臺程式碼：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="/upload/kindeditor/themes/default/default.css" />
<script src="/upload/kindeditor/kindeditor.js"></script>
<script src="/upload/kindeditor/lang/zh_CN.js"></script>
<script src="/upload/kindeditor/jquery.js"></script>
<script>
KindEditor.ready(function(K) {//初始化editor
window.editor = K.create('#editor_id',{//建立 editor
uploadJson:'/upload/uploadController',//設定檔案上傳coltroller路徑
filePostName:'file',//欄位名
imageSizeLimit:'10MB',//每個檔案大小的限制
imageUploadLimit:40//每次可以上傳多少個檔案
});
});
</script>
</head>
<body>
<!-- editor 的顯示區域 -->
<p><textarea id="editor_id" name="content" style="width:700px;height:300px;">
<strong>HTML內容</strong>
</textarea></p>
</body>
</html>