项目地址
https://ueditor.baidu.com/website/
下载步骤
开始整合
因为项目使用的springboot框架,而UEditor对于java后端的支持仅仅是给了一个jsp文件,因此,需要对该文件进行一下处理,修改为面向springboot的统一controller。
1、放到项目中
2、引入ueditor需要的jar包
3、创建test.html,结构如下
4、模板建好了,我们来写控制器,结构及代码如下
5、访问:http://localhost:8080/admin/test ,出现如下界面,说明ueditor引入成功。
图片上传
1、点击上传按钮却没有任何反应,在浏览器中按F12打开开发者工具发现如下提示:
2、spring boot中不能直接将请求发送到这个controller.jsp,请求会变成下载地址,所以需要新建一个一个控制器加载配置文件,
需要把配置文件中此处修改掉,修改成新建控制器的路径。
以下是控制器全部代码:
@Controller
public class UploadController {
@Value("${root.path}")
private String rootPath;
@ResponseBody
@RequestMapping("/config")
public Object demo(HttpServletRequest request, HttpServletResponse response){
SimpleDateFormat formater = new SimpleDateFormat("yyyyMMdd");
String path = "//" + formater.format(new Date());
String action = request.getParameter("action");
String rPath = ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static/admin/ueditor/jsp";
String sPath = rootPath + CommonConstnts.IMAGES_PATH;
if(action.equals("uploadimage")){
MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
MultipartFile multipartFile = multipartHttpServletRequest.getFile("upfile");
String filePath = sPath+path;
File file = new File(filePath);
if(!file.exists()){
file.mkdirs();
}
String imgName = multipartFile.getOriginalFilename();
String hz = imgName.substring(imgName.indexOf("."));
String uuid = UUID.randomUUID().toString();
String uuid1 = UUID.randomUUID().toString();
uuid = uuid.replace("-","");
uuid1 = uuid1.replace("-","");
String name = filePath+"//"+uuid+hz;
String fileName = filePath+"//"+uuid1+hz;
File f = new File(name);
File f1 = new File(fileName);
try {
multipartFile.transferTo(f);
InputStream inputStream = new FileInputStream(f);
OutputStream os = new FileOutputStream(f1);
ImageUtil.resizeImage(inputStream,os,500,750,hz.replace(".",""));
f.delete();
}catch (Exception e){
e.printStackTrace();
}
Map<String,Object> map = new HashMap<String,Object>();
map.put("original",multipartFile.getOriginalFilename());
map.put("name",multipartFile.getOriginalFilename());
map.put("url",CommonConstnts.IMAGES_PATH+path+"//"+uuid1+hz);
map.put("size",multipartFile.getSize());
map.put("type","."+hz);
map.put("state","SUCCESS");
return map;
}else{
response.setContentType("application/json");
try {
response.setCharacterEncoding("utf-8");
request.setCharacterEncoding( "utf-8" );
PrintWriter writer = response.getWriter();
writer.write(new ActionEnter(request,rPath).exec());
writer.flush();
writer.close();
}catch (Exception r){
r.printStackTrace();
}
}
return null;
}
}
其中ImageUtil.resizeImage(inputStream,os,500,750,hz.replace(".",""));是一个公用方法,用来压缩图片文件大小和尺寸,可以参考另一篇博客。
rPath为config.json所有在配置文件路径。当初始化的时候一定要调 config.json返回给编辑器,这样就可以在 config.json文件中修改上传的各种配置。
代码中的rootPath需要在配置文件进行配置(注解引入即可使用),需要把上传图片保存在本机上并返回物理路径。
3、以下是config.json中的配置
4、最后成功的截图