首先,页面引入UEditor,下载地址 http://ueditor.baidu.com/website/。
页面引入很简单:
![](https://img-blog.csdn.net/20180815172448339?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTU1NjgwNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
这里加两个div的原因,是因为在使用中碰到了一个问题,UEditor把我外层的div样式过滤掉了,UEditor会把引入的这个div的外层div删除掉,所有多加了一个空的div。
<div class="css"> UEeditor 会把这个样式的div删掉,所以多加一个空的div
<div>
<div id="questionContentUE" style="width: 495px;height: 450px">
</div>
</div>
</div>
初始化UEditor:
![](https://img-blog.csdn.net/20180815172909171?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTU1NjgwNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
toolbars 根据自己需要自己初始化,没有要求使用默认的全工具栏。
获得UEditor内容:
var UEdata= UE.getEditor('questionContentUE').getContent();
填充UEditor内容(在初始化UEeditor时填充):
ue.ready(function () {
ue.setContent($('#form-id [name=questionContent]').val());
});
然后是图片上传:
修改ueditor.config.js
![](https://img-blog.csdn.net/20180815173648850?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTU1NjgwNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
controller:
这里要用到 ueditor.config.json,引入json文件
![](https://img-blog.csdn.net/20180815173905460?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTU1NjgwNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
代码:
@RequestMapping(value = "/ueditor/ueditorSupport.do")
@ResponseBody
public Object ueditorSupport(HttpServletRequest request, HttpServletResponse response) throws Exception {
String action = request.getParameter("action");
if (StringUtils.equals(action, "config")) {
return JsonUtils.getInstance().readValue(ueditorConfig.getInputStream(), Map.class);
}
if (StringUtils.equals(action, "uploadimage")) {
Map<String, Object> result = new HashMap<>();
try {
MultipartRequest multipartRequest = (MultipartRequest) request;
MultipartFile file = multipartRequest.getFile("upfile");
String originalFilename = file.getOriginalFilename();
String fileType = originalFilename.substring(originalFilename.lastIndexOf(".")).toLowerCase();
byte[] bytes = IOUtils.toByteArray(file.getInputStream());
String vivofsImagePath = uploadService.uploadImage("VFS_PATH", bytes, originalFilename);
result.put("state", "SUCCESS");
result.put("name", originalFilename);
result.put("original", originalFilename);
result.put("size", bytes.length);
result.put("type", fileType);
result.put("url", VivoConfigManager.getString("vivofs.cdn.url.prefix") + vivofsImagePath);
} catch (Exception e) {
LOGGER.error("upload file failed", e);
result.put("state", "FAILED");
}
return result;
}
return "";
}
ps:ue中的表情,标号图片是要重新下载的,不然使用标号的时候会报图片错误
![](https://img-blog.csdn.net/20180815174549880?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTU1NjgwNA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
放在ue文件里就可以了。