springboot集成ueditor

一、背景

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

二、添加pom依赖

<!-- https://mvnrepository.com/artifact/cn.songxinqiang/com.baidu.ueditor --><dependency><groupId>cn.songxinqiang</groupId><artifactId>com.baidu.ueditor</artifactId><version>1.1.2-offical</version></dependency>

三、下载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<String, String> imgUpload3(MultipartFile upfile) {
System.out.println("开始上传");
Map<String, String> result = new HashMap<String, String>();
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;
}

五、修改配置文件

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

七、集成ueditor的html文件修改

引入js文件

   

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

八、完成演示