springboot集成ueditor

一、背景

任何web项目或多或少会用到富文本框,而富文本框又以百度富文本框(ueditor)最为全面实用。最近大多使用springboot框架,里面的上传文件是我自己封装的上传到远程fastdfs图片服务器,所以集成ueditor时遇到很多问题,今天得以解决。写下此文档可以给初次使用springboot集成ueditor的人借鉴,同时自己以后项目也可以复用。


二、添加pom依赖

		
		
			cn.songxinqiang
			com.baidu.ueditor
			1.1.2-offical
		

三、下载ueditor

Ueditor官网下载 http://ueditor.baidu.com/website/  Jsp版本,或者下载我已经改好配置文件的

http://pan.baidu.com/s/1nu6RvzN 密码:v83n

下载后将其放到resources/static下


四、编写图片上传控制器

@RequestMapping(value = "/admin/upload", method = RequestMethod.POST)
@ResponseBody
public Map imgUpload3(MultipartFile upfile) {
System.out.println("开始上传");
Map result = new HashMap();
String path = "";
try {
path = fastDFSClientWrapper.uploadFile(upfile);
} catch (IOException e) {
System.out.println("富文本框图片上传错误");
// e.printStackTrace();
}
System.out.println(path);
File file = new File(path);
result.put("url", path);
result.put("size", String.valueOf(file.length()));
result.put("type",
file.getName().substring(file.getName().lastIndexOf(".")));
result.put("state", "SUCCESS");


return result;
}


五、修改配置文件

springboot集成ueditor_第1张图片


六、修改ueditor中的image.html文件

springboot集成ueditor_第2张图片

七、集成ueditor的html文件修改

引入js文件

    springboot集成ueditor_第3张图片

需要插入ueditor的地方,类似下图

springboot集成ueditor_第4张图片

八、完成演示

springboot集成ueditor_第5张图片


springboot集成ueditor_第6张图片

你可能感兴趣的:(springboot)