mditor/demo.html at master · bh-lay/mditor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<title>mditor</title>
	<link rel="stylesheet" href="src/css/article.css">
	<style type="text/css">
    body{
      overflow-y: scroll;
    }
	.wrapper{
		width: 700px;
    max-width: 96%;
		margin: auto;
    padding: 100px 0
	}
  .wrapper textarea{
    width: 400px;
    height: 200px;
  }
	</style>
</head>
<body>
<div class="wrapper">
  <textarea id="md_editor">
欢迎使用Mditor
======
Mditor是一个轻量级的markdown编辑器。取名自markdown + editor，用于实现页面markdown输入框的便利操作。

##Markdown是什么
> Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。    —— [维基百科](https://zh.wikipedia.org/wiki/Markdown)


##常用格式及快捷键
- **加粗文字** `Ctrl + B`
- *斜体文字* `Ctrl + I`
- [链接文字](http://bh-lay.com/) `Ctrl + L`
- 图片![暴漫](src/images/baoman.jpg) `Ctrl + G`
- `code` `Ctrl + Shift + K`
- 代码块`Ctrl + K`：
</textarea>
  <br/>
  <input type="button" value="获取markdown" onclick="getContent()" />
  <input type="button" value="获取html" onclick="getHtml()" />
  <input type="button" value="插入内容" onclick="insert()" />
</textarea>
</div>
	<script type="text/javascript" src="src/js/jquery.js"></script>
	<script type="text/javascript" src="src/mditor.js"></script>
	<script type="text/javascript">
		var editor = new mditor(document.getElementById('md_editor'));
    function getContent(){
      alert(editor.getContent());
    }
    function getHtml(){
      alert(editor.getHtml());
    }
    function insert(){
      editor.insert(' **XXXXX** ');
    }
	</script>
</body>
</html>