囉嗦：
最近的項目(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實現上傳圖片功能完成，其他的功能（塗鴉.....）感興趣的朋友可以研究一下。