数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 Quill.js 构建文本编辑器
Quill 是一个免费且开源的文本编辑器，属于所见即所得 (WYSIWYG) 编辑器类别，主要为我们今天使用的现代网络而构建。它是一个高度可定制的文本编辑器，并具有许多表达性 API。Quill 非常易于使用，并提供了一个良好的界面，即使是只使用标记语言工作的人员也能理解。
在本教程中，我们将通过多个示例来解释如何使用 Quill.js 构建文本编辑器。
虽然有数十种属于 WYSIWYG 文本编辑器的富文本编辑器，但 Quill 的使用范围非常广泛，远远超过其他编辑器。现在，让我们学习如何使用 Quill。
让我们使用 Quill 创建一个基本的文本编辑器
使用 Quill 的第一步是能够将其添加到我们选择的编辑器中，为此，我们需要将下面显示的两个 CDN 链接放在 HTML 代码的 <head> 标记内。
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet"> <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
第一个 CDN 链接是 Quill 的 CSS 样式文件，第二个 CDN 链接是 Quill 的 JavaScript 文件。我们需要将上面显示的这两行添加到 HTML 代码的 <head> 标记内。
我们的 <head> 标记应该如下所示。
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Quill Text Editor</title> <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet"> <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script> </head>
现在我们已经将 CDN 添加到 <head> 标记中，是时候开始处理 <body> 标记了。在 <body> 标记内，让我们创建一个具有 id="editor" 的 <div> 标记，并设置一些指定高度的简单样式。请考虑以下 <body> 标记。
<body> <div id="editor" style="height: 250px"></div> </body>
在上面的代码中，我们创建了一个 id 为 "editor" 的 <div> 标记，并提供了一个简单的样式，指定 div 的高度为 250px。
现在剩下的就是创建一个 <script> 标记，在其中我们将创建一个 Quill 类的实例，然后将我们创建的 <div> 的 id 作为第一个参数传递，第二个参数基本上是一个对象，我们在其中指定我们希望在文本编辑器中使用的对象的属性。
请考虑以下 <script> 标记。
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
上面的 <script> 标记应放置在 <body> 标记的末尾，即 <body> 标记关闭之前。
index.html
完整的 HTML 代码如下所示。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quill Text Editor</title>
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
</head>
<body>
<div id="editor" style="height: 200px"></div>
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
</body>
</html>
如果您在浏览器中打开上述 HTML 文件，您将在浏览器中看到一个文本编辑器输出。在您看到的文本编辑器中，我们将拥有大量的工具栏选项供我们使用，我们可以在文本编辑器中使用其中的任何一个。
让我们自定义文本编辑器的外观
现在假设我们只想提供两个默认工具栏选项，而不是在普通文本编辑器中默认获得的所有选项。在这种情况下，我们可以使用下面显示的 <script> 标记。
<script>
let toolbarOptions = [
['bold', 'italic', 'underline']
]
let quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
</script>
在上面的 <script> 标记中，我们只在工具栏中提供了三个选项，即粗体、斜体和下划线，因此只有这些选项可用于文本编辑器。
index.html
更新后的 index.html 文件如下所示。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quill Text Editor</title>
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
</head>
<body>
<div id="editor" style="height: 200px"></div>
<script>
var toolbarOptions = [
['bold', 'italic', 'underline']
]
var quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
</script>
</body>
</html>
如果您在浏览器中运行上述文件，您将只在文本编辑器中看到三个工具栏选项，即粗体选项、斜体选项和下划线选项。
将文本编辑器的内容记录到控制台
现在假设我们想要将我们在文本编辑器中输入的任何内容记录到控制台，为了做到这一点，我们首先需要在 <body> 标记中创建一个按钮。
请考虑以下创建按钮的代码片段。
<button onclick="consoleHTMLContent()">Print in Console</button>
现在让我们关注 <script> 标记，在其中我们需要创建一个函数，该函数将实际记录 quill 文本编辑器的内容以及更多工具栏选项。
请考虑以下更新后的 <script> 标记。
<script>
let toolbarOptions = [
['bold', 'italic', 'underline'],[{
'size': ['small', false, 'large', 'huge']
}],[{
'color': []
}, {
'background': []
}]
]
let quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
function consoleHTMLContent() {
console.log(quill.root.innerHTML);
}
</script>
在上面的 <script> 标记中，我们有一个名为 consoleHTMLContent 的函数，在其中我打印了 quill 对象的 root 属性中存在的内容。
index.html
更新后的 index.html 代码如下所示。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quill Text Editor</title>
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
</head>
<body>
<div id="editor" style="height: 200px"></div>
<button onclick="consoleHTMLContent()">Print in Console</button>
<script>
let toolbarOptions = [
['bold', 'italic', 'underline'],[{
'size': ['small', false, 'large', 'huge']
}],[{
'color': []
}, {
'background': []
}]
]
let quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
function consoleHTMLContent() {
console.log(quill.root.innerHTML);
}
</script>
</body>
</html>
如果我们在浏览器中运行上述代码，我们将看到一个文本编辑器，并且一旦我们在该编辑器中输入一些文本并单击按钮，quill 文本编辑器的 root 对象将打印在控制台中。
输出
我尝试在编辑器中编写一行简单的文字，然后单击按钮，这是我在浏览器控制台中得到的输出。
<p>Hi There <strong>Inside HTML </strong><em>Is this italic?</em></p>
结论
在本教程中，我们演示了如何使用 Quill.js 创建具有不同工具栏选项的文本编辑器。在多个示例的帮助下，我们解释了如何添加或删除工具栏，以及如何控制台输出 Quill 文本编辑器的根元素。
2K+ 阅读量
