SpringBoot（SpringMVC）集成UMeditor_springboot umeditor-优快云博客

本文链接：https://blog.youkuaiyun.com/Frank_ZZ_/article/details/105405341

本文详细介绍了如何在项目中集成UMeditor富文本编辑器，包括下载、配置、文件上传处理及nginx反向代理设置，实现跨域问题解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、去官网下载umeditor放到nginx根目录下
将umeditor的目录命名为umeditor

2、修改umeditor的配置文件umeditor.config.js

# 修改前
        // ,imageUrl:URL+"jsp/imageUp.jsp"             //图片上传提交地址
        // ,imagePath:URL + "jsp/"                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
# 修改后
        ,imageUrl:"/sys/ueditor/upfile"             //图片上传提交地址
        ,imagePath:""                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置

3、文件上传Controller

@RestController
@Api(value = "富文本编辑器", tags = "富文本编辑器")
@RequestMapping("/sys/ueditor")
@Slf4j
public class UEditorController {

    /**
     * 文件上传service
     */
    @Autowired
    private SysFileInfoService sysFileInfoService;

    @RequestMapping(value="/upfile")
    @ApiOperation(value = "UMEditor文件上传")
    public UEditorResult upfile(HttpServletRequest request, HttpServletResponse response) {
        try {
            UEditorResult result = new UEditorResult();
            result.setState("SUCCESS");
            response.setContentType("application/json");
            MultipartHttpServletRequest multipart = (MultipartHttpServletRequest)request;
            MultipartFile multipartFile = multipart.getFile("upfile");
            // 保存文件 并返回文件信息
            SysFileInfo fileInfo = sysFileInfoService.upload(multipartFile);
            result.setSize(multipartFile.getSize());
            String oldFileName = multipartFile.getOriginalFilename();
            result.setType(oldFileName.substring(oldFileName.lastIndexOf(".")));
            result.setTitle(oldFileName);
            result.setOriginal(oldFileName);
            // 文件下载路径
            String url = "/sys/file/download/"+fileInfo.getId();
            result.setUrl(url);
            return result ;
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e.getMessage());
        }
    }

@Data
public class UEditorResult {
    private String state;
    private String url;
    private String title;
    private String original;
    private String type;
    private Long size;
}

4、nginx增加配置
使用nginx做反向代理解决跨域问题

	server {
        listen       8076;
        server_name  localhost;
        charset utf-8;

		proxy_connect_timeout 180;
        proxy_send_timeout 180;
        proxy_read_timeout 180;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarder-For $remote_addr;
		
		# 指向umeditor目录
        location / {
            root   umeditor;
            index  index.html index.htm;
        }
        # 代理到8080端口
		location /sys {
            proxy_pass   http://127.0.0.1:8080;
        }
		
    }

5、访问
UMeditor的集成比较简单
启动nginx，访问http://127.0.0.1:8076，就可以使用UMeditor了