editormd图片编辑（结合SpringBoot 实现）

最新推荐文章于 2024-05-13 00:20:27 发布

germcell

最新推荐文章于 2024-05-13 00:20:27 发布

阅读量862

点赞数

文章标签： java

本文链接：https://blog.csdn.net/weixin_51759489/article/details/123683347

版权

本文介绍了如何在editormd富文本编辑器中集成图片上传功能，并与SpringBoot后台进行交互。通过设置editormd的配置项开启图片上传，指定上传URL，后端接收到请求后处理文件上传，返回包含成功信息的JSON数据。文章详细阐述了编辑器配置、后端接口设计及处理过程，并给出了可能出现的问题和解决方案。

摘要由CSDN通过智能技术生成

1、引言

在富文本编辑器editormd中插入图片内容（上传图片），与SpringBoot结合。

2、editormd部分

在初始化编辑器的时候开启图片上传功能

imageUpload ：取值为true
imageFormats ：支持的图片格式
imageUploadURL ：处理上传图片的请求url

/*--------初始化markdown编辑器---------*/  
contentEditor = editormd("m-editormd", {
	placeholder: '开始编辑...',
	width: '100%',
	height: 700,
	emoji: true,
	syncScrolling: "single",
	path: "../../static/lib/editormd/lib/"
	imageUpload: true,
	imageFormats: ["jpg", "jpeg", "png"],
	imageUploadURL: "http://127.0.0.1:8080/admin/editormd/images"
})

3、SpringBoot部分

3.1 封装返回实体

editormd建议返回一个json数据，包括success（是否处理成功），message（提示信息），url（处理成功后图片的相对路径）

public class EditorJson {
    /**
     * editormd上传图片返回的json数据
     */
    private int success;  // 后端是否处理成功 1成功 0失败
    private String message; // 提示信息
    private String url; // 成功后的url地址（图片存储在服务器的地址，相对路径）
}

3.2 处理请求

 @PostMapping("/editormd/images")
 @ResponseBody
 public EditorJson imagesHandler(@RequestParam("editormd-image-file") MultipartFile file) {
        EditorJson result = new EditorJson();
        try {
        	// 自定义工具类， 结果为null或''表示处理失败；反之表示处理成功，返回文件在服务器中存储的文件名
            String accessDir = UploadUtils.uploadPictureHandler(file);
            if (accessDir == null || Objects.equals("", accessDir)) {
                result.setSuccess(0);
                result.setMessage("错误 : 只支持5MB的jpg,jpeg,png格式的图片");
            } else {
                result.setSuccess(1);
                result.setMessage("upload success");
                // "/res/images/" 设置了静态资源访问路径，读者根据自己的实际情况设置
                result.setUrl("/res/images/" + accessDir);
            }
        } catch (Exception e) {
            throw new UniversalException("图片上传失败,格式或大小错误");
        }
        return result;
    }