資料結構
網路
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+ 閱讀量
