使用Quill.js建立文字編輯器
Aug 23, 2023 pm 11:29 PM
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>
現在剩下的就是在其中建立一個<script>標籤，我們將在其中建立一個Quill類別的實例，然後將我們建立的<div>的id作為第一個參數傳遞，第二個參數基本上是一個對象，我們在文字編輯器中指定對象的屬性。 </p> <p>考慮下面顯示的<b><script>標籤</b>。 </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script> var quill = new Quill('#editor', { theme: 'snow' }); </script> </pre><div class="contentsignin">登入後複製</div></div> <p>上述的<script>標籤應該放在<body>標籤的結尾，也就是在<body>標籤關閉之前。 </p> <h3 id="index-html">index.html</h3> <p>整個HTML程式碼如下圖所示。 </p> <h3 id="Example">Example</h3> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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:php;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 id="Example">Example</h3> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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:php;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 id="Example">Example</h3> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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文字編輯器的根物件將會在控制台中列印出來。
輸出
我嘗試在編輯器中寫了一行簡單的程式碼，然後點擊了按鈕，這是我在瀏覽器控制台中得到的輸出。
<p>Hi There <strong>Inside HTML </strong><em>Is this italic?</em></p>
結論
在本教學中，我們示範如何使用Quill.js建立具有不同工具列選項的文字編輯器。透過多個範例，我們解釋瞭如何新增或刪除工具列，以及如何在Quill文字編輯器中控制根元素。
以上是使用Quill.js建立文字編輯器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱門文章
熱門文章
熱門文章標籤
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
