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

時間 2019-11-13

標籤後端分離 ueditor 文本編輯器使用 java 版本欄目 Java 简体版

原文原文鏈接

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

說明：因爲ueditor的上傳文件的功能默認是上傳在項目工程目錄下的，而我這裏是把文件上傳到另一個Tomcat服務器下的，因此我本身單獨寫了一個上傳接口，而且還要修改config.json文件。前端

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

一、下載ueditor

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

須要下載兩個壓縮包web

一、下載完整源碼，並解壓ajax

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

　　源碼版本是爲了使用裏面的java文件，然後來發如今源碼版本中沒有ueditor.all.min.js文件，而在前端是須要引入這個js文件的，因此須要再把jsp版本下載下來，該版本中有該js文件。數據庫

二、java後臺部分

2.一、config.json文件

在java項目的 src/main/webapp 目錄下新建一個conf目錄，而後在解壓後的源碼版本中的 jsp 目錄下找到config.json文件，把它複製到新建的conf目錄下，並作修改。apache

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

其中，imageActionName屬性的取值「uploadimage」要記住，後續上傳接口中要用到

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

　　拷貝後，裏面java文件確定會報錯，只需修改各個java文件的package包路徑和引用其餘文件的路徑便可。

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

2.三、項目常量配置-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.四、新建上傳工具類-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.五、新建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.一、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.二、文件修改

一、修改ueditor.config.js

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

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

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

2.一、dialogs/image/image.js大概在706行

2.二、dialogs/video/video.js大概在719行

2.三、dialogs/attachment/attachment.js大概在488行

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>