springboot整合UEditor

最近用springboot框架在做一个项目，在添加某一个模块的正文的时候想用UEditor富文本编辑器来添加，发现框架里面没有，于是就是自己整和，下面是我的步骤：

1.1、下载jsp版本的ueditor 

下载网址：https://ueditor.baidu.com/website/download.html

2.将下载好的文件放置如下图的路径下

3、在我们需要使用富文本编辑器的页面里面引入ueditor，并加入如下代码：

<script  id="container" type="text/plain" name="articleData.content">这里写你的初始化内容</script>


 var ueditor = UE.getEditor('container', {
        initialFrameWidth : 1190,       // 设置初始时的宽度
        initialFrameHeight: 500         // 设置初始时的高度
    });
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        // 如果触发了下面三个动作中，则进行文件上传操作
        if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
            return '${ctx}/api/ueditor/imgUpdate'; //在这里返回我们实际的上传图片地址
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    }

 

 

4.编写controller

package com.jsite.modules.sys.web;


import com.baidu.ueditor.ActionEnter;
import com.jsite.common.config.Global;
import com.jsite.common.lang.StringUtils;
import com.jsite.common.utils.UploadUtils4;
import com.jsite.common.web.Servlets;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
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.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Calendar;
import java.util.List;


@Controller
@RequestMapping(value = "${adminPath}/api/ueditor")
public class UeditorController {





    @RequestMapping(value = "/ueditor")
    @ResponseBody
    public String ueditor(HttpServletRequest request, HttpServletResponse response) {

        String s = "{\n"+
                "            \"imageActionName\": \"uploadimage\",\n" +
                "                \"imageFieldName\": \"upfile\", \n" +
                "                \"imageMaxSize\": 2048000, \n" +
                "                \"imageAllowFiles\": [\".png\", \".jpg\", \".jpeg\", \".gif\", \".bmp\"], \n" +
                "                \"imageCompressEnable\": true, \n" +
                "                \"imageCompressBorder\": 1600, \n" +
                "                \"imageInsertAlign\": \"none\", \n" +
                "                \"imageUrlPrefix\": \"\",\n" +
                "                \"imagePathFormat\": \"/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}\" }";
        return s;

    }



//图片上传

    @RequestMapping(value = "imgUpdate")
    @ResponseBody
    public String imgUpdate(HttpServletRequest request) {
        List<UploadUtils4.UploadResult> result = UploadUtils4.getInstance().uploadFile(request);
        String config = "";
        for (UploadUtils4.UploadResult uploadResult : result) {
            if (!uploadResult.err) {
                if (StringUtils.isBlank(uploadResult.chunk) || uploadResult.merged) {
                    config = "{\"state\": \"SUCCESS\"," +
                            "\"url\": \"" + uploadResult.fileRltvPath.replace("\\","/") +"\"," +
                            "\"title\": \"" + uploadResult.fileName + "\"," +
                            "\"original\": \"" + uploadResult.fileName + "\"}";
                }
            }

            return config;
        }
        return "error";
    }

}

5：修改配置：

该配置中服务器统一接口要和你写的controller中的一样，若你的文件上床功能是用MultipartFile upfile来接收的，那upfile必须要和你controller中的这个相一致，不然会报空指针。

当上传图片返回是，返回的数据类型不能出错！！

 

 

6：所有步骤完成后，

如图；填写正确的图片上传地址

7这样问我们的整合就完成了，如下图：