Summernote – 基于 Bootstrap 的文本编辑器

一：引入相关JS和css

<!-- include libries(jQuery, bootstrap, fontawesome) -->
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

<!-- include summernote css/js-->
<link href="summernote.css" rel="stylesheet">
<script src="summernote.min.js"></script>

<!--国际化 -->
<script src="lang/summernote-zh-CN.js"></script>

二：插入编辑器

<div id="summernote">Hello Summernote</div>

三：让编辑器工作

$(document).ready(function() {
  $('#summernote').summernote();
});

四：部分API

获取编辑器内容：

$('#summernote').code();

五：图片上传部件

js代码

            $(document).ready(function() {
                $('#summernote').summernote({
                    lang: 'zh-CN', // default: 'en-US'
                    height: 300,
                    onImageUpload: function(files, editor, welEditable) {
                        sendFile(files[0],editor,welEditable);
                    }
                });
            });

            function sendFile(file,editor,welEditable) {
                data = new FormData();
                data.append("file", file);
                $.ajax({
                    data: data,
                    type: "POST",
                    url: "${base}/store/album/uploadImage/${goods.albumId?c}",
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function(data) {
                        editor.insertImage(welEditable, data.url);
                    }
                });
            }

服务器代码：

@RequestMapping(value="/album/uploadImage/{albumId}",method= RequestMethod.POST)
    @ResponseBody
    public Object uploadImage(HttpServletResponse response,HttpServletRequest request,
                            @RequestParam(value="file", required=false) MultipartFile file,@PathVariable Integer albumId){
        Map result_map = new HashMap();
        try{
            byte[] bytes = file.getBytes();
            String uploadDir = request.getSession().getServletContext().getRealPath("/upload");//request.getContextPath()+"/upload";
            File dirPath = new File(uploadDir);
            if (!dirPath.exists()) {
                dirPath.mkdirs();
            }
            String sep = System.getProperty("file.separator");
            String fileName = UUID.randomUUID().toString() + "." + getSuffix(file.getOriginalFilename());
            File uploadedFile = new File(uploadDir + sep + fileName);
            FileCopyUtils.copy(bytes, uploadedFile);

            //上传到又拍云
            String filePath = uploadDir + "/" + fileName;
            Map<String, Object> map = UpYunUtil.writeFile(fileName, filePath, true);
            String url = (String) map.get("detail");
            new File(filePath).delete();//上传到又拍云后删除

            //保存照片Url到image表
            storeService.saveImage(albumId,url);
            result_map.put("url",url);
            return result_map;
        }catch (IOException e){
            result_map.put("url","");
            return result_map;
        }
    }

下载所有文档移驾官网：http://summernote.org/