JavaScript Rich Text Editor - Ein WYSIWYG Markdown Editor
- WYSIWYG‑HTML für Web/Mobile bearbeiten
- Integration in Blogs, News, Mail und Foren
- Als Inline‑Editor für In‑Place‑Bearbeitung nutzbar.
- Moderne UI und anpassbare Symbolleiste.
Trusted by the world’s leading companies
Überblick
Der JavaScript 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 (Incidents), Kommentarsektionen, Messaging-Anwendungen und mehr verwendet. Das Steuerelement bietet eine effiziente Benutzeroberfläche für ein besseres Bearbeitungserlebnis mit mobiler Unterstützung. Es verfügt über verschiedene Werkzeuge zum Bearbeiten und Formatieren von Inhalten und liefert gültiges HTML-Markup oder Markdown (MD)-Inhalte zurück. Dank seiner modularen Architektur können Benutzer Bilder, Links, Tabellen und Listen einfügen.
Warum den Syncfusion JavaScript Rich Text Editor wählen?
WYSIWYG Editor
Das JavaScript Rich Text Editor Steuerelement kann als WYSIWYG HTML-Editor oder als Markdown-Editor verwendet werden und unterstützt zudem die iframe Bearbeitung mit konfigurierbaren Iframe-Eigenschaften.
Einfache Interaktion
Sie können Text und Absätze einfach formatieren, indem Sie Vorder- und Hintergrundfarben des Editors festlegen, geordnete und ungeordnete benutzerdefinierte Listen hinzufügen sowie Schriftart, Kursivschrift, Unterstreichung, Durchstreichung und Fettdruck spezifizieren.
Flexibles Editieren
Für ein besseres Bearbeitungserlebnis bietet das JavaScript Rich Text Editor Steuerelement eine Vielzahl von Werkzeugen und Optionen. So können Sie schnell Bilder, Videos, Hyperlinks und Tabellen einfügen, Tabellenzellen zusammenführen und Tasteneingaben konfigurieren.
Vorschau des HTML-Codes
Untersuchen und bearbeiten Sie den HTML-Code direkt im Quellcode und betrachten Sie das Vorschauergebnis (HTML Live-Editor).
Symbolleiste
Der WYSIWYG Rich Text Editor für JavaScript bietet eine Vielzahl von Symbolleistenoptionen, die vollständig anpassbar sind. Die Optionen ermöglichen mehrzeilige, erweiterbare, schnelle und schwebende Symbolleisten. Die Befehle sind nach verwandten Funktionen gruppiert.
Passt sich jeder Auflösung an
Der Rich Text Editor verfügt über ein hochreaktives 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, Bibliotheken von Drittanbietern zu integrieren, wie z. B. eine Rechtschreibprüfung oder Code Mirror, um den Inhalt des Rich Text Editor zu verbessern.
Globalisierung und Lokalisierung
Ermöglichen Sie Benutzern aus verschiedenen Regionen die Nutzung des Rich Text Editor durch Formatierung von Daten, Währungen und Nummerierungen nach ihren Vorlieben.
KI-bereiter Rich Text Editor
Transformieren Sie Ihre JavaScript-Anwendungen mit unserem KI-bereiten Rich Text Editor, der Grammatikkorrektur, mehrsprachige Unterstützung, Umformulierung und Zusammenfassung bietet.
JavaScript Rich Text Editor Codebeispiel
Beginnen Sie einfach mit dem JavaScript Rich Text Editor mit nur wenigen Zeilen HTML- und TypeScript-Code, wie unten gezeigt. Entdecken Sie auch dieses JavaScript Rich Text Editor Beispiel, das zeigt, wie die Komponente gerendert und konfiguriert wird.
<div class="control-section">
<div id="defaultRTE">
</div>
</div>import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
import {RichTextEditor, Toolbar, Link, Image, HtmlEditor
} from '@syncfusion/ej2-richtexteditor';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor);
let defaultRTE: RichTextEditor = new RichTextEditor({
value: `<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>`
});
defaultRTE.appendTo('#defaultRTE');HTML-Editor Symbolleiste
Die WYSIWYG HTML-Editor Symbolleiste bietet eine Vielzahl von Befehlen zum Bearbeiten und Formatieren von Inhalten. Formatieren Sie Text und Absätze und fügen Sie Bilder, Hyperlinks, Tabellen und Listen ein. Die Befehle sind nach verwandten Funktionen gruppiert.
Mehrzeilige Symbolleiste
Befehle der HTML5 WYSIWYG-Editor Symbolleiste, die überlaufen, werden in die folgenden Zeilen innerhalb der Symbolleiste umgebrochen.
Symbolleiste erweitern
Die überlaufenden Befehle, die in der nächsten Zeile verborgen sind, werden sichtbar, wenn die Symbolleiste über das Erweiterungssymbol erweitert wird.
Schnell-Symbolleiste
Diese Symbolleiste enthält häufig verwendete Befehle für Text, Bilder, Tabellen und Links. Sie hilft dabei, schnell auf diese Elemente zuzugreifen und sie zu formatieren.
Schwebende Symbolleiste
Die Symbolleiste des HTML5 WYSIWYG-Editors klebt nicht am oberen Rand des Editors. Sie schwebt innerhalb des Editorbereichs, wenn auf der aktuellen Seite gescrollt wird.
Vollständig anpassbar
Die Schaltflächen der Symbolleiste des HTML5 Rich Text Editor Steuerelements sind vollständig anpassbar. Fügen Sie Schaltflächen hinzu oder entfernen Sie sie, und gruppieren Sie Befehle nach Kategorien. Dies hilft dabei, die Symbolleiste an die Anforderungen der Anwendung anzupassen, z. B. für HTML-Blog-Bearbeitung, HTML-E-Mail-Erstellung und mehr.
Benutzerdefiniertes Werkzeug
Fügen Sie Ihren eigenen Befehlen (Werkzeugen) Aktionen zu den integrierten Befehlen in der Symbolleiste hinzu.
Inline-Modus
Der JavaScript Rich Text Editor zeigt einen Inline-HTML-Editor an, wenn auf den Inhalt in einem editierbaren Bereich geklickt oder dieser ausgewählt wird.
Erwähnung und Hashtag
Beim Erstellen von Inhalten im JavaScript Rich Text Editor können Benutzer oder Gruppen markiert oder aus einer Vorschlagsliste ausgewählt werden.
Konfiguration der Enter- und Umschalt+Enter-Tasten
Passen Sie an, welche Tags beim Drücken der Enter-Taste und der Umschalt + Enter-Tasten eingefügt werden. Sie können das Steuerelement so konfigurieren, dass spezifische Tags wie P (erzeugt ein <p> Tag), DIV (erzeugt ein <div> Tag) und BR (erzeugt ein
Tag) eingefügt werden, wenn eine dieser Tastenkombinationen verwendet wird.
Bearbeitungserlebnis
Das JavaScript Rich Text Editor Steuerelement bietet eine breite Palette an Werkzeugen und Optionen für ein besseres Bearbeitungserlebnis.
Bilder einfügen
Fügen Sie Bilder in den Inhalt von einem lokalen Pfad oder Serverpfad mit Bildunterschriften ein und verknüpfen Sie URLs mit den Bildern. Laden Sie Bilder mit Drag-and-Drop oder Dateiupload-Funktionalität auf einen Server hoch. Zusätzlich bietet der Editor Optionen zum Einfügen von Bildern im BLOB- oder Base64-Format.
Hyperlinks einfügen
Einfügen oder Ändern von Hyperlinks mit Anpassungsoptionen wie Anzeigetext, Tooltip und ob der Link in einem neuen Fenster geöffnet werden soll.
Tabellen einfügen
Fügen Sie HTML-Tabellen ein und bearbeiten Sie diese, um rasterartige Tabellendaten im JavaScript WYSIWYG Rich Text Editor anzuzeigen. Manipulieren Sie die Tabelle und ihre Elemente dynamisch: Einfügen oder Entfernen von Zeilen und Spalten; Größenänderung der gesamten Tabelle, von Zeilen oder Spalten; und Entfernen einer Tabelle.
Tabellenzellen zusammenführen und aufteilen
Führen Sie zwei oder mehr Zeilen- oder Spaltenzellen zu einer einzigen Zelle mit ihrem Inhalt zusammen. Ebenso kann eine einzelne Zelle sowohl horizontal als auch vertikal aufgeteilt werden.
Textausrichtung
Integrierte Einstellungen sind verfügbar, um Inhalte im Blocksatz auszurichten oder linksbündig, zentriert oder rechtsbündig darzustellen.
Emoji einfügen
Integrieren Sie Emoji in Ihren Inhalt. Suchen Sie in einer umfangreichen Sammlung von Emoji und wählen Sie diejenigen aus, die zu Ihrer Nachricht passen. Greifen Sie auf die Emoji-Auswahl zu, indem Sie einfach die Doppelpunkt-Taste (:) im JavaScript Rich Text Editor drücken.
Text formatieren
- Formatieren Sie ausgewählte Inhalte, ganze Absätze oder spezifische Wörter oder Zeichen.
- Formatieren Sie Überschriften, Zitate, Code, Absätze usw.
- Fett, kursiv, unterstrichen, durchgestrichen oder Großschreibung von Buchstaben und Wörtern.
- Ändern von Absatzeinzug und Abständen.
- Auswahl von Schriftarten und Schriftgrößen.
- Verwendung von tiefergestellten und hochgestellten Zeichen.
- Auswahl der Schriftfarbe und Hintergrundfarbe für den Inhalt.
Benutzerdefinierte Listen hinzufügen
Erstellen Sie geordnete (nummerierte) oder ungeordnete (Aufzählungs-) Listen, um den Inhalt im JavaScript Rich Text Editor zu organisieren. Das Steuerelement bietet Unterstützung für die Änderung des Aussehens der Aufzählungszeichen bei ungeordneten Listen in Kreise oder Quadrate. Es unterstützt zudem verschiedene Nummerierungsformate für geordnete Listen, wie z. B. kleinste griechische Buchstaben oder römische Ziffern.
Vollbild-Texteditor
Schalten Sie den JavaScript HTML5-Editor in den Vollbildmodus (ein ganzseitiger Editor), um den Inhalt zu bearbeiten.
Einfügen aus Microsoft Word und Excel
Der JavaScript Markdown 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. Zusätzlich gibt es Optionen zu wählen, ob der Inhalt als reiner Text, mit bereinigten Stilen oder Quellformatierungsstilen eingefügt werden soll.
Automatische Hyperlink-Erstellung von URLs
Der JavaScript Rich Text Editor ist so konfiguriert, dass Text automatisch in einen Hyperlink umgewandelt wird, wenn eine URL als einfacher Text eingegeben wird.
JavaScript Formularvalidierungen
Der JavaScript Rich Text Editor ist ein Formularsteuerelement, das HTML-Formulare unterstützt und Werte bei Formularübermittlungen abruft. Die zwei Arten der Validierung sind:
- Erforderliche Validierung (Required)
- Maximale Längenvalidierung
Inhaltslänge begrenzen
Beschränken Sie die maximale Anzahl der Zeichen des Inhalts.
Skalierbarer Editor
Der JavaScript Rich Text Editor verfügt über eine integrierte Unterstützung für die Größenänderung, die den Inhaltsbereich verbreitert oder verkleinert.
Bild über Dateimanager einfügen
Der in den Rich Text Editor integrierte Dateimanager kann verwendet werden, um Bilder aus Cloud-Speichern oder von einem Server einzufügen und hochzuladen.
Format übertragen (Format Painter)
Verwenden Sie den Formatübertrager, um Formatierungen zu kopieren und auf Ihren Inhalt anzuwenden. Greifen Sie auf den Formatübertrager über die Symbolleiste oder Tastaturkürzel zu, um eine schnelle und einfache Anwendung zu ermöglichen. Nutzen Sie den “Sticky”-Modus durch Doppelklicken auf die Toolbar-Schaltfläche, um Formate auf mehrere Stellen anzuwenden.
Ausschneiden, Kopieren und Einfügen
Der Rich Text Editor ermöglicht Benutzern die Verwendung von Zwischenablage-Operationen (Ausschneiden, Kopieren und Einfügen).
Rückgängig/Wiederholen-Manager
Der Rich Text Editor verwaltet den Verlauf der Rückgängig/Wiederholen-Aktionen, um Bearbeitungsschritte zu speichern.
Inhalt des Texteditors drucken
Drucken Sie den Inhalt des WYSIWYG Rich Text Editor entweder über die Druckoption in der Symbolleiste oder programmgesteuert mit angewendeter Formatierung.
Touch-freundlicher und reaktionsschneller WYSIWYG Editor
Der JavaScript Text Editor (mobiler HTML-Editor) erkennt Touch-Gesten, sodass der Benutzer nach links oder rechts wischen kann, um die Symbolleiste zu verschieben. Das reaktionsschnelle, mobilfreundliche Design bietet die beste Benutzererfahrung auf allen Mobil-, Tablet- und Desktop-Formfaktoren.
Integrierte und anpassbare Themes
Der JavaScript Rich Text Editor wird mit mehreren integrierten Themes ausgeliefert: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent und High Contrast.
Entwicklerfreundliche APIs
Es stehen ausreichend clientseitige APIs zur Verfügung, um die Inhaltsbearbeitung zu optimieren.
Barrierefreiheit des HTML-Editors
Tastaturnavigation
Die JavaScript Rich Text Editor Komponente stellt sicher, dass jede Zelle über die Tastatur zugänglich ist. Wichtige Funktionen wie Sortieren, Auswählen und Bearbeiten können allein über Tastaturbefehle ausgeführt werden; eine Mausinteraktion ist nicht erforderlich. Dies hilft beim Erstellen hochgradig barrierefreier Anwendungen mit dieser Komponente.
Bildschirmlesegerät (Screenreader)
Die Ansicht des JavaScript Rich Text Editor bietet vollständige WAI-ARIA Barrierefreiheitsunterstützung. Die Benutzeroberfläche enthält kontrastreiche visuelle Elemente, die sehbehinderten Menschen helfen, das beste Seherlebnis zu haben. Zudem sind gültige UI-Beschreibungen über assistierende Technologien wie Bildschirmlesegeräte leicht zugänglich.
Rechts nach Links (RTL)
Der HTML5/JavaScript Rich Text Editor unterstützt die Rechts-nach-links-Darstellung, sodass der Text und das Layout des Texteditors von rechts nach links angezeigt werden können. Dies verbessert die Benutzererfahrung und Barrierefreiheit für Benutzer von RTL-Sprachen wie Arabisch, Persisch und Hebräisch.
Andere unterstützte Frameworks
Der Rich Text Editor ist auch für die Frameworks Blazor, React, Angular und Vue verfügbar. Entdecken Sie die plattformspezifischen Optionen über die folgenden Links:
Unterstützte Browser
Der JavaScript Rich Text Editor funktioniert gut mit allen modernen Webbrowsern, einschließlich Chrome, Firefox, Edge, Safari und Opera.
Sie sind nicht sicher, wie Sie Ihren ersten JavaScript Rich Text Editor erstellen? Unsere Dokumentation kann helfen.
Ich möchte es jetzt lesenÜber 145+ JavaScript UI-Steuerelemente
ALLE STEUERUNGEN
SMARTE KOMPONENTEN
RASTER
DROPDOWN-MENÜS
EINGABEN
DATENVISUALISIERUNG
NAVIGATION
SCHALTFLÄCHEN
INTERAKTIVER CHAT
BENACHRICHTIGUNG
FORMULARE
Häufig gestellte Fragen
Warum sollten Sie sich für den Syncfusion JavaScript Rich Text Editor entscheiden?
Mit dem Syncfusion Rich Text Editor können Sie:
WYSIWYG HTML- und Markdown Inhalte mit einer umfangreichen Auswahl an Werkzeugen für moderne Web- und Mobilanwendungen bearbeiten.
Den Editor einfach in Blog-Editoren, Nachrichten, HTML-E-Mail-Composer und diskussionsforumähnliche Anwendungen integrieren.
Eine schwebende Symbolleiste oder einen Inline-Editor erstellen, der es Ihnen ermöglicht, jedes editierbare Element auf der Seite auszuwählen und an Ort und Stelle zu bearbeiten.
Von einer einfachen Konfiguration und API profitieren.
- Problemlos in allen modernen Browsern rendern.
- Eine touch-freundliche und reaktionsschnelle Benutzeroberfläche nutzen.
Umfangreiche Lernressourcen wie Demos und Dokumentation nutzen, um schnell mit dem Steuerelement zu starten.
Wie hoch ist der Preis für den Syncfusion JavaScript Rich Text Editor?
Wir verkaufen den JavaScript Rich Text Editor nicht separat. Er ist nur als Teil der Essential Studio Komponentensuite erhältlich. Diese enthält über 1,600 Komponenten und Frameworks, einschließlich des JavaScript Rich Text Editor. Das Paket umfasst Support und Updates bis zum Ablauf des Abonnements. Zudem bieten wir möglicherweise Rabatte basierend auf aktuell aktiven Werbeaktionen an. Bitte kontaktieren Sie unsere Produktspezialisten für ein individuelles Angebot und um zusätzliche Rabatte zu prüfen.
Wo finde ich die Syncfusion JavaScript Rich Text Editor Demo?
Kann ich die Syncfusion JavaScript Rich Text Editor Komponente separat erwerben?
Nein, unsere über 1,600 Komponenten und Frameworks für Web, Mobilgeräte und Desktop, einschließlich unseres JavaScript Rich Text Editor, werden nicht einzeln verkauft. Wir haben das Produkt jedoch wettbewerbsfähig bepreist, sodass es nur ein wenig mehr kostet als das, was einige andere Anbieter allein für ihre JavaScript Rich Text Editor Komponente verlangen. Wir haben zudem die Erfahrung gemacht, dass unsere Kunden normalerweise mit einem unserer Produkte beginnen und dann schnell auf mehrere Produkte erweitern. Daher hielten wir es für das Beste, alle über 1,600 Komponenten und Frameworks gegen eine Abonnementgebühr anzubieten. Zusätzlich können wir möglicherweise Rabatte basierend auf aktuell aktiven Werbeaktionen gewähren. Bitte kontaktieren Sie unsere Produktspezialisten, um zu sehen, ob Sie für zusätzliche Rabatte infrage kommen.
Kann ich den Syncfusion JavaScript Rich Text Editor kostenlos herunterladen und nutzen?
Nein, dies ist ein kommerzielles Produkt und erfordert eine kostenpflichtige Lizenz. Es ist jedoch auch eine kostenlose Community-Lizenz für Unternehmen und Einzelpersonen verfügbar, deren Organisationen weniger als 1 Million USD Jahresumsatz, 5 oder weniger Entwickler und insgesamt 10 oder weniger Mitarbeiter haben.
Wie beginne ich mit dem Syncfusion JavaScript Rich Text Editor?
Ein guter Ausgangspunkt ist 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.
Schöne Komponentensuite
Ein sehr vollständiger Satz von Komponenten, der gegenüber anderen großen Anbietern, die Komponenten anbieten, einen Vorteil hat. Viel weniger Code erforderlich für die Nutzung und Codebeispiele für komplexere Komponenten. Lässt sich gut mit anderen Drittanbieter-Komponenten integrieren.
John A.
C# Entwickler (Auftragnehmer)
Perfekt für jeden Entwickler
Syncfusion Essential Studio verfügt über exzellente Funktionen, die ständig oder regelmäßig hinzugefügt oder aktualisiert werden. Der Support ist außergewöhnlich — schnelle und professionelle Antworten. Das Support-Team versorgt einen mit Codebeispielen. Was Fehler betrifft, versuchen sie immer, den Fix in die nächste Veröffentlichung aufzunehmen.
Dejan D.
Geschäftsführer
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
Ressourcen zum Syncfusion JavaScript Rich Text Editor
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.
