spring整合ueditor、vue3/vite

前言

基于vite、vue3、ueditor、springboot项目

一、前端：下载和安装ueditor

1. 安装vue3的vue-ueditor-wrap@3.x，安装不了可以切换npmjs淘宝镜像
2. 下载ueditor包，并解压到vue根目录/public/下，修改文件夹名称为UEditor
   
3. main.js相关代码

import { VueUeditorWrap } from "vue-ueditor-wrap"
createApp(App).use(VueUeditorWrap)

5. 测试页面相关代码

 <vue-ueditor-wrap
    v-model="content"
    editor-id="editor"
    :config="editorConfig"
    :editorDependencies="['ueditor.config.js', 'ueditor.all.js']"
    style="height: 500px"
  />

    const content = ref('<p>Hello UEditor</p>')
	const editorConfig = reactive({
	  serverUrl: 'http://localhost:8080/ueditor',
	  UEDITOR_HOME_URL: '/UEditor/'
	})

serverUrl 这个不是上传接口，是获取ueditor配置参数的接口

二、后端：配置服务端ueditor参数

1. 在后端resources下增加config.json文件，内容如下

{
  "imageActionName": "uploadimage",
  "imageFieldName": "file",
  "imageMaxSize": 2048000,
  "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
  "imageCompressEnable": true,
  "imageCompressBorder": 1600,
  "imageInsertAlign": "none",
  "imageUrlPrefix": "",
  "imagePathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",

  "scrawlActionName": "uploadscrawl",
  "scrawlFieldName": "file",
  "scrawlPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
  "scrawlMaxSize": 2048000,
  "scrawlUrlPrefix": "",
  "scrawlInsertAlign": "none",


  "snapscreenActionName": "uploadimage",
  "snapscreenPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
  "snapscreenUrlPrefix": "",
  "snapscreenInsertAlign": "none",

  "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
  "catcherActionName": "catchimage",
  "catcherFieldName": "source",
  "catcherPathFormat": "/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
  "catcherUrlPrefix": "",
  "catcherMaxSize": 2048000,
  "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],


  "videoActionName": "uploadvideo",
  "videoFieldName": "file",
  "videoPathFormat": "/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",
  "videoUrlPrefix": "",
  "videoMaxSize": 102400000,
  "videoAllowFiles": [
    ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
    ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],


  "fileActionName": "uploadfile",
  "fileFieldName": "file",
  "filePathFormat": "/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",
  "fileUrlPrefix": "",
  "fileMaxSize": 51200000,
  "fileAllowFiles": [
    ".png", ".jpg", ".jpeg", ".gif", ".bmp",
    ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
    ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
    ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
    ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
  ],

  "imageManagerActionName": "listimage",
  "imageManagerListPath": "/ueditor/jsp/upload/image/",
  "imageManagerListSize": 20,
  "imageManagerUrlPrefix": "",
  "imageManagerInsertAlign": "none",
  "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],

  "fileManagerActionName": "listfile",
  "fileManagerListPath": "/ueditor/jsp/upload/file/",
  "fileManagerUrlPrefix": "",
  "fileManagerListSize": 20,
  "fileManagerAllowFiles": [
    ".png", ".jpg", ".jpeg", ".gif", ".bmp",
    ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
    ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
    ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
    ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
  ]

}

2. 增加两个接口，获取ueditor参数配置接口、文件上传接口

    @RequestMapping("/ueditor")
    public String index(String action, String callback, HttpServletRequest request, HttpServletResponse response) throws Exception {
        if (action.equals("config")) {
            ClassPathResource classPathResource = new ClassPathResource("config.json");
            InputStream inputStream = classPathResource.getInputStream();
//            String text = IoUtil.readStrByInputStream(inputStream);

            BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream));
            StringBuilder sb = new StringBuilder();
            String line;
            while ((line = reader.readLine()) != null){
                sb.append(line);
            }
            String text = sb.toString();
            return callback + "(" + text + ")";
        } else if (action.equals("uploadimage")) {
            request.getRequestDispatcher("/ueditor/ueditorUpload").forward(request, response);
        } else if (action.equals("uploadvideo")) {
            request.getRequestDispatcher("/ueditor/ueditorUpload").forward(request, response);
        }
        return "";
    }

    @RequestMapping("/ueditor/ueditorUpload")
    public Object uploadUeditor(@RequestParam("file") MultipartFile file) throws Exception {
        if (file.isEmpty()) {
            throw new Exception("上传文件不能为空");
        }

        String type = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
        String folderPathLast = "/upload/" + (new SimpleDateFormat("yyyy/MM/dd")).format(new Date());
        String folderPath = System.getProperty("user.dir") + folderPathLast;
        String fileName = RandomStringUtils.randomAlphanumeric(16) + type;
        File folder = new File(folderPath);
        if (!folder.isDirectory()){
            folder.mkdirs();
        }

        try {
            File localFile = new File(folderPath, fileName);
            file.transferTo(localFile);
            Map<String, String> map = new HashMap<>();
            map.put("state", "SUCCESS");
            map.put("url", folderPathLast + "/" + fileName);
            map.put("title", file.getName());
            map.put("original", file.getName());
            return map;
        } catch (IOException e) {
            throw new RunTimeException("ueditor上传出错");
        }
    }

OK了