Heim >Web-Frontend >js-Tutorial >Erstellen eines Texteditors mit Quill.js
Erstellen eines Texteditors mit Quill.js
- WBOYnach vorne
- 2023-08-23 23:29:021283Durchsuche
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>
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>
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<body> <div id="editor" style="height: 250px"></div> </body>Im obigen Code erstellen wir ein
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. </script>
Bedenken Sie das unten gezeigte <script>-Tag. </script>
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>
Das obige <script>-Tag sollte am Ende des <body>-Tags platziert werden, also bevor das <body>-Tag geschlossen wird. <p>
index.html<h3>
Der gesamte HTML-Code wird unten angezeigt. <p>
Beispiel<h3>
<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>