在官網下載Kindededitor的開發包
在項目中javaweb項目中導入kindeditor必須要使用的Jar包（用於文件上傳，除非你的富文本編輯器不使用圖片上傳）jar包可以在官網的開發包中找到，注意下面圖jar包的位置
將官網開發包中的此jsp文件放在你的項目中，其實富文本編輯器在執行文件上傳的時候就是請求的是這個upload_json.jsp文件，這個upload_json.jsp文件起始就相當與一個用於文件上傳的Servlet
將kindeditor富文本編輯器需要使用到的css,js文件加入項目中，在這里最常用使用的是默認的css文件，全局的js文件，中文的js文件，如下圖所示
現在我們已經將kindeditor所需要的所有東西都加入項目中了，想在讓我們來編輯一個展示頁面來看卡看你kindetidor是什么效果，展示頁面的html代碼我粘貼在下面，方便各位看官觀看
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>this is test kindetior</title> <link href="http://localhost:8080/test/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet"> <script type="text/javascript" charset="utf-8" src="http://localhost:8080/test/kindeditor-4.1.10/kindeditor-all-min.js"></script> <script type="text/javascript" charset="utf-8" src="http://localhost:8080/test/kindeditor-4.1.10/lang/zh_CN.js"></script> </head> <body> <form method="post" action="http://localhost:8080/test/kindservlet"> <textarea id="editor_id" name="content" style="width: 700px; height: 300px;"> 請輸入...... </textarea> <input type="submit" value="提交" onclick="submitForm()"> </form> <script> KindEditor.ready(function (K) { window.editor = K.create('#editor_id', { //這里是指定的文件上傳input的的屬性名 filePostName: "uploadFile", //這里就是指定文件上傳的請求地址，上面也已經說了，upload_json.jsp就相當去一個servlet去進行保存文件，這個地方很重要 uploadJson: 'upload_json.jsp', resizeType: 1, allowPreviewEmoticons: true, allowImageUpload: true, }); }) </script> </body>
效果如下
在這里我要提一下，這個富文本編輯器其實就是一個表單，表單的請求地址就是上面展示的html中的http://localhost:8080/test/kindservlet，這個servlet是自己寫的用於保存<textarea id="editor_id" name="content" style="width: 700px; height: 300px;"> 屬性名為content的值，當前這個Servlet接受過來的都是字符，你可能會有疑問？我要在富文本中上傳圖片或者圖片上傳到哪里了呢？在這里我要說一下，很多新接觸的伙伴們可能會有些陌生，其實當我們在進行上傳圖片的時候，已經請求了upload_json.jsp這個jsp文件，這個jsp的功能是和保存文件的servlet的功能是一樣的，所以上傳的文件按是在這個upload_json.jsp文件中已經保存了，並且這個upload_json.jsp文件會在保存了文件后響應一個路徑地址，也就是文件保存的地址，相應的地址會插入到content文本域中，格式是<img src="http://xxxx.com/xxx/xxx.jsp">，插入數據庫的就是<img src="http://xxxx.com/xxx/xxx.jsp">就是這個img標簽，所以在查數據庫的時候圖片就顯示出來了，具體的文件上傳文件邏輯官方來寫在upload_json.jsp文件中的。
現在我們來進行上傳一張圖片試一下，看看能不能上傳
很遺憾，並沒有上傳成功，現在提示上傳的目錄不存在，如果沒有錯的話應該是upload_json.jsp這個文件中的問題，現在我們來看一下upload_json.jsp里面是怎么寫的
可以看到圖片上傳的時候默認是將圖片文件上傳到項目的attached目錄下，現在我們項目中沒有這個文件夾，現在讓我們在項目的編譯的目錄下創建一個名為attached的文件夾，注意是項目的編譯目錄
現在我們再來試一下能否上傳圖片
編譯目
錄的attached文件夾里面也有了這張圖片
可以看到圖片已經上傳成功了，並且upload_json.jsp又把上傳成功的圖片地址給回傳了回來，點擊富文本的左上角可以看到到真正表單需要提交的東東。。
其實表單再上傳的時候就是上傳的這些內容哈，所以從數據庫取出來這些文本的時候就能夠直接顯示了哈，是不是很簡單。
現在我們來分析一下這個upload_json.jsp文件的一點核心的東西，其實在上傳圖片到upload_json.jsp的時候，kindetidor富文本也不知道上傳成功不成功，也不知道該如何提示用戶是否上傳成功，那么它是怎么知道是否是上傳成功的呢？來看一段upload_json.jsp中的源碼
可以看到在upload_json.jsp保存成功文件的時候會返回一個JSONObject對象，對象中放了兩個map，一個是error，一個url，可以看到在上傳成功的時候就返回個Map，一個是error值為0代表已經上傳成功，一個是url代表的是上傳成功后的圖片的地址用於在富文本中回顯圖片。
可以看到當圖片保存失敗或者有錯誤的時候返回的也是一個經過toString的Object對象，這個對象中同樣有個Map一個是error值為1代表上傳失敗，一個是message代表着錯誤原因，也就是為什么會失敗。
后面我們可以重寫這個upload_json.jsp文件,應為官方在代碼里面寫了不太安全,還請各位看官自己從新寫一下,大概也就是吧upload_json中的文件上傳代碼copy到一個Servlet上,再改一下展示頁面的文件上傳請求地址,就ok了.
下面就是我將upload_json.jsp中的文件上傳代碼copy到一個servlet中，各位看官可以參考一下修改，在下沒做什么修改。
package kindeditor; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.FileItemFactory; import org.apache.commons.fileupload.FileUploadException; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; import org.json.simple.JSONObject; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.File; import java.io.IOException; import java.io.PrintWriter; import java.text.SimpleDateFormat; import java.util.*; /** * @Author:jimisun * @Description: * @Date:Created in 16:26 2018/8/2 * @Modified By: */ @WebServlet("/kindeditor/upload") public class KindEditorUpload extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //設置Response響應的編碼 resp.setContentType("text/html; charset=UTF-8"); //獲取一個Response的Write對象 PrintWriter writer = resp.getWriter(); //文件保存目錄路徑 String savePath = req.getServletContext().getRealPath("/") + "attached/"; System.out.println(savePath); //文件保存目錄URL String saveUrl = req.getContextPath() + "/attached/"; System.out.print(saveUrl); //定義允許上傳的文件擴展名 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 = 1000000; //判斷是否是一個文件 if (!ServletFileUpload.isMultipartContent(req)) { writer.println(getError("請選擇文件。")); return; } //檢查目錄 File uploadDir = new File(savePath); if (!uploadDir.isDirectory()) { writer.println(getError("上傳目錄不存在。")); return; } //檢查目錄寫權限 if (!uploadDir.canWrite()) { writer.println(getError("上傳目錄沒有寫權限。")); return; } String dirName = req.getParameter("dir"); if (dirName == null) { dirName = "image"; } if (!extMap.containsKey(dirName)) { writer.println(getError("目錄名不正確。")); 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(); } FileItemFactory factory = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(factory); upload.setHeaderEncoding("UTF-8"); List items = null; try { items = upload.parseRequest(req); } catch (FileUploadException e) { e.printStackTrace(); } Iterator itr = items.iterator(); while (itr.hasNext()) { FileItem item = (FileItem) itr.next(); String fileName = item.getName(); long fileSize = item.getSize(); if (!item.isFormField()) { //檢查文件大小 if (item.getSize() > maxSize) { writer.println(getError("上傳文件大小超過限制。")); return; } //檢查擴展名 String fileExt = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase(); if (!Arrays.<String>asList(extMap.get(dirName).split(",")).contains(fileExt)) { writer.println(getError("上傳文件擴展名是不允許的擴展名。\n只允許" + extMap.get(dirName) + "格式。")); return; } SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss"); String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "." + fileExt; try { File uploadedFile = new File(savePath, newFileName); item.write(uploadedFile); } catch (Exception e) { writer.println(getError("上傳文件失敗。")); return; } JSONObject obj = new JSONObject(); obj.put("error", 0); obj.put("url", saveUrl + newFileName); writer.println(obj.toJSONString()); } } //將writer對象中的內容輸出 writer.flush(); //關閉writer對象 writer.close(); } //一個私有的方法，用於響應錯誤信息 private String getError(String message) { JSONObject obj = new JSONObject(); obj.put("error", 1); obj.put("message", message); return obj.toJSONString(); } }
好啦到這里了該下班了，寫了一下午，真累。。。。