基于bootstrap的编辑器summernote学习三

    经过前面两篇文章的铺垫，接下来就是重点了，最原始的summernote的图片上传功能还未完善，现在我们要做的就是修改这个功能，使其功能完善派上用场。

    summernote提供了一些方法的重写，我们就来重写其上传图片的方法onImageUpload，然后将data数据传送到upload.do这个controller，data数据中包含了上传图片的名字。editor.insertImage()的作用是在编辑器中显示已经上传的图片，第一个参数表示当前编辑器，第二个参数是图片保存的路径。

<script>
$(document).ready(function() {
  $('#summernote').summernote({
      height:300,
      focus:true,
      maxHeight:null,
      minHeight:null,
      onImageUpload: function(files, editor, welEditable) {
    	  sendFile(files[0],editor,welEditable);
    	  }
  });
});

function sendFile(files,editor,welEditable) {
    data = new FormData();
    data.append("file", files);
    $.ajax({
        data: data,
        type: "POST",
        url: "/lol/upload.do",
        cache: false,
        contentType: false,
        processData: false,
        success: function(data) {
        	alert(data.fileName);
        	editor.insertImage(welEditable, "img/" + data.fileName);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
        }
    });
}

    后台代码来了哦，其实就是一个简单的springMvc上传controller。着重强调：

@RequestMapping(value = "/upload.do")  
    public @ResponseBody Map upload(MultipartFile file, HttpServletRequest request) {  
  
        System.out.println("开始");  
        String path = request.getSession().getServletContext().getRealPath("/img");//项目中的img文件夹下
        String fileName = file.getOriginalFilename();  
//        String fileName = new Date().getTime()+".jpg";
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("fileName",fileName);
        
        System.out.println(fileName);
        System.out.println(path);
        File targetFile = new File(path, fileName);  
        if(!targetFile.exists()){  
            targetFile.mkdirs();  
        }  
  
        //保存  
        try {  
            file.transferTo(targetFile);  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
     
        System.out.println(fileName);
        return map;  
    }

    @ResponseBody这个注解，一般来说controller中返回的数据就会被当作页面的名字进行处理，我们这里需要将返回的数据给ajax处理，而不是跳转到某个页面，这就是此注解的作用。

    request.getSession().getServletContext().getRealPath();获取项目的真实路径，大家在eclipse中配置tomcat的时候别忘了将项目设置为部署在tomcat下，如图：

    因为用到了上传，所以别忘了配置上传用的jar包：

<dependency>
	<groupId>commons-fileupload</groupId>
	<artifactId>commons-fileupload</artifactId>
	<version>1.3.1</version>
</dependency>

    SpringMVC 用的是MultipartFile来进行文件上传，所以我们首先要配置MultipartResolver:用于处理表单中的file：

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

    总结下，整个summernote至此功能基本齐全了，图片会上传到自己的tomcat里，你的项目下的img文件夹内，ajax收到返回的文件名传给editor.insertImage()方法，使上传的图片能够在编辑器内显示。这下，我们可以尽情享用summernote了。