forked from sofish/pen
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (70 loc) · 2.8 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
<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Pen - What You See Is What You Get (WYSIWYG)</title>
<style type="text/css">
*{padding:0;margin:0;}
html{border-top:10px #1abf89 solid;}
body{width:800px;margin:0 auto;padding:5% 20px 20px;font-family:Palatino, Optima, Georgia, serif;}
@media all and (max-width:1024px){ body, pre a{width:60%;} }
small{color:#999;}
#toolbar{margin-bottom:1em;position:fixed;left:20px;margin-top:5px;}
#toolbar [class^="icon-"]:before, #toolbar [class*=" icon-"]:before{font-family:'pen'}
#mode{color:#1abf89;;cursor:pointer;}
#mode.disabled{color:#666;}
#mode:before{content: '\e813';}
#fork{position:fixed;right:0;top:0;}
</style>
<link rel="stylesheet" href="src/pen.css" />
</head>
<body>
<div id="toolbar">
<span id="mode" class="icon-mode"></span>
</div>
<div data-toggle="pen" placeholder="im a placeholder">
<h2>Enjoy live editing (+markdown)</h2>
<p><b><i>Click to edit, Select to apply effect, click items of toolbar to toggle effects.</i></b></p>
<hr>
<p>Horizontal-Rule can be insert by click「...」on the toolbar or just type「... 」/「--- 」/「*** 」at line start. Note that
there's a SPACE at the end of a command.</p>
<hr>
<p>To link or unlink, please press the <i>ENTER</i> key after you filled the input field with your a link. A <a
href="/sofish">link</a> can be unlink by apply an empty value to the input field.
<p>
<ul>
<li>Ordered list and unordered list is supported.</li>
<li>Use the toolbar or use markdown syntax like「<b>1. </b>」,「<b>- </b>」or「<b>* </b>」</li>
</ul>
<blockquote>You can quote text by type「<b>></b>」at line start.</blockquote>
<p>What about add underline to text? "<u>Stay Hungry, Stay Foolish - <i>Steve Jobs</i></u>".</p>
<pre>A code block is also support by type 「```」 at line start and press SPACE.</pre>
<p>For more, please checkout: <a href="https://github.com/sofish/pen#readme" target="_blank">https://github.com/sofish/pen#readme</a>
</p>
</div>
<a id="fork" href="https://github.com/sofish/pen" target="_blank"><img
src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<script src="src/pen.js"></script>
<script src="src/markdown.js"></script>
<script type="text/javascript">
// config
var options = {
editor: document.querySelector('[data-toggle="pen"]'),
debug: true
};
// create editor
var pen = new Pen(options);
// toggle editor mode
document.querySelector('#mode').addEventListener('click', function() {
var text = this.textContent;
if(this.classList.contains('disabled')) {
this.classList.remove('disabled');
pen.rebuild();
} else {
this.classList.add('disabled');
pen.destory();
}
});
</script>
</body>
</html>