Bootstrap 可视化HTML编辑器之summernote，用其官网上的介绍就是“Super Simple WYSIWYG editor”，不过在我看来，与bootstrap中文官网上提供的“bootstrap-wysiwyg”要更simple，更漂亮，更好用！
虽然我之前尝试过使用bootstrap-wysiwyg，可参照Bootstrap wysiwyg富文本数据如何保存到mysql，但事后诸葛亮的经验告诉我，summernote绝对是更佳的富文本编辑器，这里对其工作team点三十二个赞！！！！！
经过一天时间的探索，对summernote有所掌握，那么为了更广大前端爱好者提供便利，我将费劲一番心血来介绍一下summernote，超级福利啊。
##一、官方API和源码下载
工欲善其事必先利其器，首先把summernote的源码拿到以及对应官方API告诉大家是首个任务！
官网（demo和api）
github源码下载，注意下载开发版
##二、效果图
效果图1
效果图2
效果图3
##三、开讲内容
大的方向为以下三个内容：
summernote的页面布局（资源引入、初始参数）
summernote从本地上传图片方法（前端onImageUpload方法、后端springMVC文件保存）
summernote所在form表单的数据提交
###①、summernote的页面布局
<!DOCTYPE html> <html lang="zh-CN"> <%@ include file="/components/common/taglib.jsp"%> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>summernote - bs3fa4</title> <!-- include jquery --> <script type="text/javascript" src="${ctx}/components/jquery/jquery.js"></script> <!-- include libs stylesheets --> <link type="text/css" rel="stylesheet" href="${ctx}/components/bootstrap/css/bootstrap.css" /> <script type="text/javascript" src="${ctx}/components/bootstrap/js/bootstrap.min.js"></script> <!-- include summernote --> <link type="text/css" rel="stylesheet" href="${ctx}/components/summernote/summernote.css" /> <script type="text/javascript" src="${ctx}/components/summernote/summernote.js"></script> <script type="text/javascript" src="${ctx}/components/summernote/lang/summernote-zh-CN.js"></script> <script type="text/javascript"> $('div.summernote').each(function() { var $this = $(this); var placeholder = $this.attr("placeholder") || ''; var url = $this.attr("action") || ''; $this.summernote({ lang : 'zh-CN', placeholder : placeholder, minHeight : 300, dialogsFade : true,// Add fade effect on dialogs dialogsInBody : true,// Dialogs can be placed in body, not in // summernote. disableDragAndDrop : false,// default false You can disable drag // and drop callbacks : { onImageUpload : function(files) { var $files = $(files); $files.each(function() { var file = this; var data = new FormData(); data.append("file", file); $.ajax({ data : data, type : "POST", url : url, cache : false, contentType : false, processData : false, success : function(response) { var json = YUNM.jsonEval(response); YUNM.debug(json); YUNM.ajaxDone(json); if (json[YUNM.keys.statusCode] == YUNM.statusCode.ok) { // 文件不为空 if (json[YUNM.keys.result]) { var imageUrl = json[YUNM.keys.result].completeSavePath; $this.summernote('insertImage', imageUrl, function($image) { }); } } }, error : YUNM.ajaxError }); }); } } }); }); </script> </head> <body> <div class="container"> <form class="form-horizontal required-validate" action="#" enctype="multipart/form-data" method="post" οnsubmit="return iframeCallback(this, pageAjaxDone)"> <div class="form-group"> <label for="" class="col-md-2 control-label">项目封面</label> <div class="col-md-8 tl th"> <input type="file" name="image" class="projectfile" value="${deal.image}"/> <p class="help-block">支持jpg、jpeg、png、gif格式，大小不超过2.0M</p> </div> </div> <div class="form-group"> <label for="" class="col-md-2 control-label">项目详情</label> <div class="col-md-8"> <div class="summernote" name="description" placeholder="请对项目进行详细的描述，使更多的人了解你的" action="${ctx}/file">${deal.description}</div> </div> </div> </form> </div> </body> </html>
