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>