In diesem Artikel betrachten wir das Erstellen eines Editors, der bereits über eine Symbolleiste mit mehreren Optionen verfügt, die Texteingabe und die Textanzeige.

Einführung

Rich-Text-Editoren sind aus unserer Interaktion mit Webanwendungen nicht mehr wegzudenken, insbesondere wenn es um die Erstellung von Inhalten geht. Rich-Text-Editoren ermöglichen es Ihnen, das Erscheinungsbild des Textes zu steuern und bieten Content-Erstellern eine leistungsstarke Möglichkeit, HTML überall zu erstellen und zu veröffentlichen.

In diesem Artikel verwenden wir Draft.js und reagieren-entwurf-wysiwyg um einen Rich-Text-Editor zu erstellen und den Text anzuzeigen, den wir mit dem Editor erstellt haben. Draft.js ist ein Rich-Text-Framework für React, das die Teile bereitstellt, die es einem Entwickler ermöglichen, eine breite Palette von Rich-Text-Kompositionsmöglichkeiten zu erstellen, die von einfachen Textstilen bis hin zu leistungsfähigeren Funktionen wie eingebetteten Medien reichen. React-draft-wysiswg ist ein wysiwyg-Editor (What you see is what you get), der mit React- und Draft.js-Bibliotheken erstellt wurde. Es bietet eine schnelle Möglichkeit, einen Editor mit vielen sofort einsatzbereiten Funktionen einzurichten, sodass Sie sie nicht selbst erstellen müssen.

Voraussetzungen

• In diesem Tutorial wird davon ausgegangen, dass Sie über Grundkenntnisse in Reagieren
• Stellen Sie sicher, dass Sie Knoten , Garn , oder Über dem Meeresspiegel auf Ihrem Rechner installiert. Sie können den Links folgen, um Anweisungen zur Installation zu erhalten, wenn Sie sie noch nicht installiert haben
• Wir werden verwenden Erstellen-Reagieren-App um unser Projekt zu booten

Einstieg

Lassen Sie uns unser Projekt in einem Verzeichnis Ihrer Wahl erstellen. Jeder der unten hervorgehobenen Befehle kann in die Befehlszeile eingegeben werden, um Ihr Projekt zu erstellen.

npx:

npm (|_+_| ist in npm 6+ verfügbar):

Garn ( Garn erstellen ist erhältlich in Garn 0.25+):

Diese erzeugen einen Projektordner mit folgender Ordnerstruktur:

Navigieren Sie zum Stammverzeichnis Ihres Projektordners und führen Sie ihn aus:

Dadurch wird die App im Entwicklungsmodus ausgeführt und Sie können sie über den Link im Browser anzeigen http://localhost:3000/ .

Installieren Sie zusätzliche Abhängigkeiten

Setup-Editor

Um loszulegen, müssen wir einige Änderungen am |_+_| . vornehmen Datei. Wir benötigen die Editorkomponente und die Stile von |_+_| sowie |_+_| von Draft.js. Die Editor-Komponente verwendet den standardmäßigen Draft.js-Editor ohne jegliche Formatierung. Der Draft.js-Editor ist als kontrollierter |_+_| Komponente, die auf der Controlled Input API von React basiert. |_+_| bietet eine Momentaufnahme des Editorstatus. Dazu gehören der Rückgängig-/Wiederherstellen-Verlauf, der Inhalt und der Cursor.

Lassen Sie uns einige anfängliche Änderungen hinzufügen, um den Editor anzuzeigen:

Wir beginnen mit einem leeren Zustand, der mit dem |_+_| . erstellt wurde Methode von |_+_|. Die Editor-Komponente nimmt |_+_| als Requisite. Sie werden feststellen, dass nach dem Speichern die Änderungen und Aktualisierungen angezeigt werden, die Ansicht sieht nicht gut aus:

Für die |_+_| . sind einige Änderungen erforderlich Datei. Ersetzen Sie den Inhalt durch Folgendes:

Nach Updates ist unser |_+_| Komponente sieht in etwa so aus:

Den Editor stylen

Wenn Sie sich den oben gerenderten Editor ansehen, ist es ziemlich schwierig zu sagen, wo man Text eingeben soll. Die verschiedenen Abschnitte des Editors können durch Stil-Requisiten deutlicher gemacht werden. Die Requisiten können entweder die Klasse sein, die für einen bestimmten Abschnitt angewendet werden soll, oder ein Objekt, das die Stile enthält.

• WrapperClassName=Wrapper-Klasse
• editorClassName=Editor-Klasse
• ToolbarClassName=Toolbar-Klasse
• WrapperStyle={}
• EditorStyle = {}
• ToolbarStyle={}

Fügen Sie |_+_| . hinzu Requisiten an die Editor-Komponente und die entsprechenden Stile an |_+_| wie folgt, um den Editor zu stylen.

Maine Roadrunner E-Mail-Anmeldung

App.js:

App.css:

Wenn wir die Anwendung neu laden, sollte der Editor etwa so aussehen:

#reagieren #javascript #web-entwicklung #programmierung #entwickler

blog.logrocket.com

Erstellen von Rich-Text-Editoren in React mit Draft.js und React-draft-wysiwyg

Wir werden Draft.js und React-draft-wysiwyg verwenden, um einen Rich-Text-Editor zu erstellen und den Text anzuzeigen, den wir mit dem Editor erstellt haben. Draft.js ist ein Rich-Text-Framework für React, das bereitstellt. React-draft-wysiswg ist ein wysiwyg-Editor (What you see is what you get), der mit React- und Draft.js-Bibliotheken erstellt wurde