js插件---markdown如何使用
一、總結
一句話總結：看文檔，看api，看參數列表，看js調用插件的調用函數的參數（json）
1、js和css的問題：如何知道插件要引入哪些js和css？
a、下載里面有demo，照着demo用，就知道要引哪些js和css
b、手冊里面會直接告訴你
2、參數問題：如何使用插件的函數參數列表？
a、直接用屬性的方式調用：data-參數名="參數值"
前面加data是因為data本身表示額外屬性，這樣加了之后就成了額外屬性
<textarea data-am-md data-savable="true"></textarea>
<textarea data-am-md data-width="800" data-height="300"></textarea>
參數說明：
| 參數名 | 類型 | 參數描述 |
|---|---|---|
autofocus |
boolean |
編輯器實例化后自動focus。 默認 false |
savable |
boolean |
是否在底部添加保存按鈕。默認為 false |
hideable |
boolean |
設置為 true在blur 事件后，編輯器會隱藏 。 默認 false |
width |
mixed |
編輯器寬度。默認 inherit |
height |
mixed |
編輯器高度。默認 inherit |
resize |
string |
編輯器大小改變。 none,both,horizontal,vertical. 默認 none |
footer |
mixed |
編輯器底部DOM。默認為空，即不設置 |
fullscreen |
object |
是否允許全屏： enable (bool)；改變圖標： icons (object) |
hiddenButtons |
mixed |
隱藏默認的按鈕：單個為字符串，多個為數組 |
disabledButtons |
mixed |
禁用默認的按鈕：單個為字符串，多個為數組 |
3、js插件中為什么喜歡用data-參數名=""的方式來添加額外屬性（使用插件參數）？
前面加data是因為data本身表示額外屬性，這樣加了之后就成了額外屬性
<textarea data-am-md data-savable="true"></textarea>
<textarea data-am-md data-width="800" data-height="300"></textarea>
參數說明：
| 參數名 | 類型 | 參數描述 |
|---|---|---|
autofocus |
boolean |
編輯器實例化后自動focus。 默認 false |
savable |
boolean |
是否在底部添加保存按鈕。默認為 false |
hideable |
boolean |
設置為 true在blur 事件后，編輯器會隱藏 。 默認 false |
width |
mixed |
編輯器寬度。默認 inherit |
height |
mixed |
編輯器高度。默認 inherit |
resize |
string |
編輯器大小改變。 none,both,horizontal,vertical. 默認 none |
footer |
mixed |
編輯器底部DOM。默認為空，即不設置 |
fullscreen |
object |
是否允許全屏： enable (bool)；改變圖標： icons (object) |
hiddenButtons |
mixed |
隱藏默認的按鈕：單個為字符串，多個為數組 |
disabledButtons |
mixed |
禁用默認的按鈕：單個為字符串，多個為數組 |
4、函數問題：如何使用插件默認寫好的函數？
比如儲存函數，直接在js調用插件的方式中（參數是json），在json中寫寫json格式的函數即可
1 <script> 2 $("#fry-textarea").markdown({ 3 savable:true, 4 onSave: function(e) { 5 alert("Saving '"+e.getContent()+"'...") 6 }, 7 }) 8 </script>
這樣就可以保存了
其實實質就是用e.getContent()獲取編輯器里面的文本就好
5、演示文檔或使用手冊問題：在哪里去找演示文檔和使用手冊？
a、官方網頁一般都有，如果沒有，
b、下載的demo里面一般也有
c、樣例演示頁面的源碼
6、調用插件的三種方式？
a、data-api：在textarea 添加 data-am-md直接調用
<textarea data-am-md></textarea>
b、data-api：通過 "data-provide = am-md-editable" 調用MD編輯器
<div data-provide="am-md-editable"> <h3>amazeui 啦啦啦啦阿拉啦</h3> <p>通過 "data-provide = am-md-editable" 調用MD編輯器</p> </div>
c、通過JS調用: $('selection').markdown(options)
$("#some-textarea").markdown()
7、需要使用一個插件的時候我們應該怎么做？
靜心看使用手冊，不要着急
8、我們調用的這個markdown插件還有添加按鈕的功能給了我們什么啟示？
其它插件也可以，只是我們沒有找到方法而已
9、API如何調用？
代碼里面的alert("Saving '"+e.getContent()+"'...")的e.getContent()就是調用的getContent()這個api
所以api的調用時用event對象來調用了
在函數內部
1 <script> 2 $("#fry-textarea").markdown({ 3 savable:true, 4 onSave: function(e) { 5 alert("Saving '"+e.getContent()+"'...") 6 }, 7 }) 8 </script>
調用API實例：編輯器失去焦點及預覽編寫內容：調用的是上圖進入預覽狀態的API：showPreview()
1 <script> 2 $("#fry-textarea").markdown({ 3 savable:true, 4 onSave: function(e) { 5 alert("Saving '"+e.getContent()+"'...") 6 }, 7 onPreview: function(e) { 8 var previewContent 9 10 if (e.isDirty()) { 11 var originalContent = e.getContent() 12 13 previewContent = "Prepended text here..." 14 + "\n" 15 + originalContent 16 + "\n" 17 +"Apended text here..." 18 } else { 19 previewContent = "Default content" 20 } 21 22 return previewContent 23 }, 24 onBlur: function(e) { 25 e.showPreview(); 26 } 27 }) 28 </script>
10、保存編輯的內容功能是如何做到的？
在js調用方式的函數的參數（json）中加上onSava函數
<script> $("#fry-textarea").markdown({ savable:true, onSave: function(e) { alert("Saving '"+e.getContent()+"'...") }, }) </script>
二、markdown如何使用
1、截圖
2、代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!-- amazeui的默認引入 --> 7 <link rel="stylesheet" href="../../../css/amazeui.min.css"> 8 <script src="../../../js/jquery.min.js"></script> 9 <script src="../../../js/amazeui.min.js"></script> 10 11 <!-- 插件對應的js和css --> 12 <link rel="stylesheet" href="css/am-md.css"> 13 <script src="js/md.js"></script> 14 <script src="js/tomd.js"></script> 15 <script src="js/am-md.js"></script> 16 17 </head> 18 <body> 19 <!-- 最最最最簡單使用：在textarea 添加 data-am-md --> 20 <h1> 21 <span class="am-text-danger">1:最最最最簡單使用：在textarea 添加 data-am-md</span> 22 </h1> 23 24 <textarea data-am-md data-savable="true"></textarea> 25 <hr> 26 <h1> 27 <span class="am-text-danger">2:data-api</span> 28 </h1> 29 <div data-provide="am-md-editable"> 30 <h3>amazeui 啦啦啦啦阿拉啦</h3> 31 <p>通過 "data-provide = am-md-editable" 調用MD編輯器</p> 32 </div> 33 <hr> 34 <h1> 35 <span class="am-text-danger">3: JS 通過JS調用: $('selection').markdown(options)</span> 36 </h1> 37 <textarea name="" id="fry-textarea" cols="30" rows="10"></textarea> 38 <script> 39 $("#fry-textarea").markdown({ 40 savable:true, 41 onSave: function(e) { 42 alert("Saving '"+e.getContent()+"'...") 43 }, 44 onPreview: function(e) { 45 var previewContent 46 47 if (e.isDirty()) { 48 var originalContent = e.getContent() 49 50 previewContent = "Prepended text here..." 51 + "\n" 52 + originalContent 53 + "\n" 54 +"Apended text here..." 55 } else { 56 previewContent = "Default content" 57 } 58 59 return previewContent 60 }, 61 onBlur: function(e) { 62 e.showPreview(); 63 } 64 }) 65 </script> 66 67 </body> 68 </html>