由於之前專案中富文字編輯框中上傳圖片功能中只能新增圖片url，不能從本地上傳，這個問題在好多國外富文字編輯軟體中都得以體現，所以準備換一個。

   專案是採用springmvc+angularjs+bootstarp+H5構建的，網上富文字編輯框多種多樣，就配合專案找一個summernote來用吧，通過檢視官方文件和網上的參考資料以及自己的摸索，要不了多長時間就搞定了，在這兒說一下詳細步驟：

  1、從官網下載開發版summernote檔案加入專案中

  2、從檔案中找出summernote.css與summernote.js匯入當前頁面

  3、在頁面合適位置插入程式碼：

<div 
 
class="summernote" name="htmlcontent2" ng-model="product.productDescribe" ta-disabled='disabled'>
</div>

  4、重點開始了，後幾步所需要的程式碼會附圖，這裡簡單說一下，先初始化summernote，

$('.summernote').summernote(）;

  5、由於summernote預設是以二進位制形式存入資料庫的，而我們一般會只存圖片路徑，所以上傳圖片的方法要重寫

 ，這是最麻煩的地方

  6、獲取文字編輯內容，網上看到的是

 $('.summernote'
 
).code（）;

 然而寫出來是行不通的，後來才發現這個是以前的方法，現在是這個

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

 7、剩下的就是配合你的程式碼該上傳上傳，該提交提交了

這個是完整的配置、上傳、獲取內容程式碼

$(document).ready(function() {
    $('.summernote').summernote({
        height: 300,
width:800,
lang: 'zh-CN',
focus:true,
toolbar: [
            ['style', ['bold', 'italic'
 
, 'underline', 'clear']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['insert', ['picture', 'video']]
        ],
callbacks: {
            // onImageUpload的引數為files，summernote支援選擇多張圖片
onImageUpload : function(files) {
                var $files = $(files);
// 通過each方法遍歷每一個file
$files.each(function() {
                    var file = this;
// FormData，新的form表單封裝，具體可百度，但其實用法很簡單，如下
var data = new FormData();
// 將檔案加入到file中，後端可獲得到引數名為“file”
data.append("file", file);
// ajax上傳
$.ajax({
                        data : data,
type : "POST",
url : "/action/sysUpload/uploadProductImage",// div上的action
cache : false,
contentType : false,
processData : false,
// 成功時呼叫方法，後端返回json資料
success : function(response) {
                            console.log(response+response.status+response.data);
if (response.status==1) {
                                // 檔案不為空
if (response.data) {
                                    // 獲取後臺資料儲存的圖片完整路徑
var imageUrl =response.data[0];
// 插入到summernote
$('.summernote').summernote('insertImage', imageUrl, function($image) {
                                       });
}
                            }

                        },
});
});
}
        }
    });
});

function getContext(n){
    var sHTML = $('.summernote').eq(n).summernote('code');
return sHTML;}

最後解釋一下，callbacks中時重寫的上傳圖片方法，遍歷圖片利用ajax上傳至後臺，然後拿到存放路徑進入回撥方法

並插入文字編輯框中，這裡沒做錯誤判斷，需要的自行新增就可以，最後的獲取文字內容，由於用的spa單頁面應用，一個頁面中存在多個編輯框，所以用n來獲取某一個並返回。

  以上便是對於summernote的初次使用，親測可用。有不對的地方還望大家指點。。。