前后端分離ueditor富文本編輯器的使用-Java版本

最近在寫一個自己的后台管理系統（主要是寫着玩的，用來熟悉后端java的知識，目前只是會簡單的寫點接口），想在項目中編寫一個發布新聞文章的功能，想到了使用百度的ueditor富文本編輯器，網上找了很多java版本的資料，不過大部分都是前后端都在一個工程項目下，頁面是jsp的。由於我這個系統是把前后端拆分開成前后端分離的。所以在根據看了網上的資料以及慢慢的摸索下，實現了在前后端分離的情況下把ueditor集成到系統中。項目頁面如圖：

 

說明：由於ueditor的上傳文件的功能默認是上傳在項目工程目錄下的，而我這里是把文件上傳到另外一個Tomcat服務器下的，所以我自己單獨寫了一個上傳接口，並且還要修改config.json文件。 

 

現在為了記錄ueditor的使用，我在這里把有關ueditor這一塊單獨拿出來，寫了一個簡單的小demo，下面記錄過程，如有不足之處，敬請提出。

1、下載ueditor

打開http://ueditor.baidu.com/website/download.html#ueditor

需要下載兩個壓縮包

1、下載完整源碼，並解壓

2、下載jsp版本【UTF-8】，並解壓

 　　源碼版本是為了使用里面的java文件，而后來發現在源碼版本中沒有ueditor.all.min.js文件，而在前端是需要引入這個js文件的，所以需要再把jsp版本下載下來，該版本中有該js文件。

      

 

2、java后台部分

 2.1、config.json文件

在java項目的 src/main/webapp 目錄下新建一個conf目錄，然后在解壓后的源碼版本中的 jsp 目錄下找到config.json文件，把它復制到新建的conf目錄下，並做修改。

該文件是用來配置ueditor編輯器的上傳文件的功能的各種參數的。

 

其中，imageActionName屬性的取值“uploadimage”要記住，后續上傳接口中要用到

 

2.2、把源碼版本中的 jsp/src/com 目錄下的 baidu 這個文件夾拷貝到項目com.lin包下

　　拷貝后，里面java文件肯定會報錯，只需修改各個java文件的package包路徑和引用其他文件的路徑即可。

 

　另外由於在上一步中，把config.json文件放置到了src/main/webapp/conf目錄下，而在ConfigManager類中需要讀取該json文件的內容，所以需要在ConfigManager.java文件中修改少量代碼，大於在170多行，修改如下：

 

2.3、項目常量配置-config.properties

#host地址
host=http://172.16.4.160:8081/ssm_project #文件上傳服務器地址（ip+端口） uploadHost=http://172.16.4.160:8090/ #普通圖片上傳保存目錄 imagePath = file/image/ #系統用戶頭像上傳保存目錄 headImgPath = file/image/headImg/ #系統用戶默認頭像 sysUserDefImg = sysUser-default.jpg #文本文件上傳保存目錄 documentPath = file/document/ #音頻文件上傳保存目錄 soundPath = file/sound/ #視頻文件上傳保存目錄 videoPath = file/video/ #ueditor編輯器上傳文件保存目錄（包括圖片、視頻、音頻、文本等文件） ueditor = file/ueditor/

2.4、新建上傳工具類-Upload.java

該文件其實在我11月2號的博客——前后端分離跨服務器文件上傳-Java SpringMVC版 中已有，為了方便理解，這里再次把代碼貼出來。

