Angular Rich Text Editor - Un éditeur Markdown WYSIWYG
- Modifiez du HTML WYSIWYG avec des outils riches pour les applications web et mobiles.
- S’intègre facilement dans les applications de blog, de messages, d’e-mail et de forums de discussion.
- Personnalisez les styles à l’aide d’une barre d’outils rapide.
Trusted by the world’s leading companies
Aperçu
Rich Text Editor Angular est un éditeur HTML et Markdown de type WYSIWYG, riche en fonctionnalités. Il est largement utilisé pour créer des blogs, des publications de forum, des sections de notes, des tickets de support (incidents), des sections de commentaires, des applications de messagerie, et bien plus encore. Le contrôle offre une interface utilisateur efficace pour une meilleure expérience d’édition avec un support mobile. Il dispose d’une variété d’outils pour éditer et formater du contenu riche et renvoyer un balisage HTML ou un contenu Markdown (MD) valide, et permet également aux utilisateurs d’insérer des images, des liens, des tableaux et des listes avec une architecture modulaire.
Pourquoi choisir Rich Text Editor Angular Syncfusion Essential Studio® ?
Éditeur WYSIWYG
Le composant Rich Text Editor Angular peut être utilisé comme éditeur HTML WYSIWYG ou éditeur Markdown, et il prend également en charge l’édition Iframe avec des caractéristiques Iframe configurables.
Interaction facile
Vous pouvez facilement formater le texte et les paragraphes en définissant les couleurs de premier plan et d’arrière-plan de l’éditeur, le type de police, l’italique, l’ajout de listes personnalisées ordonnées et non ordonnées, le soulignement, le barré et le gras.
Édition flexible
Pour une meilleure expérience d’édition, le composant Rich Text Editor Angular offre une variété d’outils et de choix. Ainsi, vous pouvez rapidement insérer des images, des vidéos, des hyperliens et des tableaux ; fusionner des cellules de tableau ; et configurer des touches.
Prévisualiser le code HTML
Examinez et modifiez le code HTML directement dans le code source et visualisez le résultat de la prévisualisation (éditeur HTML en direct).
Barre d’outils avec un riche ensemble d’outils
Rich Text Editor WYSIWYG pour Angular offre une variété d’options de barre d’outils entièrement personnalisables. Les options permettent des barres d’outils multi-lignes, extensibles, rapides et flottantes. Les commandes d’outils sont regroupées en fonction de fonctionnalités connexes.
S’adapte à toute résolution
Rich Text Editor a une mise en page très réactive et un design optimisé pour les ordinateurs de bureau, les écrans tactiles et les smartphones. Il fonctionne bien sur tous les téléphones mobiles utilisant iOS, Android ou Windows OS.
Intégrer avec des bibliothèques tierces
Facile à intégrer des bibliothèques tierces comme le correcteur orthographique, le miroir de code, etc., avec Rich Text Editor pour améliorer le contenu de l’éditeur de texte HTML Angular.
Mondialisation et localisation
Permet aux utilisateurs de différentes localisations d’utiliser Rich Text Editor en formatant les dates, la devise et la numérotation selon leurs préférences.
Rich Text Editor compatible avec l’IA pour une productivité plus intelligente
Écrivez plus intelligemment avec Rich Text Editor Angular compatible avec l’IA. Corrigez instantanément la grammaire, réécrivez le contenu, traduisez dans différentes langues et générez des résumés sans quitter l’éditeur.
Exemple de code d’Rich Text Editor Angular
Commencez facilement avec Rich Text Editor Angular en utilisant quelques lignes simples de HTML et un exemple de code TS comme démontré ci-dessous. Explorez également l’exemple d’Rich Text Editor Angular qui montre comment rendre et configurer Rich Text Editor dans Angular.
<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>`;
}Barre d’outils de l’éditeur HTML
La barre d’outils de l’éditeur de texte WYSIWYG Angular offre une variété de commandes pour éditer et formater le contenu. Utilisez la barre d’outils pour formater le texte et les paragraphes ; insérer des images, des hyperliens, des tableaux, des listes, etc. Les commandes d’outils sont regroupées en fonction de fonctionnalités connexes.
Barre d’outils multi-lignes
Les commandes de la barre d’outils qui débordent sont regroupées sur les lignes suivantes de la barre d’outils.
Barre d’outils extensible
Les commandes de la barre d’outils de débordement cachées sur la ligne suivante deviennent visibles lorsque la barre d’outils est étendue à l’aide de l’icône d’extension.
Barre d’outils rapide
Cette barre d’outils contient des commandes fréquemment utilisées liées au texte, à l’image, aux tableaux et aux liens. Elle permet d’accéder et de formater les éléments (texte, image, tableaux, liens) rapidement, et de les personnaliser.
Barre d’outils flottante
La barre d’outils de l’éditeur HTML WYSIWYG Angular ne reste pas collée en haut de l’éditeur, mais flotte dans la zone de l’éditeur lorsque vous faites défiler la page actuelle.
Entièrement personnalisable
Les boutons de la barre d’outils du composant Rich Text Editor Angular sont entièrement personnalisables. Ajoutez ou supprimez des boutons et regroupez des commandes par catégorie. Cela aide les utilisateurs à concevoir la barre d’outils en fonction des besoins de l’application, comme pour un éditeur de blog HTML ou un compositeur d’e-mails HTML.
Outil personnalisé
Ajoutez vos propres commandes (outils) avec des actions à la barre d’outils en plus des commandes intégrées.
Mode inline
Rich Text Editor Angular affiche un éditeur HTML inline lorsque le contenu d’une zone éditable est cliqué ou sélectionné.
Mention et hashtag
Lors de la composition de contenu dans Rich Text Editor Angular, les utilisateurs ou groupes peuvent être tagués ou sélectionnés dans la liste de suggestions.
Expérience d’édition
Le composant Rich Text Editor Angular fournit un large éventail d’outils et d’options pour une meilleure expérience d’édition.
Insérer des images
Insérez des images dans le contenu à partir d’un chemin local ou d’un chemin de serveur avec des légendes d’image, puis liez des URL aux images. Téléchargez des images vers un serveur par glisser-déposer ou par téléchargement de fichier. De plus, l’éditeur offre des options pour insérer des images aux formats BLOB ou Base64.
Insérer des hyperliens
Insérez ou modifiez les hyperliens avec des options de personnalisation telles que le texte d’affichage, l’info-bulle et le lien à ouvrir dans une nouvelle fenêtre.
Insérer des tableaux
Insérez et modifiez des tableaux HTML pour afficher des données tabulaires de type grille dans Rich Text Editor WYSIWYG. Manipulez le tableau et ses éléments dynamiquement (insérer/supprimer des lignes et des colonnes, redimensionner tout le tableau ou les lignes ou les colonnes, et supprimer un tableau).
Fusion et division de cellules de tableau
Fusionnez deux cellules ou plus d’une ligne et d’une colonne en une seule cellule avec son contenu. De plus, une seule cellule peut être divisée horizontalement et verticalement.
Alignement du texte
Les paramètres intégrés sont disponibles pour aligner votre contenu à gauche, au centre, à droite ou le justifier.
Configuration de la touche Entrée et Maj+Entrée
Rich Text Editor permet de personnaliser la balise insérée en appuyant sur les touches Entrée et Maj+Entrée. Les balises suivantes peuvent être configurées :
- P : Lorsque ‘P’ est configuré, appuyer sur Entrée ou Maj+Entrée créera une balise ‘p’.
- DIV : Lorsque ‘DIV’ est configuré, appuyer sur Entrée ou Maj+Entrée créera une balise ‘div’.
- BR : Lorsque ‘BR’ est configuré, appuyer sur Entrée ou Maj+Entrée créera une balise ‘br’.
Formatage du texte
- Formatez le contenu sélectionné, des paragraphes entiers, ou des mots ou caractères spécifiques.
- Formatez les titres, les citations, le code, les paragraphes, etc.
- Mettez en gras, en italique, soulignez, barrez ou mettez en majuscule les lettres et les mots.
- Modifiez l’indentation et l’espacement des paragraphes.
- Sélectionnez les polices et leur taille.
- Utilisez des indices et des exposants.
- Sélectionnez la couleur de police et la couleur d’arrière-plan du contenu.
Ajout de listes personnalisées
Créez des listes ordonnées (numérotées) ou non ordonnées (à puces) pour organiser le contenu dans Rich Text Editor Angular. Il prend en charge la modification de l’apparence des puces pour les listes non ordonnées en cercles ou en carrés. Il prend également en charge différents formats de numérotation pour les listes ordonnées tels que le grec minuscule ou le romain majuscule.
Éditeur de texte plein écran
L’option intégrée permet à l’éditeur HTML WYSIWYG de prendre la taille plein écran (éditeur de page entière) pour l’édition du contenu.
Coller depuis Microsoft Word et Excel
Rich Text Editor Angular offre des options intégrées pour coller du contenu avec des images vers l’éditeur depuis Microsoft Word, Microsoft Outlook et Microsoft Excel en filtrant les balises, les attributs et les styles. De plus, il existe des options pour choisir si le contenu doit être collé en tant que texte brut, styles nettoyés ou styles de formatage source.
Hyperlien automatique d’URL
Rich Text Editor Angular est configuré pour transformer automatiquement le texte en hyperlien lorsqu’une URL est tapée en texte brut.
Validations de formulaires Angular
Rich Text Editor Angular prend en charge de manière transparente les formulaires basés sur des modèles Angular et les formulaires réactifs. Les deux types de validation sont :
- Validation requise
- Validation de longueur maximale
Limiter la longueur du contenu
Cette fonctionnalité permet à l’utilisateur de restreindre le nombre de caractères dans une section particulière.
Éditeur redimensionnable
Rich Text Editor Angular peut être redimensionné, de sorte que les utilisateurs peuvent agrandir ou réduire la zone de contenu.
Insérer une image via le gestionnaire de fichiers
Le gestionnaire de fichiers intégré de Rich Text Editor insère et télécharge des images depuis le stockage cloud ou un serveur.
Fonctionnalités supplémentaires
Couper, copier et coller
L’éditeur de texte WYSIWYG Angular permet généralement aux utilisateurs d’utiliser les opérations de presse-papiers (couper, copier et coller).
Gestionnaire d’annulation et de rétablissement
Rich Text Editor Angular gère l’historique des actions annuler/rétablir pour stocker les actions d’édition, et également pour personnaliser les étapes d’annulation.
Imprimer le contenu de l’éditeur de texte
Imprimez le contenu de Rich Text Editor WYSIWYG soit en utilisant l’option d’impression de la barre d’outils, soit par programme avec un style de format appliqué.
Éditeur WYSIWYG tactile et réactif
Rich Text Editor Angular (éditeur HTML mobile) reconnaît les gestes tactiles, permettant à l’utilisateur de glisser à gauche ou à droite pour déplacer la barre d’outils. La conception réactive et adaptée aux mobiles offre la meilleure expérience utilisateur sur tous les téléphones mobiles, tablettes et formats de bureau.
Thèmes intégrés et personnalisables
Rich Text Editor Angular est livré avec plusieurs thèmes intégrés tels que Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent et contraste élevé.
API conviviales pour les développeurs
Des API côté client suffisantes sont disponibles pour optimiser l’édition de contenu.
Accessibilité de l’éditeur HTML
Navigation au clavier
Le composant Rich Text Editor Angular garantit que chaque cellule est accessible à l’aide du clavier. Les principales fonctionnalités comme le tri, la sélection et l’édition peuvent être effectuées uniquement à l’aide de commandes clavier ; aucune interaction à la souris n’est requise. Cela aide à créer des applications hautement accessibles à l’aide de ce composant.
Lecteur d’écran
La vue de Rich Text Editor Angular a un support complet d’accessibilité WAI-ARIA. L’interface utilisateur de Rich Text Editor comprend des éléments visuels à contraste élevé qui aident les personnes malvoyantes à avoir la meilleure expérience visuelle. De plus, les descriptions d’interface utilisateur valides sont facilement accessibles grâce à des technologies d’assistance telles que les lecteurs d’écran.
Droite à gauche (RTL)
Rich Text Editor Angular prend en charge le rendu de droite à gauche, permettant d’afficher la direction du texte et la mise en page de l’éditeur de texte de droite à gauche. Cela améliore l’expérience utilisateur et l’accessibilité pour les langues RTL telles que l’arabe, le farsi, l’hébreu, etc.
Compatibilité des versions Angular
Grâce à l’amélioration continue des versions d’Angular, Rich Text Editor Angular est maintenu à jour pour être compatible avec les versions à partir de la version 4 jusqu’à la dernière.
Autres frameworks pris en charge
Rich Text Editor est disponible pour les frameworks Blazor, React, JavaScript et Vue. Explorez ses options spécifiques à la plateforme via les liens suivants :
Navigateurs pris en charge
Rich Text Editor Angular fonctionne bien avec tous les navigateurs web modernes, y compris Chrome, Firefox, Edge, Safari et Opera.
Vous ne savez pas comment créer votre premier Rich Text Editor Angular ? Nos vidéos tutoriels et notre documentation peuvent vous aider.
J’aimerais le regarder maintenant J’aimerais le lire maintenantPlus de 145+ composants d'interface utilisateur Angular
TOUS LES COMPOSANTS
Composants intelligents
Grilles
Visualisation des données
Listes déroulantes
Visionneuses et éditeurs de fichiers
Boutons
Chat interactif
Champs de saisie
Navigation
Formulaires
Notifications
Foire aux questions
Pourquoi devriez-vous choisir Rich Text Editor Angular Syncfusion Essential Studio® ?
L’éditeur de texte WYSIWYG Angular de Syncfusion offre les fonctionnalités suivantes :
Modifiez du contenu HTML et Markdown WYSIWYG avec un riche ensemble d’outils pour les applications web et mobiles modernes.
S’intègre facilement dans les éditeurs de blog, les messages, les composeurs d’e-mails HTML et les applications de type forum de discussion.
Créez une barre d’outils flottante ou un éditeur inline qui vous permet de sélectionner tout élément éditable sur la page et de l’éditer sur place.
- L’un des meilleurs éditeurs de texte riche Angular sur le marché, offrant une interface utilisateur riche en fonctionnalités pour interagir avec le logiciel.
- Configuration et API simples.
- Prend en charge tous les navigateurs modernes.
- Mobile tactile et réactif.
De vastes ressources d’apprentissage telles que des démos et une documentation pour apprendre rapidement et commencer avec Rich Text Editor Angular.
Quel est le prix de Rich Text Editor Angular Syncfusion ?
Nous ne vendons pas Rich Text Editor Angular séparément. Il est uniquement disponible à l’achat dans le cadre de la licence d’équipe Syncfusion. Celle-ci contient plus de 1,600 composants et frameworks, y compris Rich Text Editor Angular. Le prix de la licence d’équipe commence à 395 $ par mois pour 5 développeurs, et comprend le support et les mises à jour jusqu’à l’expiration de l’abonnement. De plus, nous pourrions offrir des réductions basées sur les promotions actives. Veuillez contacter nos spécialistes produits dès aujourd’hui pour savoir si vous êtes éligible à des réductions supplémentaires.
Où puis-je trouver la démo de Rich Text Editor Angular de Syncfusion ?
Vous pouvez trouver notre démo de Rich Text Editor Angular, qui montre comment rendre et configurer Rich Text Editor.
Puis-je acheter le composant Rich Text Editor Angular Syncfusion séparément ?
Non, nos 1,600+ composants et frameworks pour le web, le mobile et le bureau, y compris notre Rich Text Editor Angular, ne sont pas vendus individuellement. Ils sont uniquement disponibles dans le cadre d’une licence d’équipe. Cependant, nous avons fixé un prix compétitif pour le produit, de sorte qu’il ne coûte qu’un peu plus cher que ce que certains autres fournisseurs facturent pour leur seul composant Rich Text Editor. Nous avons également constaté, d’après notre expérience, que nos clients commencent généralement par utiliser l’un de nos produits, puis s’étendent rapidement à plusieurs produits, nous avons donc pensé qu’il était préférable d’offrir tous les 1,600+ composants et frameworks pour un abonnement qui commence à 395 $ par mois pour une équipe de 5 développeurs. De plus, nous pourrions être en mesure d’offrir des réductions basées sur les promotions actives. Veuillez contacter nos spécialistes produits dès aujourd’hui pour savoir si vous êtes éligible à des réductions supplémentaires.
Puis-je télécharger et utiliser gratuitement Rich Text Editor Angular de Syncfusion ?
Non, c’est un produit commercial et il nécessite une licence payante. Cependant, une licence communautaire gratuite est disponible pour les entreprises et les particuliers dont les organisations ont un revenu brut annuel inférieur à 1 million USD et cinq développeurs ou moins.
Comment démarrer avec Rich Text Editor Angular de Syncfusion ?
Un bon point de départ serait notre documentation complète de démarrage.
Nos clients nous aiment
Grâce à un excellent ensemble d’outils et à une excellente équipe d’assistance, Syncfusion® réduit le temps de développement de ses clients.Voici quelques-uns de leurs témoignages.
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
Voir de vraies histoires de réussite
Des développeurs du monde entier font confiance à Essential Studio de Syncfusion pour simplifier les projets complexes et accélérer leur livraison. Grâce à sa vaste bibliothèque de contrôles d’interface utilisateur, à ses SDK puissants et à son support fiable, Essential Studio aide les équipes à créer des applications prêtes pour l’entreprise en toute confiance.
Explorer des études de casIndustrie
Développement de logiciels
75% Réduction des coûts
50% Développement plus rapide
Industrie
Services publics (pétrole et gaz)
450+ heures économisées
Processus rationalisés et heures d’effort de développement économisées.
Fonctionnalités avancées et flexibles
Utilisateurs autonomisés grâce à une fonctionnalité robuste et polyvalente.
Industrie
Logiciel et technologie
1000+ heures économisées
Développement accéléré grâce à des composants d’interface utilisateur prêts pour l’entreprise.
Gestion de fichiers efficace
Flux de travail rationalisés grâce à des bibliothèques de documents, sans les construire à partir de zéro.
Industrie
Logiciel et technologie
2 ans de retard évité
Deux ans de retards évités grâce à une planification proactive.
Livraison à temps
Projets livrés dans les délais à l’aide de contrôles fiables.
Industrie
Services informatiques et conseil en TI
Performances améliorées
Grands ensembles de données gérés avec une personnalisation aisée et un débogage rapide.
Hautement personnalisable
Contrôles plug-and-play avec intégration rapide de modèles.
Industrie
Services professionnels
Accès instantané
Disponibilité rapide des fonctionnalités et des ressources.
Dépendances réduites
Moins de dépendances pour un développement plus rapide.
Evalue par des utilisateurs du monde entier.
Ressources de Rich Text Editor Angular Syncfusion
Kits d’interface utilisateur
Téléchargement Figma
Téléchargement Figma
Recompenses
L’excellence—c’est une chose de l’affirmer, mais cela signifie davantage lorsque les autres la reconnaissent. Syncfusion® est fier de détenir les récompenses de l'industrie suivantes.
Activités récentes dans les tutoriels et les blogs sur Rich Text Editor Angular
Les vidéos tutoriels et les articles de blog sur Rich Text Editor Angular vous guideront dans la création de votre première application avec ces composants Angular. Ils fournissent des stratégies de résolution de problèmes, décrivent les fonctionnalités, annoncent les nouvelles versions de fonctionnalités, expliquent les meilleures pratiques et présentent des scénarios d’exemple. Explorez nos dernières publications sur notre blog et nos chaînes de tutoriels vidéo pour les mises à jour de Rich Text Editor Angular.
