Springboot整合UEditor
啰嗦:
最近的项目(springboot项目)当中需要用到百度编辑器UEditor,发现springboot无法直接集成UEditor,其中很多功能用不了,例如上传图片。分析了下原因.UEditor的config.js配置文件在springboot项目目录下无法读到对应的配置文件。
解决问题(图片上传)
- 前端页面代码
1.1引入UEditor
<link rel="stylesheet" href="static/layuiadmin/layui/css/layui.css" media="all"> <link rel="stylesheet" href="static/layuiadmin/style/admin.css" media="all"> <link rel="stylesheet" type="text/css" href="static/js/ueditor/themes/default/css/ueditor.css" /> <link rel="stylesheet" type="text/css" href="static/js/ueditor/dialogs/emotion/emotion.css" /> <script type="text/javascript" src="static/js/ueditor/ueditor.config.js"></script> <script type="text/javascript" src="static/js/ueditor/ueditor.all.min.js"></script> <script type="text/javascript" charset="utf-8" src="static/js/ueditor/lang/zh-cn/zh-cn.js"></script> <script type="text/javascript" src="static/js/jquery/jquery-1.9.1.min.js"></script> |
目录结构
1.2页面载入UEditor
Html代码
<div class="layui-form-item layui-form-text"> <label class="layui-form-label">公告内容</label> <div class="layui-input-block"> <script id="editor" name="editor" type="text/plain" style="height:300px;">${doc.content}</script> </div> </div> |
Js代码
var ue = UE.getEditor('editor'); |
- 修改UEditor配置
2.1修改ueditor.config.js这个文件
2.2编写方法读取配置文件
下面方法是获取UEditor的请求
@RequestMapping("/config") public String config(String action) { if(action.equals("config")) { return "redirect:/static/js/ueditor/jsp/config.json"; }else if(action.equals("upload")){ return "forward:/doc/upload"; } return ""; } |
2.3修改config.json这个文件
3.编写上传图片的代码
注意:图片回显必须按照UEditor的json格式返回json,下面有封装好的json对应的实体类。
3.1上传图片
@Value(value = "${gycms.imgUrl}") private String imgUrl;
@Value(value = "${gycms.showUrl}") private String showUrl; //上传图片 @RequestMapping("/upload") @ResponseBody public ResultUed upload(@RequestParam("upfile") MultipartFile mf) { HashMap<String, Object> res = new HashMap<String, Object>(); try { if(!mf.isEmpty()) { //上传文件名 String filename = mf.getOriginalFilename(); //将上传文件保存到一个目标文件当中 String newfile=getNewNameByDate()+filename.substring(filename.lastIndexOf(".")); File file = new File(imgUrl,newfile); mf.transferTo(file); String fileurl=showUrl+newfile; res.put("src", fileurl); return ResultUed.getInstance().uploadSuccess(fileurl); } else { return ResultUed.getInstance().uploadError(); } } catch (Exception e) { return ResultUed.getInstance().uploadError(); } } public static String getNewNameByDate(){ SimpleDateFormat format = new SimpleDateFormat("yyyyMMddHHmmssSSS"); return format.format(new Date()); } |
3.2返回json格式
@Data public class ResultUed implements Serializable{ private static ResultUed resultUed; private String state="SUCCESS"; private String original="0x00.jpg"; private String size="-1"; private String title=""; private String type=".jpg"; private String url; private ResultUed() {}; public static ResultUed getInstance(){ if(resultUed==null) { synchronized (ResultUed.class) { if(resultUed==null) { resultUed=new ResultUed(); } } } return resultUed; } public ResultUed(String state, String original, String size, String title, String type, String url) { super(); this.state = state; this.original = original; this.size = size; this.title = title; this.type = type; this.url = url; }
public ResultUed uploadSuccess(String url) {
return new ResultUed(state, original, size, title, type, url); }
public ResultUed uploadError() {
return new ResultUed("Error", original, size, title, type, ""); } }
|
效果图:
至此springboot集成UEditor实现上传图片功能完成,其他的功能(涂鸦.....)感兴趣的朋友可以研究一下。