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

實例化後的summernote 是這樣子的

 

很漂亮對吧，而我作成頁面效果是這樣的：

 

先說說實例化一個summernote 的方法把，其實也不難，jq 選擇器選擇一個要變成富文本編輯器的元素而後調用 summernote 方法傳入一個對象做爲參數即可，參數是一個對象，屬性就是這個富文本的一些樣式屬性，以下：

 

上面的屬性是一些比較經常使用的屬性，更多屬性能夠查看官方文檔。特別注意一點的是callbacks 屬性，它的做用是summernote 編輯器裏面的一些功能要實現的回調方法，這裏個人需求只是上傳圖片因此只重寫了一次 onImageUpload 這個方法，方法內部調用一個本身定義的函數（我是從百度找的，後面會介紹這個函數）

 

 

 

實例化後，第一步要解決的就是樣式問題。

個人作的效果是一個彈出層裏面包含一個編輯內容的輸入框，因此引起了如下的問題：

一、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


整個函數的思路是這樣的：

一、首先，你要把須要上傳的圖片上傳到後臺做處理，後臺把圖片存放到服務器而不是數據庫，數據庫的表只保存着圖片在服務器的路徑；
二、後臺處理成功以後記得返回一個圖片的路徑的數據給前端，而後前端將符文本編輯器的元素調用 summernote('insertImage', data.message)方法把服務器的圖片路徑插入到符文本編輯器裏面展示給用戶看


而後在編輯完文本以後，就能夠發送ajax 給後臺，把文本內容（實際上是一段html 代碼）插入到數據庫的表保存，輸出的時候直接輸出html 結構就能夠呈現出來了。
值得注意的一點是，符文本內容的圖片代碼：

嗯，看上去沒毛病，數據庫也能夠順利插入，可是取出的時候就出現大事故了！

由於我返回的是 json 格式的數據因此圖片裏面的雙引號就會引發衝突！因此後臺返回數據的時候必定要注意這一點，把雙引號換成單引號，php 的方法是 str.replace("被替換的字符"，"替換的字符"，"要執行替換操做的字符串")

話到這裏，summenote 的一些操做就介紹到這裏了，若是有錯誤還望提出，一塊兒進步！

下一篇會介紹一些 summernote 的小技巧：