React Rich Text Editor - Un éditeur Markdown WYSIWYG
- Modifiez HTML et Markdown WYSIWYG avec des outils riches pour applications web et mobiles.
- Intégrez‑le facilement dans les éditeurs de blogs, messages, e‑mails HTML et applications de forum.
- Créez une barre d’outils flottante pour éditer tout élément sur place.
Quick Overview Video
Trusted by the world’s leading companies
Aperçu
L’éditeur de texte riche React est un éditeur HTML WYSIWYG et un éditeur Markdown WYSIWYG riche en fonctionnalités. L’éditeur de texte riche 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 valide ou du contenu Markdown (MD). Il permet aux utilisateurs d’insérer des images, des liens, des tableaux et des listes avec des architectures modulaires.
Pourquoi choisir l’éditeur de texte riche React de Syncfusion ?
Éditeur WYSIWYG
Le composant éditeur de texte riche React peut être utilisé comme éditeur HTML WYSIWYG ou comme é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 ; en ajoutant des listes personnalisées ordonnées et non ordonnées ; et en spécifiant la police, l’italique, le soulignement, le barré et le gras.
Édition flexible
Pour une meilleure expérience d’édition, le composant éditeur de texte riche React offre une variété d’outils et de choix. Ainsi, vous pouvez rapidement insérer des images, des vidéos, des liens hypertextes 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
L’éditeur de texte riche WYSIWYG pour React propose une variété d’options de barre d’outils entièrement personnalisables. Les options permettent des barres d’outils à plusieurs lignes, extensibles, rapides et flottantes. Les commandes des outils sont regroupées en fonction de fonctionnalités connexes.
S’adapte à toute résolution
L’éditeur de texte riche 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, CodeMirror, etc., avec l’éditeur de texte riche pour améliorer le contenu dans l’éditeur de texte HTML React.
Mondialisation et localisation
Permet aux utilisateurs de différentes régions d’utiliser l’éditeur de texte riche en formatant les dates, la devise et la numérotation pour s’adapter aux préférences.
Éditeur de texte riche prêt pour l’IA pour une écriture plus intelligente
Améliorez votre écriture grâce à l’éditeur de texte riche prêt pour l’IA. Corrigez la grammaire, reformulez le contenu, changez de langue et résumez le texte instantanément, le tout au sein de l’éditeur.
Exemple de code de l’éditeur de texte riche React
Démarrez facilement avec l’éditeur de texte riche React en utilisant quelques lignes de code TSX comme démontré ci-dessous. Explorez également l’exemple de l’éditeur de texte riche React qui montre comment rendre et configurer l’éditeur de texte riche dans React.
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>Le composant Rich Text Editor est un éditeur WYSIWYG ("what you see is what you get") qui offre la meilleure expérience utilisateur pour créer et mettre à jour le contenu.
Les utilisateurs peuvent formater leur contenu à l'aide de commandes de barre d'outils standard.</p>
<p><b>Fonctionnalités clés :</b></p>
<ul>
<li>
<p>Fournit les modes <IFRAME> et <DIV></p>
</li>
<li>
<p>Capable de gérer l'édition Markdown.</p>
</li>
</ul>
<Inject services={[Toolbar, HtmlEditor, Link, Image]} />
</RichTextEditorComponent>
);
}
}
export default App;Barre d’outils de l’éditeur HTML
La barre d’outils de l’éditeur de texte WYSIWYG React offre une variété de commandes pour éditer et formater le contenu. Formatez le texte, les paragraphes, insérez des images, des hyperliens, des tableaux, des listes, etc. Les commandes des outils sont regroupées en fonction de fonctionnalités connexes.
Barre d’outils à plusieurs rangées
Les commandes de la barre d’outils qui débordent sont regroupées dans les rangées suivantes de la barre d’outils.
Développer la barre d’outils
Les commandes de la barre d’outils de débordement cachées dans la ligne suivante deviennent visibles lorsque la barre d’outils est étendue à l’aide de l’icône d’expansion.
Barre d’outils rapide
Cette barre d’outils contient des commandes fréquemment utilisées liées au texte, aux images, aux tableaux et aux liens. Elle permet d’accéder et de formater rapidement les éléments et de les personnaliser.
Faire flotter la barre d’outils
La barre d’outils de l’éditeur HTML WYSIWYG ne reste pas en haut de l’éditeur, mais flotte dans la zone de l’éditeur lors du défilement de la page actuelle.
Entièrement personnalisable
La barre d’outils du composant éditeur de texte riche React est entièrement personnalisable avec ses boutons. Ajoutez ou supprimez des boutons et regroupez des commandes par catégorie. Cela permet de concevoir la barre d’outils en fonction des besoins de l’application, comme pour un éditeur de blog HTML ou un composeur d’e-mails HTML.
Outil personnalisé
Ajoutez vos propres commandes (outils) avec des actions à la barre d’outils ainsi que des commandes intégrées.
Mode en ligne
L’éditeur de texte riche React affiche un éditeur HTML en ligne lorsque le contenu d’une zone éditable est cliqué ou sélectionné.
Mention et hashtag
Lors de la composition de contenu dans l’éditeur de texte riche React, les utilisateurs ou les groupes peuvent être tagués ou sélectionnés dans la liste de suggestions.
Expérience d’édition
Le composant éditeur de texte riche React offre une large gamme 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 sur 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 des hyperliens avec des options de personnalisation telles que le texte d’affichage, les info-bulles et les liens à 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 l’éditeur de texte riche WYSIWYG. Manipulez le tableau et ses éléments de manière dynamique (insérez et supprimez des lignes et des colonnes, redimensionnez l’ensemble du tableau ou des lignes ou des colonnes, et supprimez un tableau).
Fusion et division de cellules de tableau
Fusionnez deux ou plusieurs cellules de ligne ou de colonne en une seule cellule avec leur contenu. De plus, une seule cellule peut être divisée horizontalement et verticalement.
Alignement du texte
Alignez votre contenu à gauche, au centre ou à droite, ou justifiez-le.
Configuration des touches Entrée et Maj+Entrée
L’éditeur de texte riche React 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 capitalisez 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 la 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 l’éditeur de texte riche React. 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 en plein écran
Permettre à l’éditeur de texte riche React d’être en plein écran (éditeur pleine page) pour l’édition de contenu.
Coller depuis Microsoft Word et Excel
Collez du contenu avec des images de Microsoft Word, Microsoft Outlook et Microsoft Excel dans l’éditeur en filtrant les balises, les attributs et les styles. De plus, il existe des options pour choisir si le contenu doit être collé en texte brut, avec des styles nettoyés ou avec des styles formatés à partir de la source.
Lien hypertexte automatique de l’URL
L’éditeur de texte riche React est configuré pour transformer automatiquement le texte en hyperlien lorsqu’une URL est saisie en texte brut.
Validations de formulaires React
L’éditeur de texte riche React prend en charge de manière transparente les formulaires et obtient les valeurs lors des actions de soumission de formulaire. Les deux types de validation sont :
- Validation obligatoire
- Validation de longueur maximale
Limiter la longueur du contenu
Restreindre le nombre maximal de caractères du contenu.
Éditeur redimensionnable
L’éditeur de texte riche React dispose d’un support de redimensionnement intégré qui permet d’élargir ou de réduire la zone de contenu.
Insérer une image via le gestionnaire de fichiers
Utilisez le gestionnaire de fichiers intégré pour insérer des images depuis le stockage cloud ou le serveur.
Pinceau de mise en forme
Utilisez le pinceau de mise en forme pour copier sans effort la mise en forme et l’appliquer à votre contenu, éliminant ainsi le besoin de reformater manuellement et vous faisant gagner un temps précieux. Accédez au pinceau de mise en forme via la barre d’outils ou des raccourcis clavier pratiques pour une application rapide et facile. Profitez du mode persistant en double-cliquant sur le bouton de la barre d’outils, ce qui vous permet d’appliquer les formats à plusieurs emplacements de manière transparente.
Couper, copier et coller
Utilisez les opérations du presse-papiers (couper, copier et coller).
Gestionnaire d’annulation et de rétablissement
L’éditeur de texte riche React gère l’historique des actions d’annulation/rétablissement 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 l’éditeur de texte riche WYSIWYG avec le style de formatage appliqué, soit en utilisant l’option d’impression de la barre d’outils, soit de manière programmatique.
Éditeur WYSIWYG tactile et réactif
L’éditeur de texte riche React (éditeur HTML mobile) reconnaît les gestes tactiles, permettant à l’utilisateur de balayer vers la gauche ou la 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 facteurs de forme mobiles, tablettes et ordinateurs de bureau.
Thèmes intégrés et personnalisables
L’éditeur de texte riche React 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 le processus d’édition de contenu.
Accessibilité de l’éditeur HTML
Navigation au clavier
Le composant éditeur de texte riche React 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 réalisées en utilisant uniquement des commandes clavier ; aucune interaction à la souris n’est requise. Cela permet de créer des applications très accessibles en utilisant ce composant.
Lecteur d’écran
La vue de l’éditeur de texte riche React dispose d’un support complet d’accessibilité WAI-ARIA. L’interface utilisateur de l’éditeur de texte riche 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 via des technologies d’assistance telles que les lecteurs d’écran.
De droite à gauche (RTL)
L’éditeur de texte riche React prend en charge le rendu de droite à gauche, permettant à la direction du texte et à la disposition de l’éditeur de texte d’être affichées 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.
Vous ne savez pas comment créer votre premier éditeur de texte riche React ? Nos vidéos tutoriels et notre documentation peuvent vous aider.
J’aimerais le regarder maintenant J’aimerais le lire maintenantDécouvrez l'écosystème complet de composants React de Syncfusion
Découvrez plus de 145+ composants d'interface utilisateur React, comprenant des contrôles éprouvés et prêts pour la production, ainsi que les derniers composants React purs conçus nativement pour le développement d'applications web modernes.
-
Composants React
-
Composants React purs
-
Composants intelligentsGrillesVisualisation des donnéesListes déroulantesVisionneuses et éditeurs de fichiersBoutonsChat interactifChamps de saisieNavigationFormulairesNotifications
-
GrillesVisualisation des donnéesNavigationEntrées
Foire aux questions
Pourquoi choisir l’éditeur de texte riche React de Syncfusion ?
L’éditeur de texte riche React de Syncfusion prend en charge les fonctionnalités suivantes :
Modifiez du contenu HTML et Markdown WYSIWYG avec un riche ensemble d’outils pour les applications web et mobiles modernes.
Intégrez-le facilement dans les éditeurs de blogs, 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 en ligne qui permet de sélectionner n’importe quel élément éditable de la page et de le modifier sur place.
- Offre une interface utilisateur riche en fonctionnalités pour interagir avec le logiciel.
- Configuration et API simples.
- L’un des meilleurs éditeurs de texte riche React du marché qui offre des fonctionnalités interactives.
- Prend en charge tous les navigateurs modernes.
- Mobile-friendly et réactif.
Ressources d’apprentissage étendues telles que des démos et une documentation pour apprendre rapidement et démarrer avec l’éditeur de texte riche React.
Quel est le prix de l’éditeur de texte riche React de Syncfusion ?
Nous ne vendons pas l’éditeur de texte riche React séparément. Il n’est disponible à l’achat que dans le cadre de la licence d’équipe Syncfusion. Celle-ci contient plus de 1,600 composants et frameworks, y compris l’éditeur de texte riche React. Le prix de la licence d’équipe commence à 395 $ par mois pour 5 développeurs, et inclut le support et les mises à jour jusqu’à l’expiration de l’abonnement. De plus, nous pourrions offrir des réductions en fonction des promotions actuellement actives. Veuillez contacter nos spécialistes produitsspecialistes dès aujourd’hui pour voir si vous êtes éligible à des réductions supplémentaires.
Où puis-je trouver la démo de l’éditeur de texte riche React de Syncfusion ?
Vous pouvez trouver notre démo de l’éditeur de texte riche React, qui démontre comment rendre et configurer l’éditeur de texte riche.
Puis-je acheter le composant éditeur de texte riche React de Syncfusion séparément ?
Non, nos 1,600+ composants et frameworks pour le web, le mobile et le bureau, y compris notre éditeur de texte riche React, 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 que légèrement plus cher que ce que certains autres fournisseurs facturent pour leur composant éditeur de texte riche seul. Nous avons également constaté que, d’après notre expérience, nos clients commencent généralement par utiliser l’un de nos produits, puis s’étendent rapidement à plusieurs produits. Nous avons donc estimé 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 en fonction des promotions actuellement actives. Veuillez contacter nos spécialistes produits dès aujourd’hui pour voir si vous êtes éligible à des réductions supplémentaires.
Puis-je télécharger et utiliser gratuitement l’éditeur de texte riche React de Syncfusion ?
Non, il s’agit d’un produit commercial et nécessite une licence payante. Cependant, une licence communautaire gratuite est également disponible pour les entreprises et les particuliers dont les organisations ont un chiffre d’affaires brut annuel inférieur à 1 million de dollars USD et cinq développeurs ou moins.
Comment puis-je commencer avec l’éditeur de texte riche React de Syncfusion ?
Un bon point de départ serait notre documentation complète de démarrage rapide.
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.
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
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 l’éditeur de texte riche React de 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 blogs sur l’éditeur de texte riche React
Les articles de blog sur l’éditeur de texte riche React vous guideront dans la création de votre première application avec ces composants React. Ils fournissent des stratégies de résolution de problèmes, décrivent les fonctionnalités et les fonctions, 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 nos chaînes de blogs pour les mises à jour de l’éditeur de texte riche React.
BLOG
Présentation de la prise en charge des icônes Emoji dans l’éditeur de texte riche React
JANVIER 03, 2025
