极客笔记使用Quill.js构建文本编辑器
Quill是一个免费开源的文本编辑器，属于所见即所得编辑器，主要为我们今天使用的现代web而建。它是一个高度可定制的文本编辑器，并具有许多富有表现力的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文件。我们需要将这两行代码添加到上面所示的<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>标签内，让我们创建一个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>标签，我们需要在其中创建一个函数，该函数将实际记录羽毛笔文本编辑器的内容以及一些更多的工具栏选项。
考虑更新后的<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对象的根属性中的内容。
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创建具有不同工具栏选项的文本编辑器。在多个示例的帮助下，我们解释了如何添加或删除工具栏，以及如何控制羽毛笔文本编辑器的根元素。