實例化後的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 的小技巧：

【實踐】簡潔大方的summernote 富文本編輯器插件的用發——實例篇