- html代码
<div class="form-group">
<div id="my-editormd" style="z-index: 99999">
<textarea id="my-editormd-markdown-doc" class="editormd-markdown-textarea" name="my-editormd-markdown-doc" style="display:none;"></textarea><!-- 注意:name属性的值-->
<textarea class="editormd-html-textarea" id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea>
</div>
</div>
- js代码
//加载编辑器
editormd("my-editormd", {//注意1:这里的就是html中的DIV的id属性值
width: "100%",
height: 700,
syncScrolling: "single",
path: "${request.contextPath}/static/admin/lib/editor_md/lib/",//注意2:lib文件存放的路径
saveHTMLToTextarea: true,//注意3:这个配置,方便post提交表单
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],//支持接收的图片上传的格式
imageUploadURL : "${request.contextPath}/admin/saveContentImg",//后端图片上传的服务地址
});
- springboot代码
@RequestMapping("/admin/saveContentImg")
@ResponseBody
//接收图片的参数名需要为"editormd-image-file"
public JSONObject saveImage(@RequestParam("editormd-image-file") MultipartFile file, HttpServletRequest request){
JSONObject jsonObject = new JSONObject();
ResultInfo resultInfo = articleService.saveImage(file,request);
if (resultInfo.getResultCode()==0){
jsonObject.put("success", 0);//图片上传失败的信息码
jsonObject.put("message", "upload error!");//信息
}
else {
jsonObject.put("url", resultInfo.getResultObj());//图片回显地址,即文件存放地址,应为虚拟路径
jsonObject.put("success", 1);//图片上传成功的信息码
jsonObject.put("message", "upload success!");//信息
}
return jsonObject;
}
- editormd上传图片需要回显,而springboot图片存储的路径为物理路径,需要将物理路径映射为虚拟路径,可在springboot配置文件中配置
mvc:
# 该语句说明了静态资源满足什么样的匹配条件,springboot才会处理静态资源请求
# 该语句用来阐述http请求
static-path-pattern: /static/**
servlet:
# 文件存放的物理地址
multipart:
location: /Users/zyp/Desktop/DaiMa/个人博客/blog/upload/
# 该语句规定应该在何处查找静态资源,springboot在查找静态资源时会依次在下面的配置路径中查找
# 该语句用来描述静态资源的存放位置
resources:
static-locations: classpath:static/,file:${spring.servlet.multipart.location}