Springboot整合UEditor

 

啰嗦：

最近的项目(springboot项目)当中需要用到百度编辑器UEditor,发现springboot无法直接集成UEditor,其中很多功能用不了，例如上传图片。分析了下原因.UEditor的config.js配置文件在springboot项目目录下无法读到对应的配置文件。

 

解决问题（图片上传）

1. 前端页面代码

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');

 

1. 修改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实现上传图片功能完成，其他的功能（涂鸦.....）感兴趣的朋友可以研究一下。