Quill是一款免費且開源的文字編輯器，屬於所見即所得編輯器的範疇，主要用於我們今天使用的現代網路。它是一個高度可自訂的文字編輯器，具有許多表達性的API。 Quill非常易於使用，並提供了一個良好的介面，即使對於只有標記經驗的人來說，也很容易理解。
在本教學中，我們將使用多個範例來解釋如何使用Quill.js建立文字編輯器。
雖然有許多所屬於所見即所得文字編輯器的富文本編輯器，但最廣泛使用的是Quill，差距非常大。現在，讓我們來學習如何使用Quill。
讓我們使用Quill建立一個基本的文字編輯器
與Quill一起工作的第一步是能夠在我們選擇的編輯器中使用它，並為此，我們需要將下面顯示的兩個CDN連結放在我們的HTML程式碼的
標籤中。
<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>
<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，現在是時候開始處理標籤了。在標籤內部，讓我們建立一個id="editor"的
標籤，並加入一些指定高度的簡單樣式。請參考下面顯示的
標籤。
<body>
<div id="editor" style="height: 250px"></div>
</body>
登入後複製
在上面的程式碼中，我們建立了一個id為"editor"的
標籤，並提供了一個簡單的樣式，指定了的高度為250px
現在剩下的就是在其中建立一個<script>標籤，我們將在其中建立一個Quill類別的實例，然後將我們建立的<div>的id作為第一個參數傳遞，第二個參數基本上是一個對象，我們在文字編輯器中指定對象的屬性。 </p>
<p>考慮下面顯示的<b><script>標籤</b>。 </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'><script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
</pre><div class="contentsignin">登入後複製</div></div>
<p>上述的<script>標籤應該放在<body>標籤的結尾，也就是在<body>標籤關閉之前。 </p>
<h3>index.html</h3>
<p>整個HTML程式碼如下圖所示。 </p>
<h3>Example</h3>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'><!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>
登入後複製
如果您在瀏覽器中開啟上述HTML文件，您將在瀏覽器中看到一個文字編輯器輸出。在您將看到的文字編輯器中，我們將有大量的工具列選項可供我們使用，我們可以在文字編輯器中使用任何一個。
讓我們自訂文字編輯器的外觀
現在假設我們只想提供兩個預設的工具列選項，而不是在普通文字編輯器中預設獲得的所有選項。在這種情況下，我們可以使用下面顯示的<script>標籤。 </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'><script>
let toolbarOptions = [
['bold', 'italic', 'underline']
]
let quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
</script>
</pre><div class="contentsignin">登入後複製</div></div>
<p>在上面的<script>標籤中，我們只提供了三個選項，即粗體、斜體和下劃線，在工具列中，因此只有這些選項將對文字編輯器可用。 </p>
<p><b>index.html</b></p><p>#下面顯示的是更新後的 index.html 檔案。 </p>
<h3>Example</h3>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'><!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>
登入後複製
如果您在瀏覽器中運行上述文件，您將只能在文字編輯器中看到三個工具列選項，即粗體選項、斜體選項和下劃線選項。
在控制台中記錄文字編輯器的內容
現在假設我們想要將我們在文字編輯器中寫的內容記錄到控制台中，為了做到這一點，我們首先需要在
標籤中建立一個按鈕。
考慮下面顯示的創建按鈕的程式碼片段。
<button onclick="consoleHTMLContent()">Print in Console</button>
登入後複製
現在讓我們專注於<script>標籤，其中我們需要建立一個函數，該函數將實際記錄quill文字編輯器的內容以及一些其他工具列選項。 </p>
<p>考慮下面顯示的更新的<script>標籤。 </p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'><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>
</pre><div class="contentsignin">登入後複製</div></div>
在上述<script>標籤中，我們有一個名為consoleHTMLContent的函數，其中我列印了quill物件的root屬性中存在的內容
<p><b>index.html</b></p><p>#更新後的<b>index.html</b>程式碼如下圖所示。 </p>
<h3>Example</h3>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:javascript;toolbar:false;'><!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>
登入後複製
在本教學中，我們示範如何使用Quill.js建立具有不同工具列選項的文字編輯器。透過多個範例，我們解釋瞭如何新增或刪除工具列，以及如何在Quill文字編輯器中控制根元素。
