使用 Quill.js 构建文本编辑器
Quill 是一款免费的开源文本编辑器，属于所见即所得编辑器类别，主要为我们今天使用的现代网络而构建。它是一个高度可定制的文本编辑器，具有许多富有表现力的 API。Quill 非常易于使用，并提供了良好的界面，即使是那些只从事标记工作的人也可以理解。
在本教程中，我们将通过多个示例来解释如何使用 Quill.js 构建文本编辑器。
虽然有几十种富文本编辑器属于所见即所得文本编辑器，但使用最广泛的是 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>
现在我们已经在 <head> 标签中添加了 CDN，现在是时候开始处理 <body> 标签了。在 <body> 标签内，我们创建一个 <div> 标签，其中 id="editor" 以及一些指定高度的简单样式。请考虑下面显示的 <body> 标签。
<body> <div id="editor" style="height: 250px"></div> </body>
在上面的代码中，我们创建了一个 <div>标签带有 id="editor"，并提供一个简单的样式，指定 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()">在控制台中打印</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 文本编辑器的根对象就会打印在控制台内。
输出
尝试在编辑器中编写一行简单的代码，然后单击按钮，这是在浏览器控制台中获得的输出。
<p>Hi There <strong>Inside HTML </strong><em>Is this italic?</em></p>
结论
在本教程中，我们演示了如何使用 Quill.js 创建具有不同工具栏选项的文本编辑器。通过多个示例，我们解释了如何添加或删除工具栏以及如何控制台 Quill 文本编辑器的根元素。
