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
##三、開講内容
大的方向為以下三個内容：
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>