业务需求：
通过后台编辑文章和图片，上传到前端界面，展示新闻消息模块。这个时候，需要一款简洁的编辑器，百度编辑器是最常用的一种，但是功能太过于复杂，而wangEditor - 轻量级web富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器，值得拥有。
图片.png
wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。
使用示例：
前端代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .toolbar { border: 1px solid #ccc; width: 800px; } .text { border: 1px solid #ccc; height: 400px; width: 800px; } </style> </head> <body> <div id="div1" class="toolbar"></div> <div style="padding: 5px 0; color: #ccc"></div> <div id="div2" class="text"> <p>请在此输入内容</p> </div> </body> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="release/wangEditor.min.js"></script> <script> var E = window.wangEditor var editor = new E('#div1', '#div2') // 两个参数也可以传入 elem 对象，class 选择器 //开启debug模式 editor.customConfig.debug = true; // 关闭粘贴内容中的样式 editor.customConfig.pasteFilterStyle = false // 忽略粘贴内容中的图片 editor.customConfig.pasteIgnoreImg = true // 使用 base64 保存图片 //editor.customConfig.uploadImgShowBase64 = true // 上传图片到服务器 editor.customConfig.uploadFileName = 'myFile'; //设置文件上传的参数名称 editor.customConfig.uploadImgServer = 'upload.do'; //设置上传文件的服务器路径 editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M //自定义上传图片事件 editor.customConfig.uploadImgHooks = { before: function(xhr, editor, files) { }, success: function(xhr, editor, result) { console.log("上传成功"); }, fail: function(xhr, editor, result) { console.log("上传失败,原因是" + result); }, error: function(xhr, editor) { console.log("上传出错"); }, timeout: function(xhr, editor) { console.log("上传超时"); } } editor.create() </script> </html>
服务器代码
导入依赖：
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency>
pojo：
import java.util.Arrays; public class WangEditor { private Integer errno; //错误代码，0 表示没有错误。 private String[] data; //已上传的图片路径 public WangEditor() { super(); } public WangEditor(String[] data) { super(); this.errno = 0; this.data = data; } public Integer getErrno() { return errno; } public void setErrno(Integer errno) { this.errno = errno; } public String[] getData() { return data; } public void setData(String[] data) { this.data = data; } @Override public String toString() { return "WangEditor [errno=" + errno + ", data=" + Arrays.toString(data) + "]"; } }
Controller
//图片上传 @RequestMapping(value = "/upload",method=RequestMethod.POST) @ResponseBody public WangEditor uploadFile( @RequestParam("myFile") MultipartFile multipartFile, HttpServletRequest request) { try { // 获取项目路径 String realPath = request.getSession().getServletContext() .getRealPath(""); InputStream inputStream = multipartFile.getInputStream(); String contextPath = request.getContextPath(); // 服务器根目录的路径 String path = realPath.replace(contextPath.substring(1), ""); // 根目录下新建文件夹upload，存放上传图片 String uploadPath = path + "upload"; // 获取文件名称 String filename = MoteUtils.getFileName(); // 将文件上传的服务器根目录下的upload文件夹 File file = new File(uploadPath, filename); FileUtils.copyInputStreamToFile(inputStream, file); // 返回图片访问路径 String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/upload/" + filename; String [] str = {url}; WangEditor we = new WangEditor(str); return we; } catch (IOException e) { log.error("上传文件失败", e); } return null; }
效果如下所示：
就是这么的简单方便，三分钟即可上手使用，在众多的富文本编辑器中，尤其是带图片上传的需求，这款真是当之无愧的存在，简单轻便soeasy。
