實例化后的summernote 是這樣子的
很漂亮對吧，而我做成頁面效果是這樣的：
先說說實例化一個summernote 的方法把，其實也不難，jq 選擇器選擇一個要變成富文本編輯器的元素然后調用 summernote 方法傳入一個對象作為參數便可，參數是一個對象，屬性就是這個富文本的一些樣式屬性，如下：
上面的屬性是一些比較常用的屬性，更多屬性可以查看官方文檔。特別注意一點的是callbacks 屬性，它的作用是summernote 編輯器里面的一些功能要實現的回調方法，這里我的需求只是上傳圖片所以只重寫了一次 onImageUpload 這個方法，方法內部調用一個自己定義的函數（我是從百度找的，后面會介紹這個函數）
實例化后，第一步要解決的就是樣式問題。
我的做的效果是一個彈出層里面包含一個編輯內容的輸入框，所以引發了以下的問題：
1、summernote 圖片上傳，視頻上傳的功能按鈕點擊后會彈出一個bootstrap 的模態框，而這個模態框剛好把這幾個彈窗遮擋住了導致不能操作，問題效果圖如下：
然后我右鍵 檢查這個黑色背景究竟是什么東東 發現了一些值得關注的問題：
留意這兩個地方，就是這個 modal-backdrop 搞的鬼！你可以試試把右側modal-backdrop 樣式的 z-index 取消勾選，將會是如下效果：
哇塞 原來罪惡的根源在 z-index 這里於是我知道怎么改了，把自己的css 文件改成如下這樣即可：
一定要加上 !important 使其權重最高遮蓋掉默認樣式，於是上傳圖片的模態框便可以展現出來了。
接下來便是上傳圖片環節，一個富文本編輯器最有趣的地方就是可以上傳圖片，然后再存放在數據庫，上面說到了重寫上傳圖片的回調函數，所以這里把回調函數內部執行的 sendFile 函數的代碼貼上來：
//選擇圖片時把圖片上傳到服務器再讀取服務器指定的存儲位置顯示在富文本區域內 function sendFile(files, editor, $editable) { var formdata = new FormData(); formdata.append("file", $('.note-image-input')[0].files[0]); $.ajax({ data : formdata, type : "POST", url : "/umlProject/php/receiveFile.php", //圖片上傳出來的url，返回的是圖片上傳后的路徑，http格式 cache : false, contentType : false, processData : false, dataType : "json", success: function(data) { //data是返回的hash,key之類的值，key是定義的文件名 $('#user-work-content').summernote('insertImage', data.message); }, error:function(){ alert("上傳失敗"); } }); }
這個函數的原理是這樣的：
因為summernote 上傳圖片的彈出層本身是一個選擇文件的空間只不過樣式設置得好看一點而已，另外這里用到了異步上傳的方法使頁面無刷新，所以就要用到 FormData 這個方法，具體用法看上面的代碼你就能懂，很簡單。
然后發送ajax 請求，注意這幾個屬性：
cache : false, //無緩存 contentType : false, //不重寫表單頭部信息，因為提交過去的是上傳文件的表單頭部 processData : false //不序列化data 直接提交data
整個函數的思路是這樣的：
1、首先，你要把需要上傳的圖片上傳到后台作處理，后台把圖片存放到服務器而不是數據庫，數據庫的表只保存着圖片在服務器的路徑；
2、后台處理成功之后記得返回一個圖片的路徑的數據給前端，然后前端將符文本編輯器的元素調用 summernote('insertImage', data.message)方法把服務器的圖片路徑插入到符文本編輯器里面展現給用戶看
然后在編輯完文本之后，就可以發送ajax 給后台，把文本內容（其實是一段html 代碼）插入到數據庫的表保存，輸出的時候直接輸出html 結構就可以呈現出來了。
值得注意的一點是，符文本內容的圖片代碼：
嗯，看上去沒毛病，數據庫也可以順利插入，但是取出的時候就出現大事故了！
因為我返回的是 json 格式的數據所以圖片里面的雙引號就會引起沖突！所以后台返回數據的時候一定要注意這一點，把雙引號換成單引號，php 的方法是 str.replace("被替換的字符"，"替換的字符"，"要執行替換操作的字符串")
話到這里，summenote 的一些操作就介紹到這里了，如果有錯誤還望提出，一起進步！
下一篇會介紹一些 summernote 的小技巧：