使用Quill.js建立文字編輯器-js教程-PHP中文網

使用Quill.js建立文字編輯器

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文字編輯器的根物件將會在控制台中列印出來。

輸出

我嘗試在編輯器中寫了一行簡單的程式碼，然後點擊了按鈕，這是我在瀏覽器控制台中得到的輸出。

結論

在本教學中，我們示範如何使用Quill.js建立具有不同工具列選項的文字編輯器。透過多個範例，我們解釋瞭如何新增或刪除工具列，以及如何在Quill文字編輯器中控制根元素。

以上是使用Quill.js建立文字編輯器的詳細內容。更多資訊請關注PHP中文網其他相關文章！