-
Notifications
You must be signed in to change notification settings - Fork 1
/
editor.html
176 lines (176 loc) · 11.4 KB
/
editor.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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Markdown Plus</title>
<link rel="stylesheet" href="bower_components/jquery-ui-min/themes/base/jquery-ui.min.css"/>
<link rel="stylesheet" href="bower_components/jquery-ui-layout-min/layout-default.css"/>
<link rel="stylesheet" href="bower_components/github-markdown-css/github-markdown.css"/>
<link rel="stylesheet" href="bower_components/font-awesome-min/css/font-awesome.min.css"/>
<link rel="stylesheet" href="bower_components/remodal-min/jquery.remodal.css"/>
<link rel="stylesheet" href="bower_components/katex-build/katex.min.css"/>
<link rel="stylesheet" href="bower_components/ionicons-min/css/ionicons.min.css"/>
<link rel="stylesheet" href="bower_components/mermaid-min/mermaid.css"/>
<link rel="stylesheet" href="editor.css"/>
<script src="bower_components/underscore-min/underscore-min.js"></script>
<script src="bower_components/jquery-dist/jquery.min.js"></script>
<script src="bower_components/jquery-ui-min/jquery-ui.min.js"></script>
<script src="bower_components/jquery-ui-layout-min/jquery.layout.min.js"></script>
<script src="bower_components/jquery.cookie-min/jquery.cookie.js"></script>
<script src="bower_components/ace-min-noconflict/ace.js" charset="utf-8"></script>
<script src="bower_components/ace-min-noconflict/ext-static_highlight.js"></script>
<script src="bower_components/ace-min-noconflict/ext-modelist.js"></script>
<script src="bower_components/ace-min-noconflict/keybinding-vim.js"></script>
<script src="bower_components/ace-min-noconflict/keybinding-emacs.js"></script>
<script src="bower_components/markedown/markedown.min.js"></script>
<script src="bower_components/remodal-min/jquery.remodal.min.js"></script>
<script src="bower_components/katex-build/katex.min.js"></script>
<script src="bower_components/mermaid-min/mermaid.full.min.js"></script>
<script src="editor.js"></script>
</head>
<body>
<div class="ui-layout-north">
<div id="toolbar" class="noselect" data-open-title="Hide Toolbar" data-closed-title="Show Toolbar"> <!-- 工具栏 -->
<i title="New" class="fa fa-file-text-o file-icon app-only" data-name="new"></i>
<i title="Open" class="fa fa-folder-open-o file-icon app-only" data-name="open"></i>
<i title="Save" class="fa fa-save file-icon app-only" data-name="save"></i>
<i title="Export to HTML" class="fa fa-file-code-o file-icon app-only" data-name="html"></i>
<i title="Export to PDF" class="fa fa-file-pdf-o file-icon app-only" data-name="pdf"></i>
<i class="dividor app-only">|</i>
<i title="Bold" class="fa fa-bold styling-icon" data-modifier="**"></i>
<i title="Italic" class="fa fa-italic styling-icon" data-modifier="*"></i>
<i title="Strikethrough" class="fa fa-strikethrough styling-icon" data-modifier="~~"></i>
<i class="dividor">|</i>
<i title="Heading 1" class="fa heading-icon" data-level="1">h1</i>
<i title="Heading 2" class="fa heading-icon" data-level="2">h2</i>
<i title="Heading 3" class="fa heading-icon" data-level="3">h3</i>
<i title="Heading 4" class="fa heading-icon" data-level="4">h4</i>
<i title="Heading 5" class="fa heading-icon" data-level="5">h5</i>
<i title="Heading 6" class="fa heading-icon" data-level="6">h6</i>
<i class="dividor">|</i>
<i title="Horizontal rule" id="horizontal-rule" class="fa fa-minus"></i>
<i title="Quote" class="fa fa-quote-left list-icon" data-prefix="> "></i>
<i title="Unordered list" class="fa fa-list-ul list-icon" data-prefix="- "></i>
<i title="Ordered list" class="fa fa-list-ol list-icon" data-prefix="1. "></i>
<i title="Incomplete task list" class="fa fa-square-o list-icon" data-prefix="- [ ] "></i>
<i title="Complete task list" class="fa fa-check-square-o list-icon" data-prefix="- [x] "></i>
<i class="dividor">|</i>
<i title="Link" class="fa fa-link" id="link-icon" data-sample-text="link description" data-sample-url="http://example.com"></i>
<i title="Image" class="fa fa-image" id="image-icon" data-sample-text="image description" data-sample-url="http://example.com/example.png"></i>
<i title="Code" class="fa fa-code" id="code-icon"></i>
<i title="Table" class="fa fa-table" id="table-icon" data-sample="header 1 | header 2
---|---
row 1 col 1 | row 1 col 2
row 2 col 1 | row 2 col 2"></i>
<i class="dividor">|</i>
<i title="Emoji" class="fa fa-smile-o" data-remodal-target="emoji-modal"></i>
<i title="Font Awesome" class="fa fa-flag-o" data-remodal-target="fa-modal"></i>
<i title="Ionicons" class="icon ion-ionic" data-remodal-target="ion-modal"></i>
<i class="dividor">|</i>
<i title="Mathematical formulae" class="fa fa-superscript" id="math-icon" data-sample="E = mc^2"></i>
<i title="Flowchart" class="fa fa-long-arrow-right mermaid-icon" data-sample="graph LR
A-->B"></i>
<i title="Sequence diagram" class="fa fa-exchange mermaid-icon" data-sample="sequenceDiagram
A->>B: How are you?
B->>A: Great!"></i>
<i title="Gantt diagram" class="fa fa-sliders mermaid-icon" data-sample="gantt
dateFormat YYYY-MM-DD
section S1
T1: 2014-01-01, 9d
section S2
T2: 2014-01-11, 9d
section S3
T3: 2014-01-02, 9d"></i>
<i class="dividor">|</i>
<i title="Preferences" class="fa fa-cog" data-remodal-target="preferences-modal"></i>
<i title="Help" class="fa fa-question-circle" data-remodal-target="help-modal"></i>
<i title="About" class="fa fa-info-circle" data-remodal-target="about-modal"></i>
<i class="dividor guest-only">|</i>
<i title="Enter license" class="fa fa-key guest-only" data-remodal-target="license-modal"></i>
</div>
</div>
<div class="ui-layout-center">
<div id="editor"></div> <!-- 编辑器 -->
<div class="remodal" id="emoji-modal" data-remodal-id="emoji-modal"> <!-- emoji 弹出框 -->
<h2>Please enter an emoji code:</h2>
<p>Examples: "smile", "whale", "santa", "panda_face", "dog", "truck" ...</p>
<p>For a complete list, please check <a href="http://www.emoji-cheat-sheet.com/" target="_blank">Emoji Cheat Sheet</a>.</p>
<p><input id="emoji-code" placeholder="smile"/></p>
<br/><a class="remodal-cancel">Cancel</a>
<a class="remodal-confirm" id="emoji-confirm">OK</a>
</div>
<div class="remodal" id="fa-modal" data-remodal-id="fa-modal"> <!-- Font Awesome 弹出框 -->
<h2>Please enter a Font Awesome code:</h2>
<p>Examples: "cloud", "flag", "car", "truck", "heart", "dollar" ...</p>
<p>For a complete list, please check <a href="http://fontawesome.io/icons/" target="_blank">Font Awesome Icons</a>.</p>
<p><input id="fa-code" placeholder="heart"/></p>
<br/><a class="remodal-cancel">Cancel</a>
<a class="remodal-confirm" id="fa-confirm">OK</a>
</div>
<div class="remodal" id="ion-modal" data-remodal-id="ion-modal"> <!-- Ionicons 弹出框 -->
<h2>Please enter an Ionicons code:</h2>
<p>Examples: "beer", "key", "locked", "location", "plane", "ios-eye" ...</p>
<p>For a complete list, please check <a href="http://ionicons.com/" target="_blank">Ionicons Website</a>.</p>
<p><input id="ion-code" placeholder="beer"/></p>
<br/><a class="remodal-cancel">Cancel</a>
<a class="remodal-confirm" id="ion-confirm">OK</a>
</div>
<div class="remodal" data-remodal-id="preferences-modal"> <!-- Preferences 弹出框 -->
<h2>Markdown Plus Preferences</h2>
<p>Editor theme: <select id="editor-theme">
<option value="tomorrow_night_blue">Blue</option>
<option value="tomorrow">Bright</option>
<option value="tomorrow_night_eighties">Dark</option>
<option value="kuroir">Gray</option>
</select></p>
<p>Editor font size: <select id="editor-font-size">
<option value="8">8px</option><option value="9">9px</option><option value="10">10px</option><option value="11">11px</option>
<option value="12">12px</option><option value="13">13px</option><option value="14">14px</option><option value="15">15px</option>
<option value="16">16px</option><option value="17">17px</option><option value="18">18px</option><option value="20">20px</option>
<option value="24">24px</option><option value="32">32px</option><option value="48">48px</option><option value="64">64px</option>
</select></p>
<p>Key binding: <select id="key-binding">
<option value="default">Default</option>
<option value="emacs">Emacs</option>
<option value="vim">Vim</option>
</select></p>
<br/><a class="remodal-confirm">OK</a>
</div>
<div class="remodal" data-remodal-id="help-modal"> <!-- help 弹出框 -->
<h2>Markdown Plus help</h2>
<h3><a href="http://mdp.tylingsoft.com/" target="_blank">An online sample</a></h3>
<p><a href="https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts" target="_blank">Keyboard Shortcuts</a></p>
<p><a href="https://guides.github.com/features/mastering-markdown/" target="_blank">Markdown Basics</a></p>
<p><a href="https://help.github.com/articles/github-flavored-markdown/" target="_blank">GitHub Flavored Markdown</a></p>
<p><a href="http://www.emoji-cheat-sheet.com/" target="_blank">Emoji Cheat Sheet</a></p>
<p><a href="http://fontawesome.io/icons/" target="_blank">Font Awesome Icons</a></p>
<p><a href="http://ionicons.com/" target="_blank">Ionicons Website</a></p>
<p><a href="http://meta.wikimedia.org/wiki/Help:Displaying_a_formula" target="_blank">Mathematical Formulae</a></p>
<p><a href="http://knsv.github.io/mermaid/flowchart.html" target="_blank">Flowchart Syntax</a></p>
<p><a href="http://knsv.github.io/mermaid/sequenceDiagram.html" target="_blank">Sequence Diagram Syntax</a></p>
<p><a href="http://knsv.github.io/mermaid/gantt.html" target="_blank">Gantt Diagram Syntax</a></p>
<p>If none of the above solves your problem, please email us: <a href="mailto:[email protected]?subject=Markdown Plus help needed&body=Please include a screenshot of the issue.">[email protected]</a>.</p>
<br/><a class="remodal-confirm">OK</a>
</div>
<div class="remodal" data-remodal-id="about-modal"> <!-- about 弹出框 -->
<h2>Markdown Plus</h2> Version 1.4.2
<p>Markdown editor with extra features.</p>
<p>Copyright © 2015 <a href="https://tylingsoft.com" target="_blank">Tylingsoft</a>.</p>
<p>Home page: <a href="https://tylingsoft.com/mdp" target="_blank">https://tylingsoft.com/mdp</a>.</p>
<br/><a class="remodal-confirm">OK</a>
</div>
<div class="remodal" data-remodal-id="license-modal"> <!-- license 弹出框 -->
<h2>Please enter your license</h2>
<p>Email: <input id="email"/></p>
<p>License: <input id="license"/></p>
<p>Don't have a license? <a href="https://tylingsoft.com/mdp" target="_blank">Purchase one</a>.</p>
<br/><a class="remodal-cancel">Cancel</a>
<a class="remodal-confirm">OK</a>
</div>
</div>
<div class="ui-layout-east">
<article class="markdown-body" id="preview" data-open-title="Hide Preview" data-closed-title="Show Preview"></article> <!-- 实时预览 -->
</div>
</body>
</html>