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

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

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

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

  
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"
})

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

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

 @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;
    }

注：
1、请求参数需设置为 editormd-image-file
2、UploadUtils类是我自己封装的一个处理文件上传的工具类，其实质就是SpringBoot处理文件上传那一系列步骤，由读者自己实现，或者搜索其他博客

上传成功后会显示图片路径，并显示图片

如果在这个过程中有什么问题，欢迎留言交流