Angular Rich Text Editor - Ein WYSIWYG Markdown Editor
- Bearbeiten Sie WYSIWYG HTML mit umfangreichen Tools für Web- und mobile Apps.
- Lässt sich problemlos in Blog-, Nachrichten-, E-Mail- und Diskussionsforum-Apps integrieren.
- Passen Sie Stile mit einer Schnell-Toolbar an.
Trusted by the world’s leading companies
Überblick
Der Angular Rich Text Editor ist ein funktionsreicher WYSIWYG HTML- und Markdown-Editor. Er wird häufig zum Erstellen von Blogs, Forenbeiträgen, Notizbereichen, Support-Tickets (Vorfällen), Kommentarbereichen, Messaging-Anwendungen und vielem mehr verwendet. Das Steuerelement bietet eine effiziente Benutzeroberfläche für eine bessere Bearbeitungserfahrung mit mobiler Unterstützung. Es verfügt über eine Vielzahl von Tools zum Bearbeiten und Formatieren von Rich Content und gibt gültigen HTML-Code oder Markdown (MD)-Inhalt zurück. Es ermöglicht Benutzern auch das Einfügen von Bildern, Links, Tabellen und Listen mit modularer Architektur.
Warum sollten Sie Syncfusion Essential Studio® Angular Rich Text Editor wählen?
WYSIWYG-Editor
Die Angular 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
Sie können den Text und die Absätze einfach formatieren, indem Sie die Vordergrund- und Hintergrundfarben des Editors, den Schriftart, die Kursivierung, das Hinzufügen von geordneten und ungeordneten benutzerdefinierten Listen, Unterstreichungen, Durchstreichungen und Fettschrift festlegen.
Flexible Bearbeitung
Für ein besseres Bearbeitungserlebnis bietet die Angular Rich Text Editor-Komponente eine Vielzahl von Tools und Optionen. So können Sie schnell Bilder, Videos, Hyperlinks und Tabellen einfügen; Tabellenzellen zusammenführen; und Tasten konfigurieren.
HTML-Code Vorschau
Untersuchen und bearbeiten Sie den HTML-Code direkt im Quellcode und sehen Sie sich das Vorschaueergebnis an (HTML Live Editor).
Toolbar mit umfangreichen Tools
Der WYSIWYG Rich Text Editor für Angular bietet eine Vielzahl von Toolbar-Optionen, die vollständig anpassbar sind. Die Optionen ermöglichen mehrzeilige, erweiterbare, schnelle und schwebende Toolbars. Die Tool-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, Touchscreens und Smartphones. Er funktioniert auf allen Mobiltelefonen mit iOS, Android oder Windows OS.
Integration mit Drittanbieter-Bibliotheken
Einfache Integration von Drittanbieter-Bibliotheken wie Rechtschreibprüfung, Code-Mirror usw. mit dem Rich Text Editor, um den Inhalt im Angular HTML Texteditor zu verbessern.
Globalisierung und Lokalisierung
Ermöglicht Nutzern vieler Regionen die Nutzung des Rich Text Editors durch Formatierung von Daten, Währung und Nummerierung, um Präferenzen zu entsprechen.
KI-bereiter Rich Text Editor für intelligentere Produktivität
Schreiben Sie intelligenter mit dem KI-bereiten Angular Rich Text Editor. Korrigieren Sie sofort die Grammatik, schreiben Sie Inhalte um, übersetzen Sie in andere Sprachen und erstellen Sie Zusammenfassungen, ohne den Editor zu verlassen.
Angular Rich Text Editor Codebeispiel
Beginnen Sie ganz einfach mit dem Angular Rich Text Editor, indem Sie ein paar einfache Zeilen HTML- und TS-Code wie unten gezeigt verwenden. Erkunden Sie auch das Angular Rich Text Editor Beispiel, das zeigt, wie der Rich Text Editor in Angular gerendert und konfiguriert wird.
<div class="control-section">
<ejs-richtexteditor id='defaultRTE' [(value)]="rteValue">
</ejs-richtexteditor>
</div>import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
providers: [ToolbarService, LinkService, ImageService, HtmlEditorService]
})
export class AppComponent {
private rteValue: string = `<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 the 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>`;
}HTML-Editor-Toolbar
Die Angular WYSIWYG Texteditor-Toolbar bietet eine Vielzahl von Befehlen zum Bearbeiten und Formatieren des Inhalts. Verwenden Sie die Toolbar, um Text und Absätze zu formatieren; Bilder, Hyperlinks, Tabellen, Listen usw. einzufügen. Die Werkzeugbefehle sind nach verwandten Funktionen gruppiert.
Mehrzeilige Toolbar
Die überlaufenden Toolbar-Befehle werden in den folgenden Zeilen innerhalb der Toolbar umbrochen.
Toolbar erweitern
Die überlaufenden Toolbar-Befehle, die in der nächsten Zeile verborgen sind, werden sichtbar, wenn die Toolbar über das Erweiterungssymbol erweitert wird.
Schnell-Toolbar
Diese Toolbar enthält häufig verwendete Befehle zu Text, Bildern, Tabellen und Links. Sie hilft, Elemente (Text, Bild, Tabellen, Links) schnell aufzurufen und zu formatieren, und diese auch anzupassen.
Schwebende Toolbar
Die Angular WYSIWYG HTML-Editor-Toolbar bleibt nicht am oberen Rand des Editors haften, sondern schwebt beim Scrollen der aktuellen Seite innerhalb des Editorbereichs.
Vollständig anpassbar
Die Toolbar-Schaltflächen der Angular 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 Toolbar basierend auf Anwendungsanforderungen zu gestalten, z. B. für einen HTML-Blog-Editor oder HTML-E-Mail-Composer.
Benutzerdefiniertes Tool
Fügen Sie der Toolbar zusammen mit den integrierten Befehlen eigene Befehle (Tools) mit Aktionen hinzu.
Inline-Modus
Der Angular 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 Angular Rich Text Editor können Benutzer oder Gruppen markiert oder aus der Vorschlagsliste ausgewählt werden.
Bearbeitungserfahrung
Die Angular Rich Text Editor-Komponente bietet eine breite Palette von Tools und Optionen für eine bessere Bearbeitungserfahrung.
Bilder einfügen
Fügen Sie Bilder aus einem lokalen 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 im BLOB- oder Base64-Format.
Hyperlinks einfügen
Fügen Sie Hyperlinks ein oder ändern Sie diese mit Anpassungsoptionen wie Anzeigetext, Tooltip und Link, der in einem neuen Fenster geöffnet werden soll.
Tabellen einfügen
Fügen Sie HTML-Tabellen ein und bearbeiten Sie diese, um gitterartige Tabellendaten im WYSIWYG Rich Text Editor anzuzeigen. Bearbeiten Sie die Tabelle und ihre Elemente dynamisch (Zeilen und Spalten einfügen/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- und Spaltenzellen mit deren Inhalten zu einer einzelnen Zelle zusammen. Eine einzelne Zelle kann auch horizontal und vertikal geteilt werden.
Textausrichtung
Die integrierten Einstellungen sind verfügbar, um Ihren Inhalt links, mittig, rechts auszurichten oder im Blocksatz zu formatieren.
Enter- und Shift+Enter-Tastenkonfiguration
Der Rich Text Editor ermöglicht die Anpassung des Tags, das beim Drücken der Enter-Taste und der Shift+Enter-Tasten eingefügt wird. Folgende 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.
- Wörter oder Buchstaben fett, kursiv, unterstrichen, durchgestrichen oder großschreiben.
- Passen Sie den Absatzeinzug und den Zeilenabstand an.
- Wählen Sie Schriftarten und deren Größenwert.
- Verwenden Sie Tief- und Hochstellungen.
- Wählen Sie die Schriftfarbe und die Hintergrundfarbe für den Inhalt.
Benutzerdefinierte Listen hinzufügen
Erstellen Sie geordnete (nummerierte) oder ungeordnete (aufgepunktete) Listen, um den Inhalt im Angular Rich Text Editor zu organisieren. Es bietet Unterstützung zum Ändern des Aufzählungszeichens für ungeordnete Listen in Kreise oder Quadrate. Es unterstützt auch verschiedene Nummerierungsformate für geordnete Listen wie Kleinbuchstaben Griechisch oder Großbuchstaben Römisch.
Vollbild-Texteditor
Die integrierte Option macht den WYSIWYG HTML-Editor bildschirmfüllend (Full-Page-Editor) zur Bearbeitung des Inhalts.
Aus Microsoft Word und Excel einfügen
Der Angular Rich Text Editor bietet integrierte Optionen zum Einfügen von Inhalten mit Bildern aus Microsoft Word, Microsoft Outlook und Microsoft Excel in den Editor, indem Tags, Attribute und Stile herausgefiltert werden. Zusätzlich gibt es Optionen, um zu wählen, ob der Inhalt als reiner Text, bereinigte Stile oder Quellformatierungsstile eingefügt werden soll.
Automatische Verlinkung von URLs
Der Angular Rich Text Editor ist so konfiguriert, dass er Text automatisch in einen Hyperlink umwandelt, wenn eine URL als reiner Text eingegeben wird.
Angular Formularvalidierungen
Der Angular Rich Text Editor unterstützt nahtlos Angular Template-Driven Forms und Reactive Forms. Die beiden Arten der Validierung sind:
- Erforderliche Validierung
- Maximale Längenvalidierung
Inhaltslänge begrenzen
Diese Funktion ermöglicht es dem Benutzer, die Anzahl der Zeichen in einem bestimmten Abschnitt zu begrenzen.
Größenveränderbarer Editor
Der Angular Rich Text Editor kann in der Größe verändert werden, sodass Benutzer den Inhaltsbereich erweitern oder verkleinern können.
Bild über den Dateimanager einfügen
Der integrierte Dateimanager im Rich Text Editor fügt Bilder von Cloud-Speichern oder einem Server ein und lädt sie hoch.
Zusätzliche Funktionen
Ausschneiden, Kopieren und Einfügen
Der Angular WYSIWYG-Texteditor ermöglicht es Benutzern in der Regel, Zwischenablage-Operationen (Ausschneiden, Kopieren und Einfügen) zu verwenden.
Rückgängig/Wiederherstellen-Manager
Der Angular Rich Text Editor verwaltet den Verlauf der Aktionen zum Rückgängigmachen/Wiederherstellen, um Bearbeitungsaktionen zu speichern und auch die Rückgängig-Schritte anzupassen.
Texteditor-Inhalt drucken
Drucken Sie den Inhalt des WYSIWYG Rich Text Editors entweder über die Druckoption in der Toolbar oder programmgesteuert mit angewendetem Formatstil.
Berührungsfreundlicher und responsiver WYSIWYG-Editor
Der Angular Rich Text Editor (mobiler HTML-Editor) erkennt Touch-Gesten, wodurch der Benutzer die Toolbar durch Wischen nach links oder rechts verschieben kann. Das reaktionsschnelle, mobilfreundliche Design bietet die beste Benutzererfahrung auf allen Mobiltelefonen, Tablets und Desktop-Formfaktoren.
Integrierte und anpassbare Designs
Der Angular Rich Text Editor wird mit mehreren integrierten Designs wie Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent und Hochkontrast geliefert.
Entwicklerfreundliche APIs
Es stehen ausreichend clientseitige APIs zur Verfügung, um die Inhaltsbearbeitung zu optimieren.
HTML-Editor Barrierefreiheit
Tastaturnavigation
Die Angular Rich Text Editor-Komponente 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; es ist keine Mausinteraktion erforderlich. Dies hilft beim Erstellen hochgradig zugänglicher Anwendungen mit dieser Komponente.
Bildschirmleser
Die Angular Rich Text Editor-Ansicht verfügt über vollständige WAI-ARIA-Barrierefreiheitsunterstützung. Die Benutzeroberfläche des Rich Text Editors 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 Bildschirmleser leicht zugänglich.
Rechts-nach-Links (RTL)
Der Angular Rich Text Editor unterstützt die Rechts-nach-Links-Darstellung, sodass die Textrichtung und das Layout des Texteditors von rechts nach links angezeigt werden können. Dies verbessert die Benutzererfahrung und Zugänglichkeit für RTL-Sprachen wie Arabisch, Farsi, Hebräisch usw.
Angular Versionskompatibilität
Mit der kontinuierlichen Verbesserung der Angular-Versionen wird der Angular Rich Text Editor stets auf dem neuesten Stand gehalten, um die Kompatibilität mit Versionen ab 4 bis zur neuesten Version zu gewährleisten.
Andere unterstützte Frameworks
Der Rich Text Editor ist auch für die Frameworks Blazor, React, JavaScript und Vue verfügbar. Weitere plattformspezifische Optionen finden Sie unter den folgenden Links:
Unterstützte Browser
Der Angular Rich Text Editor funktioniert gut mit allen modernen Webbrowsern, einschließlich Chrome, Firefox, Edge, Safari und Opera.
Sie sind sich nicht sicher, wie Sie Ihren ersten Angular Rich Text Editor erstellen sollen? Unsere Tutorial-Videos und Dokumentation können Ihnen helfen.
Ich möchte es jetzt ansehen Ich möchte es jetzt lesen145+ Angular-UI-Komponenten
ALLE KOMPONENTEN
INTELLIGENTE KOMPONENTEN
GITTER
DATENVISUALISIERUNG
Dropdown-Menüs
DATEI-ANSICHTEN & BEARBEITER
TASTEN
INTERAKTIVER CHAT
EINGABEN
NAVIGATION
Formulare
BENACHRICHTIGUNG
Häufig gestellte Fragen
Warum sollten Sie sich für Syncfusion Essential Studio® Angular Rich Text Editor entscheiden?
Der Syncfusion Angular WYSIWYG Texteditor bietet die folgenden Funktionen:
Bearbeiten Sie WYSIWYG HTML- und Markdown-Inhalte mit einem umfangreichen Satz von Tools für moderne Web- und Mobilanwendungen.
Einfacher Einbau in Blog-Editoren, Nachrichten, HTML-E-Mail-Composer und Diskussionsforum-ähnliche Anwendungen.
Erstellen Sie eine schwebende Toolbar oder einen Inline-Editor, der es Ihnen ermöglicht, jedes bearbeitbare Element auf der Seite auszuwählen und direkt zu bearbeiten.
- Einer der besten Angular Rich Text Editoren auf dem Markt, der eine funktionsreiche Benutzeroberfläche zur Interaktion mit der Software bietet.
- Einfache Konfiguration und API.
- Unterstützt alle modernen Browser.
- Mobilfreundlich und responsiv.
Umfangreiche Lernressourcen wie Demos und Dokumentation, um schnell zu lernen und mit dem Angular Rich Text Editor zu beginnen.
Wie hoch ist der Preis für den Syncfusion Angular Rich Text Editor?
Wir verkaufen den Angular Rich Text Editor nicht separat. Er ist nur als Teil der Syncfusion Teamlizenz erhältlich. Diese enthält über 1,600 Komponenten und Frameworks, einschließlich des Angular Rich Text Editors. Der Preis der Teamlizenz beginnt bei 395 $ pro Monat für 5 Entwickler und beinhaltet Support und Updates bis zum Ablauf des Abonnements. Darüber hinaus können wir möglicherweise Rabatte basierend auf aktuell aktiven Aktionen anbieten. Bitte kontaktieren Sie noch heute unsere Produktspezialisten, um zu erfahren, ob Sie Anspruch auf zusätzliche Rabatte haben.
Wo finde ich eine Demo des Syncfusion Angular Rich Text Editors?
Sie finden unsere Angular Rich Text Editor Demo, die zeigt, wie Sie den Rich Text Editor rendern und konfigurieren.
Kann ich die Syncfusion Angular Rich Text Editor Komponente separat erwerben?
Nein, unsere über 1,600 Komponenten und Frameworks für Web, Mobile und Desktop, einschließlich unseres Angular Rich Text Editors, werden nicht einzeln verkauft. Sie sind nur als Teil einer Teamlizenz erhältlich. Wir haben das Produkt jedoch preislich so gestaltet, dass es nur geringfügig mehr kostet als das, was andere Anbieter für ihre Rich Text Editor Komponente allein verlangen. Wir haben auch die Erfahrung gemacht, dass unsere Kunden in der Regel mit einem unserer Produkte beginnen und dann schnell auf mehrere Produkte erweitern. Daher hielten wir es für am besten, alle 1,600 Komponenten und Frameworks zu einem Abonnementpreis anzubieten, der bei 395 $ pro Monat für ein Team von 5 Entwicklern beginnt. Zusätzlich können wir möglicherweise Rabatte basierend auf aktuell aktiven Aktionen anbieten. Bitte kontaktieren Sie noch heute unsere Produktspezialisten, um zu erfahren, ob Sie Anspruch auf zusätzliche Rabatte haben.
Kann ich den Syncfusion Angular Rich Text Editor kostenlos herunterladen und nutzen?
Nein, es handelt sich um ein kommerzielles Produkt, das eine kostenpflichtige Lizenz erfordert. Eine kostenlose Community-Lizenz ist jedoch für Unternehmen und Einzelpersonen erhältlich, deren Organisationen weniger als 1 Million US-Dollar Jahresbruttoeinnahmen haben und über fünf oder weniger Entwickler verfügen.
Wie fange ich mit dem Syncfusion Angular Rich Text Editor an?
Ein guter Ausgangspunkt wäre unsere umfassende Einstiegsdokumentation.
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.
Document Editor For Angular
Great features, amazing package for start-ups / small businesses with the free license plan, excellent support. We use document editor component for angular. We also like the documentation.
Călin C,
Technology Consultant
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 Angular 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.
Aktuelle Aktivitäten in Angular Rich Text Editor Tutorials und Blogs
Die Angular Rich Text Editor Tutorial-Videos und Blog-Beiträge helfen Ihnen beim Erstellen Ihrer ersten App mit diesen Angular-Komponenten. Sie bieten Problemlösungsstrategien, beschreiben Funktionen und Features, kündigen neue Funktionsveröffentlichungen an, erklären Best Practices und zeigen Beispielszenarien auf. Entdecken Sie unsere neuesten Beiträge in unserem Blog und auf den Tutorial-Video-Kanälen für Updates zum Angular Rich Text Editor.
