Quill ist ein kostenloser Open-Source-Texteditor, der in die Kategorie der WYSIWYG-Editoren fällt und hauptsächlich im modernen Web verwendet wird, das wir heute nutzen. Es handelt sich um einen hochgradig anpassbaren Texteditor mit vielen ausdrucksstarken APIs. Quill ist sehr einfach zu bedienen und bietet eine gute Benutzeroberfläche, die auch für Leute mit nur Markup-Erfahrung leicht zu verstehen ist.
In diesem Tutorial erklären wir anhand mehrerer Beispiele, wie man mit Quill.js einen Texteditor erstellt.
Obwohl es viele Rich-Text-Editoren gibt, die WYSIWYG-Texteditoren sind, ist Quill der am weitesten verbreitete und die Lücke ist sehr groß. Jetzt lernen wir, wie man Quill benutzt.
Lassen Sie uns mit Quill einen einfachen Texteditor erstellen
Der erste Schritt bei der Arbeit mit Quill besteht darin, es im Editor unserer Wahl verwenden zu können. Dazu müssen wir die beiden unten gezeigten CDN-Links im
-Tag unseres HTML-Codes platzieren.
<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>
Nach dem Login kopieren
Der erste CDN-Link ist die CSS-Stildatei von Quill, während der zweite CDN-Link die JavaScript-Datei von Quill ist. Wir müssen die beiden oben gezeigten Codezeilen zum
-Tag unseres HTML-Codes hinzufügen.
Unser -Tag sollte so aussehen.
<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>
Nach dem Login kopieren
Da wir nun das CDN im
-Tag hinzugefügt haben, ist es an der Zeit, mit der Arbeit am -Tag zu beginnen. Erstellen wir innerhalb des -Tags ein
-Tag mit der ID="editor" und fügen wir einige einfache Stile hinzu, die die Höhe angeben. Bitte beachten Sie das unten gezeigte
-Tag
<body>
<div id="editor" style="height: 250px"></div>
</body>
Nach dem Login kopieren
Im obigen Code erstellen wir ein
-Tag mit der ID „editor“ und stellen einen einfachen Stil mit einer angegebenen Höhe von 250 Pixeln bereit
Jetzt müssen wir nur noch ein <script>-Tag erstellen, in dem wir eine Instanz der Quill-Klasse erstellen und dann die ID des von uns erstellten <div> im Grunde genommen als zweiten Parameter übergeben ist ein Objekt, und wir geben die Eigenschaften des Objekts im Texteditor an. </p>
<p>Bedenken Sie das unten gezeigte <b><script>-Tag. </b>
<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">Nach dem Login kopieren</div></div>
</p>Das obige <script>-Tag sollte am Ende des <body>-Tags platziert werden, also bevor das <body>-Tag geschlossen wird. <p>
</p>index.html<h3>
</h3>Der gesamte HTML-Code wird unten angezeigt. <p>
</p>Beispiel<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>
Nach dem Login kopieren
Wenn Sie die obige HTML-Datei in Ihrem Browser öffnen, wird in Ihrem Browser eine Texteditor-Ausgabe angezeigt. Im Texteditor, den Sie sehen, stehen uns zahlreiche Symbolleistenoptionen zur Verfügung, die wir alle im Texteditor verwenden können.
Lassen Sie uns das Aussehen unseres Texteditors anpassen
Angenommen, wir möchten nur zwei Standardoptionen für die Symbolleiste bereitstellen und nicht alle Optionen, die Sie standardmäßig in einem normalen Texteditor erhalten. In diesem Fall können wir das unten gezeigte <script>-Tag verwenden. <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">Nach dem Login kopieren</div></div>
</p>Im <script>-Tag oben haben wir in der Symbolleiste nur drei Optionen bereitgestellt, nämlich Fett, Kursiv und Unterstrichen, sodass nur diese Optionen für den Texteditor verfügbar sind. <p>
</p><p>index.html<b></b>
</p>Unten wird die aktualisierte index.html-Datei angezeigt. <p>
</p>Beispiel<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>
Nach dem Login kopieren
Wenn Sie die obige Datei in Ihrem Browser ausführen, werden in Ihrem Texteditor nur drei Symbolleistenoptionen angezeigt, nämlich die Option „Fett“, „Kursiv“ und „Unterstrichen“.
Texteditor-Inhalte in der Konsole aufzeichnen
Angenommen, wir möchten in der Konsole protokollieren, was wir im Texteditor schreiben. Dazu müssen wir zunächst eine Schaltfläche innerhalb des -Tags erstellen.
Betrachten Sie den unten gezeigten Codeausschnitt, der eine Schaltfläche erstellt.
<button onclick="consoleHTMLContent()">Print in Console</button>
Nach dem Login kopieren
Jetzt konzentrieren wir uns auf das <script>-Tag, wo wir eine Funktion erstellen müssen, die tatsächlich den Inhalt des Quill-Texteditors zusammen mit einigen anderen Symbolleistenoptionen protokolliert. <p>
</p>Beachten Sie das unten gezeigte aktualisierte <script>-Tag. <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">Nach dem Login kopieren</div></div>
Im obigen <script>-Tag haben wir eine Funktion namens consoleHTMLContent, in der ich den in der Root-Eigenschaft des Quill-Objekts vorhandenen Inhalt ausdrucke
</p><p>index.html<b></b>
</p>Der aktualisierte <p>index.html<b>Code wird unten angezeigt. </b>
</p>Beispiel<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>
Nach dem Login kopieren
Wenn wir den obigen Code im Browser ausführen, sehen wir einen Texteditor. Sobald wir Text in den Editor eingeben und auf die Schaltfläche klicken, wird das Stammobjekt des Quill-Texteditors in der Konsole gedruckt.
Ich habe versucht, eine einfache Codezeile im Editor zu schreiben, habe dann auf die Schaltfläche geklickt und dies ist die Ausgabe, die ich in der Browserkonsole erhalten habe.
In diesem Tutorial zeigen wir, wie man mit Quill.js einen Texteditor mit verschiedenen Symbolleistenoptionen erstellt. Anhand mehrerer Beispiele erklären wir, wie Sie Symbolleisten hinzufügen oder entfernen und wie Sie das Stammelement im Quill-Texteditor steuern.
Das obige ist der detaillierte Inhalt vonErstellen eines Texteditors mit Quill.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
