首先,页面引入UEditor,下载地址 http://ueditor.baidu.com/website/。
页面引入很简单:
这里加两个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:
toolbars 根据自己需要自己初始化,没有要求使用默认的全工具栏。
获得UEditor内容:
var UEdata= UE.getEditor('questionContentUE').getContent();
填充UEditor内容(在初始化UEeditor时填充):
ue.ready(function () { ue.setContent($('#form-id [name=questionContent]').val()); });
然后是图片上传:
修改ueditor.config.js
controller:
这里要用到 ueditor.config.json,引入json文件
代码: @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中的表情,标号图片是要重新下载的,不然使用标号的时候会报图片错误
放在ue文件里就可以了。