微信扫一扫打赏支持

js插件---markdown如何使用

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>

 

 

 

 
posted @ 2018-08-25 20:10  范仁义  阅读(6042)  评论(1)  编辑  收藏  举报