今天使用springboot 集成 kindeditor 本來以為挺簡單 結果搞了我一天 才弄好。主要是圖片上傳的問題。吐槽一下 網上好多介紹說的都不完善 搞死我了。我這一篇絕對是完善的（相對比較完善。。）
1.kindeditor 下載地址：http://kindeditor.net/down.php 直接下載
下載后解壓 目錄如下圖 里面有asp jsp php的例子。jsp已經過時了，所以想直接用html來集成【下圖中的index.html Jquery,redirect.html是我后來加上去的】
2.springboot
最簡單就是：start.spring.io直接生成一個簡單的springboot
3.廢話不多說 開始集成
3.1：首先創建一個html 我這里是index.html index.html里的內容是 jsp->demo.jsp里的內容 刪掉jsp特有的東西
附加kindeditor非常簡單 代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="kindeditor-all-min.js"></script>
<script src="lang/zh-CN.js"></script>
<script src="jquery-3.1.0.min.js"></script>
<title></title>
</head>
<body>
<textarea id="txtEditor" name="content1" style="height: 300px;width: 100%;"></textarea>
<button type="button" onclick="upload();">上傳</button>
</body>
<script>
var callback = "redirect.html";
var editor1;
var editor = KindEditor.ready(function(K) {
editor1 = K.create('textarea[name="content1"]', {
cssPath : '../plugins/code/prettify.css',
uploadJson : 'http://127.0.0.1:8081/upload/upmethod?callBackPath='+callback,
fileManagerJson : '../jsp/file_manager_json.jsp',
allowFileManager : true,
afterCreate : function() {
var self = this;
K.ctrl(document, 13, function() {
self.sync();
document.forms['example'].submit();
});
K.ctrl(self.edit.doc, 13, function() {
self.sync();
document.forms['example'].submit();
});
}
});
});
</script>
<script src="upload.js"></script>
</html>
這樣我們就可以打開index看看效果了 如下圖
上傳圖片:這里用html上傳圖片
首先創建redirect.html 我是直接放在項目目錄下 和index.html同級 redirect.html的內容如下：
redirect.html 的作用是解決frame域的問題 這個問題搞了我很長時間。kindeditor是用frame
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ie </title>
<script type="text/javascript">
function getParameter(val) {
var uri = decodeURI(window.location.search);
var re = new RegExp("" + val + "=([^&?]*)", "ig");
return ((uri.match(re)) ? (uri.match(re)[0].substr(val.length + 1)) : null);
}
var upload_callback = function() {
var error = getParameter("error");
error = parseInt(error)
var dataObject;
if(error==0){
var url = getParameter("url");
dataObject = {"error": error, "url": url};
}else{
var message = getParameter("message");
dataObject = {"error": error, "message": message};
}
var data = JSON.stringify(dataObject)
document.getElementsByTagName("body")[0].innerHTML = '<pre>' + data + '</pre>';
}
</script>
</head>
<body onload="upload_callback();">
</body>
</html>
后台項目結構如下 首先需要先把kindeditor的jar包附加到springboot項目中
主Application的內容就是原來的內容不變
主要是imgUploadController 圖片上傳類 內容如下
package com.example.upload.up; import java.io.File; import java.io.FileOutputStream; import java.io.FileWriter; import java.io.IOException; import java.io.InputStream; import java.io.ObjectOutputStream; import java.io.OutputStream; import java.io.PrintWriter; import java.io.UnsupportedEncodingException; import java.net.URI; import java.net.URLEncoder; import java.text.SimpleDateFormat; import java.util.Arrays; import java.util.Date; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.Map; import java.util.Random; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; @Controller @RequestMapping("/upload") public class imgUploadController { @RequestMapping("/subContent") public void getTextAreaContent(@RequestParam String context1) { String contentx = context1; System.out.println(contentx); } @ResponseBody @RequestMapping("/upmethod") public void uploadMethod(@RequestParam String callBackPath,@RequestParam(value="imgFile",required=false)MultipartFile file,HttpServletRequest request,HttpServletResponse response) throws FileUploadException, IOException { response.setContentType("text/html;charset=UTF-8"); String savePath = "D://imgSavePath/"; String saveUrl = request.getContextPath() + "/imgSavePath/"; //定義允許上傳的文件擴展名 HashMap<String, String> extMap = new HashMap<String, String>(); extMap.put("image", "gif,jpg,jpeg,png,bmp"); extMap.put("flash", "swf,flv"); extMap.put("media", "swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb"); extMap.put("file", "doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2"); //最大文件大小 long maxSize = 100000000; response.setContentType("text/html; charset=UTF-8"); if(!ServletFileUpload.isMultipartContent(request)){ System.out.println("請選擇文件。"); response.sendRedirect(getError("請選擇文件.",callBackPath)); return; } //檢查目錄 File uploadDir = new File(savePath); if(!uploadDir.isDirectory()){ System.out.println("上傳目錄不存在。"); response.sendRedirect(getError("上傳目錄不存在。",callBackPath)); return; } //檢查目錄寫權限 if(!uploadDir.canWrite()){ System.out.println("上傳目錄沒有寫權限。"); response.sendRedirect(getError("上傳目錄沒有寫權限。",callBackPath)); return; } String dirName = request.getParameter("dir"); if (dirName == null) { dirName = "image"; } if(!extMap.containsKey(dirName)){ System.out.println("目錄名不正確。"); response.sendRedirect(getError("目錄名不正確。",callBackPath)); return; } //創建文件夾 savePath += dirName + "/"; saveUrl += dirName + "/"; File saveDirFile = new File(savePath); if (!saveDirFile.exists()) { saveDirFile.mkdirs(); } SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd"); String ymd = sdf.format(new Date()); savePath += ymd + "/"; saveUrl += ymd + "/"; File dirFile = new File(savePath); if (!dirFile.exists()) { dirFile.mkdirs(); } String fileName = file.getOriginalFilename(); long fileSize = file.getSize(); // if (!item.isFormField()) { //檢查文件大小 if(file.getSize() > maxSize){ System.out.println("上傳文件大小超過限制。"); response.sendRedirect(getError("上傳文件大小超過限制。",callBackPath)); return; } //檢查擴展名 String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase(); if(!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)){ System.out.println("上傳文件擴展名是不允許的擴展名。\n只允許" + extMap.get(dirName) + "格式。"); response.sendRedirect(getError("上傳文件擴展名是不允許的擴展名。\n只允許" + extMap.get(dirName) + "格式。",callBackPath)); return; } SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss"); String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt; try{ File uploadedFile = new File(savePath, newFileName); OutputStream os = new FileOutputStream(uploadedFile); InputStream inputStream = file.getInputStream(); byte[] buf = new byte[1024]; int length = 0; while((length = inputStream.read(buf))!=-1) { os.write(buf,0,length); } inputStream.close(); os.close(); }catch(Exception e){ System.out.println("上傳文件失敗。"); response.sendRedirect(getError("上傳文件失敗。",callBackPath)); return; } Map<String, Object> msgMap = new HashMap<String, Object>(); msgMap.put("error", 0); msgMap.put("url", ""); String urlString = ""; //根據自己實際情況做修改 urlString = "http://127.0.0.1:8020/kindeditor-4.1.11-zh-CN/kindeditor/"+callBackPath+"?error=0&url="+"http://127.0.0.1:8081/OTA/"+ymd+"/"+newFileName; response.sendRedirect(urlString); } private String getError(String message,String callBackPath) throws UnsupportedEncodingException { Map<String, Object> msg = new HashMap<String, Object>(); msg.put("error", 1); msg.put("message", message); String urlString = "http://127.0.0.1:8020/kindeditor-4.1.11-zh-CN/kindeditor/"+callBackPath+"?error=1&message="+URLEncoder.encode(message, "UTF-8"); return urlString; } }
內容寫的不太完善 這不重要 重要的是后面的一段代碼
我們返回內容重定向到redirect.html 並且返回數據：error 和 url 我這里在static目錄下放了一張圖片1.png
urlString = "http://127.0.0.1:8020/kindeditor-4.1.11-zh-CN/kindeditor/"+callBackPath+"?error=0&url="+"http://127.0.0.1:8081/static/1.png"; response.sendRedirect(urlString);
說到圖片地址的url這里需要配置一下 我是用的一個配置類 ImgPathConf.java 位置放的不太規范 不過這不重要。。
ImgPathConf.java內容如下 是配置訪問圖片資源的 這里定義了訪問項目目錄下 和 不在項目目錄下的兩種方法
package com.example.upload.up; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @SuppressWarnings("deprecation") @Configuration public class ImgPathConf extends WebMvcConfigurerAdapter{ @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { //和頁面有關的靜態目錄都放在項目的static目錄下 registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/"); //上傳的圖片在D盤下的OTA目錄下，訪問路徑如：http://localhost:8081/OTA/1.jpg //其中OTA表示訪問的前綴。"file:D:/OTA/"是文件真實的存儲路徑 registry.addResourceHandler("/OTA/**").addResourceLocations("file:D:/OTA/"); } }
到這里 我們的項目已經可以跑起來了
效果如下 這里用到了Hbuilder 跑html還是挺方便的。
查看這個源碼
可以看到圖片是一個url地址 我們獲取到textarea的內容 保存到數據庫就OK了。
附加一個ajax提交內容的js 我的是upload.js
function upload(){ editor1.sync(); //將編輯器的內容設置到原來的textarea控件里。 var content=editor1.html(); url = "http://127.0.0.1:8081/upload/subContent"; $.post( url, { context1:content, }, function(retData) { }); }
至此一個完整的圖片上傳，內容提交就完成了 后台獲取的內容打印如下 保存到數據庫就OK了
