业务需求：
通过后台编辑文章和图片，上传到前端界面，展示新闻消息模块。这个时候，需要一款简洁的编辑器，百度编辑器是最常用的一种，但是功能太过于复杂，而wangEditor - 轻量级web富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器，值得拥有。
wangEditor—— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。
官网：文档：/wangfupeng/wangeditor3/332599源码：/wangfupeng1988/wangEditor
使用示例：
前端代码：
<!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="/jquery-1.8.0.min.js"></script><script type="text/javascript" src="release/wangEditor.min.js"></script><script>var E = window.wangEditorvar 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;}@Overridepublic String toString() {return "WangEditor [errno=" + errno + ", data=" + Arrays.toString(data)+ "]";}}
Controller
//图片上传@RequestMapping(value = "/upload",method=RequestMethod.POST)@ResponseBodypublic 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。
注：
关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。公众号回复“1”，拉你进程序员技术讨论群。
