0014. quill
1. 🫧 评价
- quill 是一个强大的开源富文本编辑器,具有良好的兼容性和可扩展性。
- 据说有不少在线的富文本编辑器都是基于 quill 实现的。
2. 💻 demos.1 - 快速上手 quill
- 快速上手非常简单,只需引入两个核心文件即可体验:
- 一个是 quill 样式主题 css 文件
- 一个是 quill 核心逻辑 js 文件
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>quill quickstart</title>
</head>
<body>
<!-- Include Quill stylesheet -->
<link
href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css"
rel="stylesheet"
/>
<!-- Create the toolbar container -->
<div id="toolbar">
<button class="ql-bold">Bold</button>
<button class="ql-italic">Italic</button>
</div>
<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
<p>
Some initial
<strong>bold</strong>
text
</p>
<p><br /></p>
</div>
<!-- Include the Quill library -->
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<!-- Initialize Quill editor -->
<script>
const quill = new Quill('#editor', {
theme: 'snow',
})
</script>
</body>
</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
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
- 最终效果:
