1.官网下载对应的版本https://ueditor.baidu.com/website/download.html
2.下载后解压,把整个文件放到项目下 ,index页面可以删掉
3.引入必要的js
4.以上步骤都是很简单的,百度一大把,就不啰嗦了,直接进入正题
一般情况下,遇到的都是图片的上传问题。如果不修改配置,那么上传图片框会提示未正确配置,然后上传不了图片。那么我们就需要修改几处配置了
这里是后台返回的json数据,重定向到富文本编辑器的config.josn就行,目的只是为了不报错。
@RequestMapping(value="ueditor")
public void ueditor(HttpServletResponse response) {
try {
response.sendRedirect("/static/plugins/ueditor/jsp/config.json");
} catch (IOException e) {
e.printStackTrace();
}
}
接下来就是关键了,将这段js代码写在当前页面。
//建议使用工厂方法getEditor创建和引用编辑器实例,
//如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return ctx + '/announceAnnouncement/fileUpload'; //对应后台上传文件的方法
} else if (action == 'uploadvideo') {
return '';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
后台方法(我这里返回的是map,json应该也可以):
@RequestMapping("fileUpload")
@ResponseBody
public Map<String, Object> ueditor(HttpServletRequest request) {
Map<String, Object> map = new HashMap<String, Object>();
MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
MultipartFile multipartFile = multipartHttpServletRequest.getFile("upfile");
if (multipartFile != null) {
InputStream inputStream = null;
try {
inputStream = multipartFile.getInputStream();
String fileName = multipartFile.getOriginalFilename();
String suffix = fileName.substring(fileName.lastIndexOf('.') + 1);
FastDFSClient fastDFSClient = new FastDFSClient("classpath:config/application.properties");
//这是上传文件的工具类,根据自己的需求返回图片能访问的路径就行
String rePath = fastDFSClient.uploadFile(multipartFile.getBytes(), suffix);
String fileServerUrl = Global.getString("file.server.url");
//这几个值很关键
map.put("state", "SUCCESS");
//这里是图片完整路径,不管是本地路径,还是文件服务器路径都行
map.put("url",fileServerUrl+rePath);
map.put("original",fileName);
map.put("title",fileName);
} catch (Exception e) {
e.printStackTrace();
} finally {
FileUtils.closeStream(inputStream);
}
}
return map;
}
这里会用到后台返回的json,修改一下url就行
以上是个人的项目上遇到的问题,以及解决方法,如果有什么疑问,欢迎留言。