业务需求：

通过后台编辑文章和图片，上传到前端界面，展示新闻消息模块。这个时候，需要一款简洁的编辑器，百度编辑器是最常用的一种，但是功能太过于复杂，而wangEditor - 轻量级web富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器，值得拥有。

 

wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

• 官网：
• 文档：
• 源码：

使用示例：

前端代码：

            
                                    
    
        
    
        
    
            
     
请在此输入内容
        
    
                

服务器代码

导入依赖：

        
     
      commons-fileupload
         
     
      commons-fileupload
         
     
      1.3.1
     
    

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。

注：

关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。公众号回复“1”，拉你进程序员技术讨论群。