富文本编辑器 之 Wang.editer

#富文本编辑器简介：

1.富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。富文本编辑器不同于文本编辑器，程序员可到网上下载免费的富文本编辑器内嵌于自己的网站或程序里（当然付费的功能会更强大些），方便用户编辑文章或信息。比较好的文本编辑器有kindeditor,fckeditor等

2.富文本编辑器提供类似于 Microsoft Word 的编辑功能，容易被不会编写 HTML 的用户并需要设置各种文本格式的用户所喜爱。它的应用也越来越广泛。最先只有 IE 浏览器支持，其它浏览器相继跟进，在功能的丰富性来说，还是 IE 强些。虽然没有一个统一的标准，但对于最基本的功能，各浏览器提供的 API 基本一致，从而使编写一个跨浏览器的富文本编辑器成为可能。

我们使用的是wangEditor，这是一个开源的第三方富文本编辑器。 编辑器效果：

<div id="editor"> <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p> </div> <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！--> <script type="text/javascript" src="/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#editor') // 或者 var editor = new E( document.getElementById('editor') ) editor.create() </script>

#代码实现

1.前端页面设置 <form action="${pageContext.request.contextPath }/img/add" enctype="multipart/form-data" method="post"> <div class="form-group"> <label for="fileImg">轮播图上传</label> <input type="file" name="fileImg"> </div> <div class="form-group"> <label for="isenabled">是否启用:</label> <label class="radio-inline"> <input type="radio" name="isenabled" id="isenabled" value="true" checked="checked">是 </label> <label class="radio-inline"> <input type="radio" name="isenabled" id="isenabled" value="false">否 </label> </div> <div class="form-group"> <label for="intro">轮播图简述</label> <div id="intro"></div> <input type="hidden" id="txtIntro" name="intro" /> </div> <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor"> <a class="btn btn-large" data-edit="bold"><i class="icon-bold"></i></a> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary">新增轮播</button> </div> </form>

2.上传文件使用的前端页面，必须按照如下标准：

2.1 post提交数据2.2 enctype属性被修改为：multipart/form-data2.3使用上传文件的file标签

3 .配置文件上传

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize"> <value>100000</value> </property> <property name="defaultEncoding"> <value>UTF-8</value> </property> </bean>

3.代码实现

@RequestMapping(value="/add",method=RequestMethod.POST) public void add(Images img,HttpServletRequest req) throws Exception{ /** * 需求：新增上传文件数据，新增成功跳转查询 */ //获取到上传的文件数据 MultipartFile fileImg = img.getFileImg(); ServletContext context = req.getServletContext(); //获取原始文件名 String oldName = fileImg.getOriginalFilename(); System.out.println(oldName); System.out.println(context.getMimeType(oldName)); //判断上传文件是否为图片 if (!context.getMimeType(oldName).startsWith("image/")) { return; } //获取存储路径 String realPath = context.getRealPath("/upload"); //创建新名字 String newName=UUID.randomUUID().toString()+"."+FilenameUtils.getExtension(oldName); fileImg.transferTo(new File(realPath,newName)); //存储数据 img.setStorepath(realPath); img.setStorename(newName); service.addImg(img); }

Images类

private Integer imgid; private String storepath; private String storename; private String intro; private Boolean isenabled; private Date inputdate=new Date(); private MultipartFile fileImg;

API MultipartFile ：接收文件数据，命名必须和file标签name属性一致 getOriginalFilename：获取上传的文件名 transferTo：存储文件