一、summernote是一個界面比較簡潔美觀的富文本編輯器。javascript
二、文件導入（官方下載地址：http://summernote.org/）css
下載回來的文件夾是這樣的：html
插件的核心文件放在 dist 這個文件夾裏面，文件夾內有三個起着重要做用的文件前端
font文件夾： 將它放在你項目的css 文件的文件夾內不然會加載不出富文本編輯器上面的功能圖標java
另外還有一個語言的文件須要咱們導入一下：jquery
這個文件夾裏面有18個國家的語言文件 其中 zh-CN 就是中文的語言文件ajax
總結下來咱們須要的文件是：（注意一點font文件夾，將它放在你項目的css 文件的文件夾內不然會加載不出富文本編輯器上面的功能圖標）json
三、 前端代碼實例(使用Summernote富文本編輯器須要建立一個summernote實例)：bootstrap
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Summernote</title> 6 <link rel="stylesheet" href="css/bootstrap.css" rel="stylesheet"> 7 <script src="js/jquery.min.js"></script> 8 <script src="js/bootstrap.js"></script> 9 <link href="css/summernote.css" rel="stylesheet"> 10 <script src="js/summernote.js"></script> 11 <script type="text/javascript" src="js/summernote-zh-CN.js" ></script> 12 </head> 13 <body> 14 <div style="margin-left: 20%;width: 500px;height: 200px;"> 15 <div id="summernote"></div> 16 </div> 17 <br /><br /><br /><br /><br /><br /><br /><br /><br /> 18 <div style="margin-left: 20%;width: 800px;height: 400px;"> 19 <button id="btn1">顯示書寫的內容</button><br /><br /> 20 <div id="html" style="width: 800px;height: 300px;background-color: lavender;border: 1px solid;"></div> 21 </div> 22 <script> 23 $(document).ready(function() { 24 //jquery建立一個summernote實例 25 $('#summernote').summernote({ 26 //功能圖標改成中文 27 lang: 'zh-CN', 28 //預設內容 29 placeholder: '請在此輸入內容...', 30 height: 300, 31 width:800, 32 //回調函數 33 callbacks: { 34 //初始化 35 onInit: function() { 36 //init 37 }, 38 //焦點 39 onFocus: function() { 40 //focus 41 }, 42 //圖片文件上傳 43 onImageUpload: function(files, editor, $editable) { 44 data = new FormData(); 45 data.append("file", files[0]); 46 $.ajax({ 47 data : data, 48 type : "POST", 49 url : "", 50 cache : false, 51 contentType : false, 52 processData : false, 53 dataType : "json", 54 success: function(data) { 55 //[服務器所在文件所在目錄位置]通常爲"http://119.23.216.181/RoboBlogs/Upload_File/default_show.png" 56 $('#summernote').summernote('insertImage', "[服務器所在文件所在目錄位置]"); 57 }, 58 error:function(){ 59 alert("上傳失敗"); 60 } 61 }); 62 } 63 } 64 65 }); 66 $("button#btn1").click(function(){ 67 var tt=$("#summernote").summernote("code"); 68 $("div#html").html(tt); 69 alert(tt); 70 }); 71 72 }); 73 </script> 74 </body> 75 </html>
效果：服務器
四、summernote經常使用屬性獲取
獲取內容：
$("#user-work-content").summernote("code");
經過 summernote 編輯器的元素調用summernote 的方法，傳入 code 參數就能獲取summernote 的值了。
插入內容：
$("#user-work-content").summernote("code",content);
和第一個方法同樣，只不過此次調用時傳入了第二個參數，這個參數是你要插入的數據，能夠是字符串或者是從後臺獲取的數據
判斷內容是否爲空：
var isEmpty = $("#user-work-content").summernote('isEmpty');
仍是調用 summernote 的方法，不過此次的參數是 'isEmpty' 這個字符串的參數，調用時會返回一個布爾值，經過這個布爾值能夠判斷編輯器內容是否爲空，true表示空，false表示非空。