使用Quill.js建立文字編輯器
- WBOY轉載
- 2023-08-23 23:29:021284瀏覽
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"的
現在剩下的就是在其中建立一個<script>標籤，我們將在其中建立一個Quill類別的實例，然後將我們建立的<div>的id作為第一個參數傳遞，第二個參數基本上是一個對象，我們在文字編輯器中指定對象的屬性。 </script>
考慮下面顯示的<script>標籤</script>。
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
上述的<script>標籤應該放在<body>標籤的結尾，也就是在<body>標籤關閉之前。 </script>
index.html
整個HTML程式碼如下圖所示。
Example
<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>
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
如果您在瀏覽器中開啟上述HTML文件，您將在瀏覽器中看到一個文字編輯器輸出。在您將看到的文字編輯器中，我們將有大量的工具列選項可供我們使用，我們可以在文字編輯器中使用任何一個。
讓我們自訂文字編輯器的外觀
現在假設我們只想提供兩個預設的工具列選項，而不是在普通文字編輯器中預設獲得的所有選項。在這種情況下，我們可以使用下面顯示的<script>標籤。 </script>
<script>
let toolbarOptions = [
['bold', 'italic', 'underline']
]
let quill = new Quill('#editor', {
modules: {
toolbar: toolbarOptions
},
theme: 'snow'
});
</script>
在上面的<script>標籤中，我們只提供了三個選項，即粗體、斜體和下劃線，在工具列中，因此只有這些選項將對文字編輯器可用。 </script>
index.html
#下面顯示的是更新後的 index.html 檔案。
Example
<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>
<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文字編輯器的內容以及一些其他工具列選項。 </script>
考慮下面顯示的更新的<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物件的root屬性中存在的內容
<p><b>index.html<p>#更新後的<b>index.html程式碼如下圖所示。
<h3>Example
<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>