React Rich Text Editor – Ein WYSIWYG Markdown Editor
- WYSIWYG-HTML- und Markdown-Inhalte mit vielseitigen Tools für moderne Web- und Mobile-Apps bearbeiten.
- Einfache Integration in Blog-Editoren, Nachrichten, HTML-E-Mails und Foren-Anwendungen.
- Schwebende oder Inline-Editoren erstellen für die Auswahl und direkte Bearbeitung von Seitenelementen.
Quick Overview Video
Trusted by the world’s leading companies
Überblick
Der React Rich Text Editor ist ein funktionsreicher WYSIWYG HTML-Editor und WYSIWYG Markdown-Editor. Er wird häufig zum Erstellen von Blogs, Forenbeiträgen, Notizbereichen, Support-Tickets (Vorfällen), Kommentarbereichen, Messaging-Anwendungen und vielem mehr. Das Steuerelement bietet eine effiziente Benutzeroberfläche für ein besseres Bearbeitungserlebnis mit mobiler Unterstützung. Es verfügt über verschiedene Tools zum Bearbeiten und Formatieren von Rich-Content und gibt gültiges HTML-Markup oder Markdown-Inhalte (MD) zurück. Es ermöglicht Benutzern, Bilder, Links, Tabellen und Listen mit modularen Architekturen einzufügen.
Warum den Syncfusion React Rich Text Editor wählen?
WYSIWYG-Editor
Die React Rich Text Editor-Komponente kann als WYSIWYG-HTML-Editor oder als Markdown-Editor verwendet werden und unterstützt auch die Iframe-Bearbeitung mit konfigurierbaren Iframe-Eigenschaften.
Einfache Interaktion
Benutzer können Text und Absätze einfach formatieren, indem sie die Vordergrund- und Hintergrundfarben des Editors festlegen; geordnete und ungeordnete benutzerdefinierte Listen hinzufügen; und die Schriftart, Kursivschrift, Unterstreichung, Durchstreichung und Fettschrift angeben.
Flexible Bearbeitung
Für ein besseres Bearbeitungserlebnis bietet die Reakt Rich Text Editor-Komponente eine Vielzahl von Tools und Optionen. Benutzer können schnell Bilder, Videos, Hyperlinks und Tabellen einfügen; Tabellenzellen zusammenführen; und Tasten konfigurieren.
HTML-Codevorschau
Untersuchen und bearbeiten Sie den HTML-Code direkt im Quellcode und zeigen Sie das Vorschaubild im (HTML Live Editor) an.
Symbolleiste mit umfangreicher Auswahl an Tools
Der WYSIWYG Rich Text Editor für React bietet eine Vielzahl von Symbolleistenoptionen, die vollständig anpassbar sind, wie z. B. mehrzeilige, erweiterbare, schnelle und schwebende Symbolleisten. Die Toolbefehle sind nach verwandten Funktionen gruppiert.
Passt sich jeder Auflösung an
Der Rich Text Editor hat ein hochreaktionsschnelles Layout und ein optimiertes Design für Desktops, Tablets und Smartphones. Er funktioniert gut auf allen Mobiltelefonen, die iOS, Android oder Windows OS verwenden.
Integration mit Bibliotheken von Drittanbietern
Es ist einfach, Drittanbieter-Bibliotheken, wie z.B. eine Rechtschreibprüfung, Code Mirror, etc., in den Rich Text Editor zu integrieren, um den Inhalt zu verbessern.
Globalisierung und Lokalisierung
Ermöglichen Sie Benutzern aus verschiedenen Regionen, den Rich Text Editor zu verwenden, indem Sie Datumsangaben, Währungen und Zahlenformatierungen an ihre Präferenzen anpassen.
KI-bereiter Rich Text Editor für intelligenteres Schreiben
Verbessern Sie Ihre Texte mit dem KI-fähigen Rich Text Editor. Korrigieren Sie Grammatikfehler, formulieren Sie Inhalte um, wechseln Sie Sprachen und fassen Sie Texte sofort zusammen, alles direkt im Editor.
React Rich Text Editor Codebeispiel
Beginnen Sie mit dem React Rich Text Editor mit ein paar einfachen Zeilen TSX-Code, wie unten gezeigt. Entdecken Sie auch dieses React Rich Text Editor-Beispiel, das zeigt, wie die Komponente in React gerendert und konfiguriert wird.
// filepath: c:\featuretour-web-ej2\react-js2\react-rich-text-editor.md
import { HtmlEditor, Link, Image, Inject, RichTextEditorComponent, Toolbar } from '@syncfusion/ej2-react-richtexteditor';
import * as React from 'react';
class App extends React.Component<{},{}> {
public render() {
return (
<RichTextEditorComponent>
<p>The Rich Text Editor component is a WYSIWYG ("what you see is what you get") editor that provides the best user experience to create and update content.
Users can format their content using standard toolbar commands.</p>
<p><b>Key features:</b></p>
<ul>
<li>
<p>Provides <IFRAME> and <DIV> modes</p>
</li>
<li>
<p>Capable of handling Markdown editing.</p>
</li>
</ul>
<Inject services={[Toolbar, HtmlEditor, Link, Image]} />
</RichTextEditorComponent>
);
}
}
export default App;HTML-Editor-Symbolleiste
Die React WYSIWYG Texteditor-Symbolleiste bietet eine Vielzahl von Befehlen zum Bearbeiten und Formatieren des Inhalts. Verwenden Sie die Symbolleiste, um Text und Absätze zu formatieren und Bilder, Hyperlinks, Tabellen, Listen usw. einzufügen. Die Toolbefehle sind nach verwandten Funktionen gruppiert.
Mehrzeilige Symbolleiste
Die Befehle der Symbolleiste, die überlaufen, werden in die folgenden Zeilen innerhalb der Symbolleiste umbrochen.
Symbolleiste erweitern
Die überlaufenden Symbolleistenbefehle, die in der nächsten Zeile ausgeblendet sind, werden sichtbar, wenn die Symbolleiste über das Erweiterungssymbol erweitert wird.
Schnelle Symbolleiste
Diese Symbolleiste enthält häufig verwendete Befehle für Text, Bilder, Tabellen und Links. Sie hilft, Elemente schnell aufzurufen und zu formatieren und anzupassen.
Schwebende Symbolleiste
Die Symbolleiste des HTML-WYSIWYG-Editors haftet nicht am oberen Rand des Editors, sondern schwebt beim Scrollen der aktuellen Seite innerhalb des Editors.
Vollständig anpassbar
Die Symbolleistenschaltflächen der React Rich Text Editor-Komponente sind vollständig anpassbar. Fügen Sie Schaltflächen hinzu oder entfernen Sie sie und gruppieren Sie Befehle nach Kategorie. Dies hilft Benutzern, die Symbolleiste nach den Anforderungen der Anwendung zu gestalten, wie z. B. einen HTML-Blog-Editor oder einen HTML-E-Mail-Composer.
Benutzerdefiniertes Tool
Fügen Sie der Symbolleiste neben den integrierten Befehlen auch eigene Befehle (Tools) mit Aktionen hinzu.
Inline-Modus
Der React Rich Text Editor zeigt einen Inline-HTML-Editor an, wenn der Inhalt in einem bearbeitbaren Bereich angeklickt oder ausgewählt wird.
Erwähnung und Hashtag
Beim Verfassen von Inhalten im React Rich Text Editor können Benutzer oder Gruppen markiert oder aus der Vorschlagsliste ausgewählt werden.
Bearbeitungserfahrung
Die React Rich Text Editor-Komponente bietet eine breite Palette von Tools und Optionen für ein besseres Bearbeitungserlebnis.
Bilder einfügen
Fügen Sie Bilder aus einem lokalen Pfad oder Serverpfad mit Bildunterschriften in den Inhalt ein und verknüpfen Sie URLs mit den Bildern. Laden Sie Bilder per Drag-and-Drop oder Dateiupload auf einen Server hoch. Zusätzlich bietet der Editor Optionen zum Einfügen von Bildern in BLOB- oder Base64-Formaten.
Hyperlinks einfügen
Fügen Sie Hyperlinks ein oder ändern Sie sie mit Anpassungsoptionen wie Anzeigetext, Tooltips und Links, die in einem neuen Fenster geöffnet werden sollen.
Tabellen einfügen
Fügen Sie HTML-Tabellen ein und bearbeiten Sie sie, um gitterartige Tabellendaten im WYSIWYG Rich Text Editor anzuzeigen. Bearbeiten Sie die Tabelle und ihre Elemente dynamisch (Zeilen und Spalten einfügen und entfernen, die gesamte Tabelle oder Zeilen oder Spalten in der Größe ändern und eine Tabelle entfernen).
Tabellenzellen zusammenführen und teilen
Führen Sie zwei oder mehr Zeilen- oder Spaltenzellen mit deren Inhalten zu einer einzigen Zelle zusammen. Eine einzelne Zelle kann auch horizontal und vertikal geteilt werden.
Textausrichtung
Eingebaute Einstellungen sind verfügbar, um Ihren Inhalt links, mittig oder rechts auszurichten oder zu rechtfertigen.
Enter- und Shift+Enter-Tastenkonfiguration
Der React Rich Text Editor ermöglicht das Einfügen von Tags beim Drücken der Enter-Taste und der Shift+Enter-Tasten. Die folgenden Tags können konfiguriert werden:
- P: Wenn ‘P’ konfiguriert ist, wird beim Drücken von Enter oder Shift+Enter ein ‘p’-Tag erstellt.
- DIV: Wenn ‘DIV’ konfiguriert ist, wird beim Drücken von Enter oder Shift+Enter ein ‘div’-Tag erstellt.
- BR: Wenn ‘BR’ konfiguriert ist, wird beim Drücken von Enter oder Shift+Enter ein ‘br’-Tag erstellt.
Text formatieren
- Formatieren Sie den ausgewählten Inhalt, ganze Absätze oder bestimmte Wörter oder Zeichen.
- Formatieren Sie Überschriften, Zitate, Code, Absätze usw.
- Fetter, kursiver, unterstrichener, durchgestrichener Text oder Großbuchstaben und Wörter.
- Ändern Sie die Absatzeinrückung und den Zeilenabstand.
- Wählen Sie Schriftarten und Schriftgrößen.
- Verwenden Sie Tief- und Hochstellungen.
- Wählen Sie die Schriftfarbe und die Hintergrundfarbe für den Inhalt.
Automatische Formatierung für Markdown-Syntax
Die Autoformatierung ermöglicht eine schnelle Inhaltsformatierung mithilfe von Markdown-ähnlichen Shortcodes. Dies macht Toolbarschaltflächen oder Dropdown-Menüs für die gängige Formatierung überflüssig. Wenn Markdown-Syntax wie # für Überschriften, ** für fett und * für kursiv eingegeben wird, konvertiert der Editor diese automatisch in HTML-Elemente.
Checklisten
Checklisten (To-Do-Listen) können direkt im Rich Text Editor erstellt werden. Benutzer können ganz einfach interaktive Kontrollkästchen-Elemente zu ihren Inhalten hinzufügen, um die Aufgabenverfolgung und -verwaltung in Dokumenten zu ermöglichen.
Hinzufügen benutzerdefinierter Listen
Erstellen Sie geordnete (nummerierte) oder ungeordnete (Aufzählungs-)Listen, um den Inhalt im React Rich Text Editor zu organisieren. Es unterstützt die Änderung des Aufzählungszeichens für ungeordnete Listen in Kreise oder Quadrate. Es unterstützt auch verschiedene Nummerierungsformate für geordnete Listen wie Kleinbuchstaben oder Großbuchstaben in römischen Ziffern.
Schnelles Einfügen von Tabellenzeilen und -spalten
Benutzer können schnell Zeilen und Spalten in eine Tabelle einfügen. Wenn Sie den Mauszeiger in die Nähe der Tabellenränder bewegen, erscheint ein „+“-Symbol, mit dem Benutzer Zeilen oder Spalten mit einem einzigen Klick hinzufügen können.
Zeilenhöhe
Benutzer können den vertikalen Abstand zwischen Textzeilen anpassen, wodurch sie die Kontrolle darüber haben, wie eng oder locker der Text innerhalb von Absätzen angeordnet wird. Dies verbessert die Lesbarkeit und das optische Gleichgewicht im Inhaltslayout.
Vollbild-Texteditor
Machen Sie den React Rich Text Editor bildschirmfüllend (Vollseiten-Editor) zum Bearbeiten von Inhalten.
Aus Microsoft Word und Excel einfügen
Der React Rich Text Editor bietet integrierte Optionen zum Einfügen von Inhalten mit Bildern aus Microsoft Word, Microsoft Outlook und Microsoft Excel, indem Tags, Attribute und Stile herausgefiltert werden. Wählen Sie außerdem, ob der Inhalt als reiner Text, mit bereinigten Stilen oder mit Quellformatierungsstilen eingefügt werden soll.
Auto-Hyperlink von URL
Der React Rich Text Editor ist so konfiguriert, dass er Text automatisch in einen Hyperlink umwandelt, wenn eine URL als Klartext eingegeben wird.
React Formularvalidierungen
Der RTE unterstützt Formulare und ruft Werte bei Formularübermittlungsaktionen ab. Die zwei Arten der Validierung sind:
- Erforderliche Validierung
- Validierung der maximalen Länge
Inhaltlänge begrenzen
Benutzer können die Anzahl der Zeichen in einem bestimmten Abschnitt einschränken.
Größenveränderbarer Editor
Der React Rich Text Editor kann in der Größe verändert werden, sodass Benutzer den Inhaltsbereich verbreitern oder verkleinern können.
Bild über Dateimanager einfügen
Der integrierte Dateimanager im Editor fügt Bilder von Cloud-Speichern oder einem Server ein und lädt sie hoch.
Formatpinsel
Verwenden Sie den Formatpinsel, um mühelos Formatierungen zu kopieren und auf Ihre Inhalte anzuwenden. So entfällt die manuelle Neuformatierung und Sie sparen wertvolle Zeit. Greifen Sie über die Symbolleiste oder praktische Tastenkombinationen auf den Formatpinsel zu, um ihn schnell und einfach anzuwenden. Nutzen Sie den Haftmodus, indem Sie auf die Schaltfläche in der Symbolleiste doppelklicken, wodurch Sie Formate nahtlos auf mehrere Stellen anwenden können.
Ausschneiden, Kopieren und Einfügen
Verwenden Sie Zwischenablageoperationen (Ausschneiden, Kopieren und Einfügen).
Rückgängig- und Wiederherstellungs-Manager
Der React Rich Text Editor verwaltet den Verlauf von Rückgängig- und Wiederherstellungsaktionen, sodass Benutzer mit der Bearbeitung experimentieren können.
Den Inhalt des Texteditors drucken
Drucken Sie den Inhalt des WYSIWYG Rich Text Editors mit angewandter Formatierung entweder über die Druckoption in der Symbolleiste oder programmatisch.
Berührungsfreundlicher und responsiver WYSIWYG-Editor
Der React Rich Text Editor (mobiler HTML-Editor) erkennt Touch-Gesten, sodass Benutzer die Symbolleiste durch Wischen nach links oder rechts verschieben können. Das responsive, mobilfreundliche Design bietet die beste Benutzererfahrung auf allen Mobil-, Tablet- und Desktop-Formfaktoren.
Integrierte und anpassbare Themes
Der React Rich Text Editor wird mit mehreren integrierten Themes geliefert: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent und High Contrast.
Entwicklerfreundliche APIs
Es stehen ausreichend clientseitige APIs zur Verfügung, um den Bearbeitungsprozess von Inhalten zu verbessern.
HTML-Editor-Barrierefreiheit
Tastaturnavigation
Der RTE stellt sicher, dass jede Zelle mit der Tastatur zugänglich ist. Wichtige Funktionen wie Sortieren, Auswählen und Bearbeiten können allein mit Tastaturbefehlen ausgeführt werden; keine Mausinteraktion ist erforderlich. Dies hilft bei der Erstellung hochgradig barrierefreier Anwendungen mit dieser Komponente.
Screenreader
Die RTE-Ansicht bietet vollständige WAI-ARIA-Barrierefreiheitsunterstützung. Die Benutzeroberfläche enthält visuelle Elemente mit hohem Kontrast, die sehbehinderten Menschen ein optimales Seherlebnis ermöglichen. Außerdem sind gültige UI-Beschreibungen über assistierende Technologien wie Screenreader leicht zugänglich.
Rechts nach Links (RTL)
Der RTE unterstützt die Darstellung von rechts nach links, wodurch Text und Layout des Texteditors von rechts nach links angezeigt werden können. Dies verbessert die Benutzererfahrung und Zugänglichkeit für Benutzer von RTL-Sprachen wie Arabisch, Farsi und Hebräisch.
Sie sind unsicher, wie Sie Ihren ersten React Rich Text Editor erstellen sollen? Unsere Tutorial-Videos und Dokumentation können helfen.
Ich möchte es jetzt ansehen Ich möchte es jetzt lesenEntdecken Sie Syncfusions vollständiges React-Komponenten-Ökosystem
Entdecken Sie über 145+ React-UI-Komponenten mit bewährten, produktionsreifen Steuerelementen und den neuesten reinen React-Komponenten, die nativ für die moderne Web-App-Entwicklung erstellt wurden.
-
React-Komponenten
-
Reine React-Komponenten
-
SMARTE KOMPONENTENRASTEREDITORSDROPDOWN-MENÜSEINGABENDATENVISUALISIERUNGNAVIGATIONSCHALTFLÄCHENINTERAKTIVER CHATBENACHRICHTIGUNGFORMULARE
-
RasterDatenvisualisierungNavigationSchaltflächenEingaben
Häufig gestellte Fragen
Warum sollten Sie den Syncfusion React Rich Text Editor wählen?
Der Syncfusion React Rich Text Editor unterstützt folgende Funktionen:
Bearbeiten Sie WYSIWYG HTML- und Markdown-Inhalte mit einer Vielzahl von Tools für moderne Web- und Mobilanwendungen.
Einfache Integration in Blog-Editoren, Nachrichten, HTML-E-Mail-Komponisten und Anwendungen im Stil von Diskussionsforen.
Erstellen Sie eine schwebende Symbolleiste oder einen Inline-Editor, der die Auswahl jedes bearbeitbaren Elements auf der Seite und die direkte Bearbeitung ermöglicht.
- Genießen Sie einfache Konfiguration und APIs.
- Rendert problemlos in allen modernen Browsern.
- Nutzen Sie eine mobilfreundliche und responsive Benutzeroberfläche.
Profitieren Sie von umfangreichen Lernressourcen wie Demos und Dokumentationen, um schnell mit der Komponente zu beginnen.
Was kostet der Syncfusion React Rich Text Editor?
Wir verkaufen den React Rich Text Editor nicht separat. Er ist nur als Teil des Essential Studio Komponentenpakets erhältlich. Dieses enthält über 1,600 Komponenten und Frameworks, einschließlich des React Rich Text Editors. Es beinhaltet Support und Updates bis zum Ablauf des Abonnements. Darüber hinaus können wir je nach aktuell aktiven Aktionen Rabatte anbieten. Bitte kontaktieren Sie unsere Produktspezialisten für ein Angebot für Ihre Situation und um nach zusätzlichen Rabatten zu fragen.
Wo finde ich die Demo des Syncfusion React Rich Text Editors?
Kann ich die Syncfusion React Rich Text Editor-Komponente separat erwerben?
Nein, unsere über 1,600 Komponenten und Frameworks für Web, Mobil und Desktop, einschließlich unseres Vue Rich Text Editors, werden nicht einzeln verkauft. Wir haben das Produkt jedoch so wettbewerbsfähig bepreist, dass es nur geringfügig mehr kostet als das, was einige andere Anbieter für ihre Vue Rich Text Editor-Komponente allein verlangen. Wir haben auch festgestellt, dass unsere Kunden in unserer Erfahrung in der Regel mit einem unserer Produkte beginnen und dann schnell auf mehrere Produkte erweitern. Daher hielten wir es für am besten, alle über 1,600 Komponenten und Frameworks für eine Abonnementgebühr anzubieten. Zusätzlich könnten wir gegebenenfalls Rabatte basierend auf aktuell aktiven Aktionen anbieten. Bitte kontaktieren Sie unsere Produktspezialisten, um zu erfahren, ob Sie für zusätzliche Rabatte qualifiziert sind.
Kann ich den Syncfusion React Rich Text Editor kostenlos herunterladen und nutzen?
Nein, dies ist ein kommerzielles Produkt und erfordert eine kostenpflichtige Lizenz. Eine kostenlose Community-Lizenz ist jedoch auch für Unternehmen und Einzelpersonen erhältlich, deren Organisationen weniger als 1 Million USD jährliche Bruttoeinnahmen haben, 5 oder weniger Entwickler und insgesamt 10 oder weniger Mitarbeiter.
Wie fange ich mit dem Syncfusion React Rich Text Editor an?
Ein guter Ausgangspunkt wäre unsere umfassende Dokumentation für den Einstieg.
Unsere Kunden lieben uns
Mit einem ausgezeichneten Toolset und einem großartigen Supportteam verkürzt Syncfusion® die Entwicklungszeit der Kunden.Hier sind einige ihrer Erfahrungen.
Nice suite of components
A very complete set of components, that has an edge on other major vendors which offer components. A lot less code required to use and code samples for more complete components. Integrates well with other 3rd party components.
John A.
C# Developer (Contract)
Perfect for any developer
The Syncfusion Essential Studio has excellent features that are updated or added constantly on a regular basis. The support is exceptional—fast and professional responses. The support team provides you with code samples. As for the bugs, they always try to include the fix in the next release.
Dejan D.
Chief Executive Officer
Echte Erfolgsgeschichten ansehen
Entwickler auf der ganzen Welt vertrauen auf Syncfusions Essential Studio, um komplexe Projekte zu vereinfachen und die Auslieferung zu beschleunigen. Mit einer umfangreichen Bibliothek an UI-Steuerelementen, leistungsstarken SDKs und zuverlässigem Support hilft Essential Studio Teams, unternehmensreife Anwendungen mit Zuversicht zu erstellen.
Fallstudien erkundenIndustrie
Softwareentwicklung
75% Kostenreduzierung
50% Schnellere Entwicklung
Industrie
Versorgungsunternehmen (Öl und Gas)
450+ Stunden eingespart
Gestraffte Prozesse und Entwicklungsaufwand in Stunden reduziert.
Fortschrittliche, flexible Funktionen
Benutzer durch robuste und vielseitige Funktionalität befähigt.
Industrie
Software und Technologie
1000+ Stunden eingespart
Beschleunigte Entwicklung mit unternehmensreifen UI-Komponenten.
Effizientes Dateimanagement
Vereinfachte Workflows mit Dokumentbibliotheken, ohne sie von Grund auf neu zu erstellen.
Industrie
Software und Technologie
2 Jahre Verzögerung vermieden
Zwei Jahre Verzögerungen durch proaktive Planung verhindert.
Termingerechte Lieferung
Projekte termingerecht mit zuverlässigen Steuerelementen geliefert.
Industrie
IT-Dienstleistungen und IT-Beratung
Verbesserte Leistung
Große Datensätze werden mit einfacher Anpassung und schnellem Debugging verarbeitet.
Hochgradig anpassbar
Plug-and-Play-Steuerelemente mit schneller Vorlagenintegration.
Industrie
Professionelle Dienstleistungen
Sofortiger Zugriff
Schnelle Verfügbarkeit von Funktionen und Ressourcen.
Reduzierte Abhängigkeiten
Weniger Abhängigkeiten für eine schnellere Entwicklung.
Von Benutzern auf der ganzen Welt bewertet
Syncfusion React Rich Text Editor Ressourcen
UI Kits
Figma Download
Figma Download
Auszeichnungen
Viele behaupten, dass sie herausragend sind. Doch wenn andere das erkennen und loben, bedeutet es viel mehr. Syncfusion® präsentiert mit Stolz folgende Branchenauszeichnungen.
Neueste Aktivitäten in React Rich Text Editor Tutorials und Blogs
Die Tutorial-Videos und Blog-Beiträge zum React Rich Text Editor helfen Ihnen dabei, Ihre erste App mit diesen React-Komponenten zu erstellen. Sie bieten Problemlösungsstrategien, beschreiben Funktionen und Features, kündigen neue Feature-Releases an, erklären Best Practices, und zeigen Beispielszenarien. Entdecken Sie unsere neuesten Beiträge in unserem Blog und über unsere Tutorial-Video-Kanäle für Updates zum React Rich Text Editor.
