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

讓我們使用Quill建立一個基本的文字編輯器

index.html

Example

讓我們自訂文字編輯器的外觀

在控制台中記錄文字編輯器的內容

輸出

結論

首頁

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 23, 2023 pm 11:29 PM

使用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: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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7924

Java教學

1652

CakePHP 教程

1411

Laravel 教程

1303

PHP教程

1249

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。