Springmvc/SpringBoot VUE UEditor前后端分离

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 conf) {
        InputStream fileStream = null;
        if (!ServletFileUpload.isMultipartContent(request)) {
            return new BaseState(false, AppInfo.NOT_MULTIPART_CONTENT);
        }
        try {
            //修改了百度使用原生的commons上传方式
            DefaultMultipartHttpServletRequest multipartRequest = (DefaultMultipartHttpServletRequest) request;
            Iterator 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 list = Arrays.asList(allowTypes);
        return list.contains(type);
    }
}

2、前端配置

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

domain+/ueditor/upload

    
    
    
    
    
    
    


ueditor测试使用


    

 


 

3、参考

https://zhuanlan.zhihu.com/p/30094750
https://my.oschina.net/u/1170843/blog/1204371
https://cloud.tencent.com/developer/article/1021942
https://www.jianshu.com/p/6ef85666d212