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