package com.lin.utils; import java.io.File; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.UUID; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.io.FilenameUtils; import org.springframework.web.multipart.MultipartFile; import com.sun.jersey.api.client.Client; import com.sun.jersey.api.client.WebResource; /** * 上傳文件工具類 * @author libo */ public class Upload { /** * 上傳文件 * @param request * @param response * @param serverPath 服務器地址:(http://172.16.5.102:8090/) * @param path 文件路徑（不包含服務器地址：upload/） * @return */ public static String upload(Client client, MultipartFile file, HttpServletRequest request,HttpServletResponse response, String serverPath, String path){ // 文件名稱生成策略（日期時間+uuid ） UUID uuid = UUID.randomUUID(); Date d = new Date(); SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmss"); String formatDate = format.format(d); // 獲取文件的擴展名 String extension = FilenameUtils.getExtension(file.getOriginalFilename()); // 文件名 String fileName = formatDate + "-" + uuid + "." + extension; //相對路徑 String relaPath = path + fileName; String a = serverPath + path.substring(0, path.lastIndexOf("/")); File file2 = new File(a); if(!file2.exists()){ boolean mkdirs = file2.mkdirs(); System.out.println(mkdirs); } // 另一台tomcat的URL（真實路徑） String realPath = serverPath + relaPath; // 設置請求路徑 WebResource resource = client.resource(realPath); // 發送開始post get put（基於put提交） try { resource.put(String.class, file.getBytes()); return fileName+";"+relaPath+";"+realPath; } catch (IOException e) { e.printStackTrace(); return ""; } }  }

 

2.5、新建UEditorController.java文件，編寫上傳接口

package com.lin.controller; import java.io.IOException; import java.io.PrintWriter; import java.util.Map; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.apache.commons.io.FilenameUtils; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest; import org.springframework.web.multipart.MultipartResolver; import org.springframework.web.multipart.commons.CommonsMultipartResolver; import com.lin.baidu.ueditor.ActionEnter; import com.lin.utils.ResponseUtils; import com.lin.utils.Upload; import com.sun.jersey.api.client.Client; import net.sf.json.JSONObject; /** * baidu-ueditor * @author libo */ @Controller @RequestMapping("/ueditor") public class UEditorController { @Value(value="${ueditor}") //后台圖片保存地址 private String ueditor; @Value(value="${uploadHost}") private String uploadHost; //項目host路徑 /** * ueditor文件上傳（上傳到外部服務器） * @param request * @param response * @param action */ @ResponseBody @RequestMapping(value="/ueditorUpload.do", method={RequestMethod.GET, RequestMethod.POST}) public void editorUpload(HttpServletRequest request, HttpServletResponse response, String action) { response.setContentType("application/json"); String rootPath = request.getSession().getServletContext().getRealPath("/"); try { if("config".equals(action)){ //如果是初始化 String exec = new ActionEnter(request, rootPath).exec(); PrintWriter writer = response.getWriter(); writer.write(exec); writer.flush(); writer.close(); }else if("uploadimage".equals(action) || "uploadvideo".equals(action) || "uploadfile".equals(action)){ //如果是上傳圖片、視頻、和其他文件 try { MultipartResolver resolver = new CommonsMultipartResolver(request.getSession().getServletContext()); MultipartHttpServletRequest Murequest = resolver.resolveMultipart(request); Map<String, MultipartFile> files = Murequest.getFileMap();//得到文件map對象 // 實例化一個jersey Client client = new Client(); for(MultipartFile pic: files.values()){ JSONObject jo = new JSONObject(); long size = pic.getSize(); //文件大小 String originalFilename = pic.getOriginalFilename(); //原來的文件名 String uploadInfo = Upload.upload(client, pic, request, response, uploadHost, ueditor); if(!"".equals(uploadInfo)){ //如果上傳成功 String[] infoList = uploadInfo.split(";"); jo.put("state", "SUCCESS"); jo.put("original", originalFilename);//原來的文件名 jo.put("size", size);　　//文件大小 jo.put("title", infoList[1]);　　//隨意，代表的是鼠標經過圖片時顯示的文字 jo.put("type", FilenameUtils.getExtension(pic.getOriginalFilename()));　　//文件后綴名 jo.put("url", infoList[2]);//這里的url字段表示的是上傳后的圖片在圖片服務器的完整地址（http://ip:端口/***/***/***.jpg） }else{ //如果上傳失敗  } ResponseUtils.renderJson(response, jo.toString()); } }catch (Exception e) { e.printStackTrace(); } } } catch (Exception e) { } } }

其中：

if("config".equals(action)){ 
這段代碼是用來判斷是否是初始化上傳的，因為在點擊多圖上傳彈出上傳窗口的時候，是會請求這個接口，經測試，如果沒有該段判斷，前端的上傳是無法使用的。

   else if("uploadimage".equals(action) || "uploadvideo".equals(action) || "uploadfile".equals(action)){ 

   這一部分代碼判斷中， uploadimage，uploadvideo，uploadfile 這三個值，都是來自於conf.json文件中的配置，因此這一個接口既可以上傳圖片，也可以上傳其他類型文件。

   另外接口返回的json字段，也是固定的。

 

3、前端部分

3.1、demo目錄結構

 

在ueditor-demo目錄下新建lib目錄，然后從之前解壓的jsp版本中，把dialogs、lang、themes、third-party四個文件夾和ueditor.all.min.js、ueditor.config.js、ueditor.parse.js、ueditor.parse.min.js四個js文件復制到lib目錄下，並添加jQuery(用來執行ajax提交數據)

3.2、文件修改

1、修改ueditor.config.js

修改服務器統一請求接口路徑 - serverUrl屬性的值修改為后台上傳文件的接口地址

 

2、修改dialogs/image/image.js、dialogs/video/video.js、dialogs/attachment/attachment.js三個文件

 這三個文件分別對應圖片上傳、視頻上傳、附件上傳，主要是要去掉默認設置的請求頭（可以直接在這三個js文件中刪掉該段代碼），否則無法上傳文件

   2.1、dialogs/image/image.js大概在706行

       

   2.2、dialogs/video/video.js大概在719行

       

   2.3、dialogs/attachment/attachment.js大概在488行

       

 

3.3、index.html

在頁面中需要引入ueditor.config.js、ueditor.all.min.js和zh-cn.js

在body元素中寫一個script元素，給一個id，這里為editor，並設置type="text/plain"，這個id主要是通過它來初始化ueditor實例的。

初始化的方式是在通過 UE.getEditor('script標簽id', {})。

這里有兩個參數，第一個參數是script標簽的id值，第二個參數是一個對象，可以用來設置ueditor編輯框的寬高等屬性，這里只設置了寬高。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ueditor-demo</title> <script src="/lib/jquery.min.js"></script> <script src="/lib/ueditor/ueditor.config.js"></script> <script src="/lib/ueditor/ueditor.all.min.js"></script> <script src="/lib/ueditor/lang/zh-cn/zh-cn.js"></script> <style> #submit { width: 100px; height: 30px; line-height: 30px; font-size: 16px; } </style> </head> <body> <h2>ueditor測試使用</h2> <script id="editor" type="text/plain"></script> <div style="margin-top: 20px; text-align: center;"> <input type="button" class="btn btn-blue w-100" value="提 交" id="submit"> </div> <script> $(function () { //實例化編輯器 var ue = UE.getEditor('editor',{ initialFrameWidth:"100%", //初始化寬度  initialFrameHeight:400, //初始化高度  }); $('#submit').click(function () { //獲取ueditor編輯框中的html文本內容 var content = UE.getEditor('editor').getContent(); $.ajax({ url: 'http://172.16.4.160:8081/ssm_project/news/addNews.do', type: 'POST', data: { content: content, }, dataType: 'json', success: function (res) { console.log(res); }, error: function () { console.log(res); } }) }) }) </script> </body> </html>

UE.getEditor('editor').getContent()方法就可以獲取到編輯框中的html文本，然后調用添加接口，就可以把html格式的文本保存到數據庫中了。

此時就可以在服務環境下訪問該index.html頁面，即可看到ueditor富文本編輯框，並進行上傳文件並保存到數據庫中。

 

4、效果

 

 

上傳接口返回的json格式如下：

 

 存放到數據庫的為html結構的文本，如圖：

 

 

注意：在測試之前，需要先啟動文件服務器——另外一個Tomcat服務器 ，至於關於這一塊的介紹，請參考11月2號的一篇博客：前后端分離跨服務器文件上傳-Java SpringMVC版

 

由於本人是做web前端開發的，只是最近在學學java，因此項目或者demo中都有很多不足之處。如若大家有建議，歡迎在評論區提出