Blazor Rich Text Editor - Markdown Éditeur
- Éditez le HTML WYSIWYG avec outils riches web/mobile.
- Intégrez dans les blogs, messages, composeurs d’e-mails et forums.
- Éditeur en ligne pour modifier tout élément sur place.
- Interface et outils personnalisables avancés.
Quick Overview Video
Confiado por las empresas líderes del mundo
Aperçu
L’Rich Text Editor Blazor est un éditeur HTML WYSIWYG et un éditeur Markdown WYSIWYG riche en fonctionnalités. L’Rich Text Editor est 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 plus encore. Le contrôle offre une interface utilisateur efficace pour une meilleure expérience d’édition avec le support mobile. Il dispose d’une variété d’outils pour éditer et formater du contenu riche et renvoie 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’Rich Text Editor Blazor Syncfusion Essential Studio® ?
Éditeur WYSIWYG
Le composant Blazor Rich Text Editor peut être utilisé comme un éditeur HTML WYSIWYG ou un é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, le soulignement, le barré et le gras. Vous pouvez également ajouter des listes personnalisées ordonnées (numérotées) ou non ordonnées (à puces) et modifier la taille de l’éditeur.
Édition flexible
Pour une meilleure expérience d’édition, le composant Blazor Rich Text Editor 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 les 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’Rich Text Editor WYSIWYG pour Blazor 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
L’Rich Text Editor a une disposition 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égration avec des bibliothèques tierces
Facile d’intégrer des bibliothèques tierces comme le correcteur orthographique, CodeMirror, etc., avec l’Rich Text Editor pour améliorer le contenu de l’éditeur de texte HTML Blazor.
Globalisation et localisation
Permet aux utilisateurs de différentes régions d’utiliser l’Rich Text Editor en formatant les dates, la devise et la numérotation selon leurs préférences.
Rich Text Editor intelligent avec intégration de l’IA
Améliorez votre écriture avec l’Rich Text Editor Blazor amélioré par l’IA. Corrigez la grammaire, reformulez les phrases, traduisez les langues et résumez le contenu instantanément, le tout au sein de votre application.
Exemple de code de l’Rich Text Editor Blazor
Commencez facilement avec l’Rich Text Editor Blazor en utilisant quelques lignes de code C# simples, comme illustré ci-dessous. Explorez également notre exemple d’Rich Text Editor Blazor qui vous montre comment rendre et configurer l’Rich Text Editor.
@using Syncfusion.Blazor.RichTextEditor
<SfRichTextEditor @bind-Value="rteValue">
<RichTextEditorToolbarSettings Items="@Tools" />
</SfRichTextEditor>
@code {
private string rteValue { get; set; } = @"<p>The Rich Text Editor component is 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 <b>IFRAME</b> and <b>DIV</b> modes </p></li>
<li><p> Capable of handling markdown editing.</p></li>
</ul>";
private List<ToolbarItemModel> Tools = new List<ToolbarItemModel>()
{
new ToolbarItemModel() { Command = ToolbarCommand.Bold },
new ToolbarItemModel() { Command = ToolbarCommand.Italic },
new ToolbarItemModel() { Command = ToolbarCommand.Underline },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.Formats },
new ToolbarItemModel() { Command = ToolbarCommand.Alignments },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.CreateLink },
new ToolbarItemModel() { Command = ToolbarCommand.Image },
new ToolbarItemModel() { Command = ToolbarCommand.CreateTable },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.SourceCode },
new ToolbarItemModel() { Command = ToolbarCommand.Separator },
new ToolbarItemModel() { Command = ToolbarCommand.Undo },
new ToolbarItemModel() { Command = ToolbarCommand.Redo }
};
}Barre d’outils de l’éditeur HTML
La barre d’outils de l’éditeur HTML WYSIWYG offre une variété de commandes pour éditer et formater le contenu. Vous pouvez formater le texte et les paragraphes ; insérer des images, des liens hypertextes, des tableaux et 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 excédentaires sont encapsulées dans les lignes suivantes de la barre d’outils.
Barre d’outils extensible
Les commandes de la barre d’outils excédentaires, masquées dans la ligne suivante, deviennent visibles lorsque la barre d’outils est étendue via l’icône d’extension.
Barre d’outils rapide
Cette barre d’outils contient les 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 ces éléments. Vous pouvez personnaliser la barre d’outils elle-même.
Barre d’outils flottante
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 de l’éditeur.
Entièrement personnalisable
Les boutons de la barre d’outils sont entièrement personnalisables. Vous pouvez ajouter ou supprimer des boutons et également regrouper les commandes par catégorie. Vous pouvez concevoir la barre d’outils pour répondre aux besoins de votre application, comme 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 les commandes intégrées.
Mode en ligne
Fait apparaître l’éditeur HTML en ligne lorsque vous cliquez ou sélectionnez du contenu dans une zone editable.
Mention et hashtag
Lors de la composition de contenu dans l’Rich Text Editor Blazor, les utilisateurs ou les groupes peuvent être étiquetés ou sélectionnés dans la liste de suggestions.
Expérience d’édition
L’Rich Text Editor Blazor, doté d’une interface utilisateur riche, offre un large éventail d’outils et d’options pour une meilleure expérience d’édition.
Insérer des images
Vous pouvez insérer des images dans votre contenu à partir d’un chemin local ou d’un chemin de serveur avec des légendes d’image, puis lier des URL aux images. Vous pouvez télécharger des images sur un serveur par glisser-déposer ou par téléchargement de fichiers. De plus, l’éditeur offre des options pour insérer des images aux formats BLOB ou Base64.
Insérer des liens hypertextes
Vous pouvez insérer ou modifier les liens hypertextes avec des options de personnalisation telles que le texte d’affichage, l’info-bulle et les liens à ouvrir dans une nouvelle fenêtre.
Insérer des tableaux
Vous pouvez insérer et modifier des tableaux HTML pour afficher des données tabulaires de type grille dans l’Rich Text Editor. Manipulez le tableau et ses éléments dynamiquement : insérez ou supprimez des lignes et des colonnes, redimensionnez l’ensemble du tableau ou des lignes ou colonnes spécifiques, supprimez un tableau.
Fusion et fractionnement 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
Alignez votre contenu à gauche, au centre ou à droite, ou justifiez-le.
Configuration de la touche Entrée et Maj+Entrée
L’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 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’Rich Text Editor Blazor. 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 les minuscules grecques ou les chiffres romains majuscules.
Éditeur de texte en plein écran
L’option intégrée permet à l’éditeur HTML WYSIWYG d’être en plein écran (éditeur pleine page) pour l’édition du contenu.
Coller depuis Microsoft Word et Excel
L’Rich Text Editor Blazor offre des options intégrées pour coller 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. Vous pouvez contrôler si le contenu est collé en texte brut, nettoyé de ses styles, ou avec les styles de formatage source.
Lien hypertexte automatique d’URL
Le contrôle transforme automatiquement le texte en lien hypertexte lorsqu’un utilisateur tape une URL en texte brut.
Validations de formulaire Blazor
L’Rich Text Editor Blazor est un composant de formulaire qui prend en charge de manière transparente les formulaires et obtient les valeurs lors de la soumission du formulaire. Les deux types de validation sont :
- Validation requise
- Validation de longueur maximale
Limiter la longueur du contenu
Les utilisateurs peuvent limiter le nombre maximum de caractères du contenu.
Éditeur redimensionnable
L’Rich Text Editor pour Blazor dispose d’un support de redimensionnement intégré qui permet d’élargir ou de réduire la zone de contenu.
Fonctionnalités supplémentaires
Couper, copier et coller
Le composant Blazor Rich Text Editor permet aux utilisateurs d’utiliser les opérations du presse-papiers (couper, copier et coller).
Gestionnaire annuler/rétablir
L’Rich Text Editor Blazor gère l’historique d’annulation pour stocker les actions d’édition des utilisateurs et leur permet de personnaliser les étapes d’annulation.
Imprimer le contenu de l’éditeur de texte
Imprimez le contenu de l’Rich Text Editor WYSIWYG soit en utilisant l’option d’impression de la barre d’outils, soit par programme avec le style de format appliqué.
Éditeur WYSIWYG réactif et adapté au toucher
L’Rich Text Editor pour Blazor (éditeur HTML mobile) reconnaît les gestes tactiles, permettant à l’utilisateur de glisser vers la gauche ou la droite pour déplacer la barre d’outils. La conception réactive et conviviale pour les mobiles offre la meilleure expérience utilisateur sur tous les téléphones mobiles, tablettes et facteurs de forme de bureau.
Thèmes intégrés et personnalisables
L’Rich Text Editor Blazor 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
Il existe suffisamment d’API côté client disponibles pour optimiser le processus d’édition de contenu.
Accessibilité de l’éditeur HTML
Navigation au clavier
Le composant Blazor Rich Text Editor assure que chaque cellule est accessible en utilisant le clavier. Les principales fonctionnalités comme le tri, la sélection et l’édition peuvent être effectuées en utilisant uniquement les commandes du clavier ; aucune interaction à la souris n’est requise. Cela aide à créer des applications hautement accessibles en utilisant ce composant.
Lecteur d’écran
La vue de l’Rich Text Editor Blazor bénéficie d’un support complet d’accessibilité WAI-ARIA. L’interface utilisateur de l’Rich Text Editor inclut des éléments visuels à contraste élevé qui aident les personnes malvoyantes à avoir la meilleure expérience de visionnage. De plus, des descriptions d’interface utilisateur valides sont facilement accessibles grâce à des technologies d’assistance telles que les lecteurs d’écran.
De droite à gauche (RTL)
L’Rich Text Editor Blazor 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.
Autres frameworks pris en charge
L’Rich Text Editor est disponible pour les frameworks React, Angular, JavaScript et Vue. Explorez ses options spécifiques à la plateforme via les liens suivants :
Navigateurs pris en charge
L’Rich Text Editor Blazor fonctionne bien avec tous les navigateurs web modernes, y compris Chrome, Firefox, Edge, Safari et Opera.
Vous ignorez comment créer un Blazor Rich Text Editor ? Notre doc aide.
Démarrez le Blazor Rich Text Editor serveur Commencez le Blazor Rich Text Editor WebAssembly Démarrez le Blazor Rich Text Editor WebAssemblyComponentes de Blazor: más de 145 componentes de interfaz de usuario y DataViz
TOUS LES COMPOSANTS
Composants intelligents
Grilles
Visualisation des données
Visionneuses et éditeurs de fichiers
Listes déroulantes
Navigation
Champs de saisie
Boutons
Chat interactif
Formulaires
Foire aux questions
Pourquoi choisir l’Rich Text Editor Blazor Syncfusion Essential Studio® ?
L’éditeur de texte riche Blazor de Syncfusion est un éditeur HTML WYSIWYG riche en fonctionnalités qui offre les fonctionnalités suivantes :
Offre la meilleure expérience d’édition WYSIWYG avec les éditeurs HTML et Markdown.
- Flexible pour intégrer des bibliothèques tierces.
Éditeur en mode inline pour afficher les commandes à la demande.
- L’un des meilleurs éditeurs de texte riche Blazor du marché qui offre une interface utilisateur riche en fonctionnalités pour interagir avec le logiciel.
Configuration simple et API.
- Prend en charge tous les navigateurs modernes.
- Mobile, tactile et réactif.
Démos, documentation et vidéos complètes pour apprendre rapidement et commencer avec l’éditeur de texte riche Blazor.
Quel est le prix de l’Rich Text Editor Blazor de Syncfusion ?
Nous ne vendons pas l’Rich Text Editor Blazor 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’Rich Text Editor Blazor. 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 produits dès aujourd’hui pour voir si vous êtes admissible à des réductions supplémentaires.
Où puis-je trouver la démo de l’Rich Text Editor Blazor de Syncfusion ?
Vous pouvez trouver notre démo de l’Rich Text Editor Blazor, qui montre comment rendre et configurer l’Rich Text Editor.
Puis-je acheter le composant Rich Text Editor Blazor de Syncfusion séparément ?
Non, nos 1,600+ composants et frameworks pour le web, le mobile et le desktop, y compris notre Rich Text Editor Blazor, 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 que ce que d’autres fournisseurs facturent pour leur seul composant Rich Text Editor. Nous avons également constaté que, selon notre expérience, nos clients commencent généralement par utiliser l’un de nos produits, puis é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 en fonction des promotions actuellement actives. Veuillez contacter nos spécialistes produits dès aujourd’hui pour voir si vous êtes admissible à des réductions supplémentaires.
Puis-je télécharger et utiliser gratuitement l’Rich Text Editor Blazor de Syncfusion ?
Non, il s’agit d’un produit commercial qui 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 annuel brut inférieur à 1 million de dollars américains et cinq développeurs ou moins.
Comment puis-je démarrer avec l’Rich Text Editor Blazor 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.
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’Rich Text Editor Blazor 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 blogs sur l’Rich Text Editor Blazor
Les vidéos de tutoriels et les articles de blog sur l’Rich Text Editor Blazor vous guideront dans la création de votre première application avec ces composants Blazor. Ils fournissent des stratégies de résolution de problèmes, décrivent les caractéristiques et 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 vidéos de tutoriels pour les mises à jour de l’Rich Text Editor Blazor.
VIDEOS
Comment importer et exporter un fichier RTF dans le composant Blazor Rich Text Editor
9 FÉVRIER 2024
