一、背景
任何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的地方,类似下图
八、完成演示