-
Notifications
You must be signed in to change notification settings - Fork 17
/
index.html
131 lines (103 loc) · 4.44 KB
/
index.html
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="MDMagick is the most simple and easy to integrate MarkDown HTML WYSIWYG" />
<meta name="keywords" content="jQuery, plugin, markdown, wysiwyg" />
<meta name="author" content="http://fernandoguillen.info" />
<title>MDMagick</title>
<!-- demo page styles -->
<link rel="stylesheet" href="./reset.css" ></style>
<link rel="stylesheet" href="./style.css" ></style>
<!-- dependencies -->
<script src="./vendor/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="./vendor/a-tools.js" type="text/javascript" charset="utf-8"></script>
<script src="./vendor/showdown.js" type="text/javascript" charset="utf-8"></script>
<script src="./lib/mdmagick.js" type="text/javascript" charset="utf-8"></script>
<!-- mdm styles -->
<link rel="stylesheet" href="./assets/mdmagick.css" ></style>
<link rel="stylesheet" href="./assets/icon_font/style.css" />
<!--[if lte IE 7]><script src="./assets/icon_font/lte-ie7.js"></script><![endif]-->
<style>
textarea.big {
height: 100px;
}
input.big,
textarea.big {
width: 600px;
padding: 5px;
font-size: 12px;
}
</style>
</head>
<body>
<div id="container">
<h1>MDMagick</h1>
<h2>The most simple and easy to integrate MarkDown HTML WYSIWYG</h2>
<p>Add <b>style butttons</b> and <b>preview</b> to any kind of input field</p>
<p>
<ul>
<li><a href="https://github.com/fguillen/MDMagick">MDMagick's code</a></li>
<li><a href="http://fguillen.github.com/MDMagick">MDMagick's demo page</a></li>
<li><a href="https://github.com/fguillen/MDMagick/blob/master/README.md">MDMagick's README</a></li>
</ul>
</p>
<p><strong>Demo page</strong>: Focus in the different input fields and interact with the helper buttons.</p>
<h3>Use</h3>
<p>Just add the class <strong>mdm-input</strong> to any input element in your page and it will became in a MarkDown Editor.</p>
<p> Or you can do it in a more explicit way:
<pre>$('.css-selector').mdmagick();</pre>
</p>
<section>
<h1>A textarea</h1>
<p>Simple textarea is becomed in a MarkDown editor with buttons and preview</p>
<textarea id="input-1" class="big">This is a textarea where you can **edit** and use the _above buttons_ to modify styling
it has one line
and another line
A list of elements:
- one
- two
- three</textarea>
<script>
$(function(){
$("#input-1").mdmagick();
})
</script>
</section>
<section>
<h1>A textfield</h1>
<p>Same can be done with a simple input text field</p>
<input id="input-2" type="text" class="big" value="This is an input **text**" />
<script>
$(function(){
$("#input-2").mdmagick();
})
</script>
</section>
<section>
<h1>Authomatic MDMagick with a textarea</h1>
<p>Every element with class <strong>mdm-input</strong> will be becomed in a MDMagick input.</p>
<textarea id="textarea-1" class="big mdm-input">This is a textarea **authomatically** converted to a MDMagick input.</textarea>
</section>
<footer>
<p>
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/80x15.png" /></a>
<br />
<span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">MDMagick jQuery plugin</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://fernandoguillen.info" property="cc:attributionName" rel="cc:attributionURL">Fernando Guillen</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.
</p>
</footer>
</div>
<!-- google analytics -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34268044-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- google analytics -->
</body>
</html>