1、准备工作

1.1、下载ueditor
打开网站https://ueditor.baidu.com/website/download.html下载如图所示两个文件

image.png
1.2、将源码文件夹下的：⁨jsp⁩ / ⁨src⁩ / ⁨com⁩ / ⁨baidu⁩/ueditor 放入自己工程中，修改一些引入的错误
1.3、将源码文件夹下的jsp⁩：config.js文件放入项目中webapp目录下的新建文件夹config中，如下图所示：

image.png
1.4、另外由于在上一步中，把config.json文件放置到了src/main/webapp/config目录下，而在ConfigManager类中需要读取该json文件的内容，所以需要在ConfigManager.java文件中修改少量代码，大约在170多行，修改如下：

image.png
1.5、编写controller接口如下：

import javax.servlet.http.HttpServletRequest;
import org.json.JSONException;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/ueditor")
public class UEditorController {
    @RequestMapping(value = "/upload")
    public String editorUpload(HttpServletRequest request) throws JSONException {
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        return new ActionEnter(request, rootPath).exec();
    }
}

1.6、修改config.json文件中的图片保存路径，如下图所示：

image.png

1.7、修改BinaryUploader类如下：

public class BinaryUploader {

    public static final State save(HttpServletRequest request, Map<String, Object> conf) {
        InputStream fileStream = null;
        if (!ServletFileUpload.isMultipartContent(request)) {
            return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
        }
        try {
            //修改了百度使用原生的commons上传方式
            DefaultMultipartHttpServletRequest multipartRequest = (DefaultMultipartHttpServletRequest) request;
            Iterator<String> fileNames = multipartRequest.getFileNames();
            MultipartFile file = null;
            while (fileNames.hasNext()) {
                file = multipartRequest.getFiles(fileNames.next()).get(0);
                fileStream = file.getInputStream();
            }
            if (fileStream == null) {
                return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
            }
            String savePath = (String) conf.get("savePath");
            String originFileName = file.getOriginalFilename();
            String suffix = FileType.getSuffixByFilename(originFileName);
            originFileName = originFileName.substring(0, originFileName.length() - suffix.length());
            savePath = savePath + suffix;
            long maxSize = (Long) conf.get("maxSize");
            if (!BinaryUploader.validType(suffix, (String[]) conf.get("allowFiles"))) {
                return new BaseState(false, AppInfo.NOT_ALLOW_FILE_TYPE);
            }
            savePath = PathFormat.parse(savePath, originFileName);
            State storageState = StorageManager.saveFileByInputStream(fileStream, savePath, maxSize);
            fileStream.close();
            if (storageState.isSuccess()) {
                String[] str = savePath.split("/");
                storageState.putInfo("url", "images/" + str[str.length - 1]);
                storageState.putInfo("type", suffix);
                storageState.putInfo("original", originFileName + suffix);
            }
            return storageState;
        } catch (ClassCastException e) {
            return new BaseState(false, AppInfo.PARSE_REQUEST_ERROR);
        } catch (IOException e) {
            return new BaseState(false, AppInfo.IO_ERROR);
        }
    }

    private static boolean validType(String type, String[] allowTypes) {
        List<String> list = Arrays.asList(allowTypes);
        return list.contains(type);
    }
}

2、前端配置

2.1、修改前端项目中ueditor.config.js中的serverUrl的值为你写的接口url:

domain+/ueditor/upload

<!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>