-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
135 lines (108 loc) · 2.52 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
131
132
133
134
135
<html class="gr__patleeman_github_io">
<head>
<meta charset="UTF-8">
<title>Quill Markdown Toolbar</title>
<link href="https://cdn.quilljs.com/1.3.1/quill.snow.css" rel="stylesheet">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
}
pre {
margin: 0;
padding: 0;
}
.container {
max-width: 60%;
width: 100%;
height: 100%;
align-self: center;
}
.example {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.cheat-sheet {
flex-grow: 1;
margin-left: 1rem;
}
.editor-wrapper {
flex-grow: 3;
}
.ql-editor {
height: 100%;
}
.title {
text-align: center;
}
</style>
</head>
<body data-gr-c-s-loaded="true">
<div class="container">
<h1 class="title">Quill Markdown Toolbar</h1>
<p>
Copy markdown text and paste.
</p>
<div class="example">
<div class="editor-wrapper">
<div id="editor" class="ql-container ql-snow">
<div class="ql-editor ql-blank" data-gramm="false" contenteditable="true">
<p><br></p>
</div>
<div class="ql-clipboard" contenteditable="true" tabindex="-1"></div>
<div class="ql-tooltip ql-hidden"><a class="ql-preview" target="_blank" href="about:blank"></a><input
type="text"
data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL"><a class="ql-action"></a><a
class="ql-remove"></a></div>
</div>
</div>
<div class="cheat-sheet">
<p>
<strong>Supported markdown:</strong>
</p>
<pre># Headers
**Bold text**
*Italic*
***Bold italic***
~~Strikethrough~~
- Bullet points
1. Numbered lists
[] Checkboxes
[]() Links
> Blockquote
`Inline code block`
```
Fenced Code block
```
--- Horizontal Rule
</pre>
</div>
</div>
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
<script src="dist/markdownToolbar.js"></script>
<script>
const toolbarOptions = {
container: [
['bold', 'italic', 'underline', 'strike'],
['markdown'],
],
handlers: {
'markdown': function () {}
}
};
Quill.register({
'modules/markdown-toolbar': MarkdownToolbar.default
});
var quill = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: toolbarOptions,
'markdown-toolbar': true
}
});
</script>
</div>
</body>
</html>