JavaScript Rich Text Editor - A WYSIWYG Markdown Éditeur
- Modifiez le HTML WYSIWYG avec des outils riches pour les applications web et mobiles.
- Intégrez dans les blogs, messages, composeurs d’e-mails et forums.
- Utilisez-le comme éditeur en ligne pour l’édition sur place de tout élément modifiable.
- Interface utilisateur et personnalisation de la barre d’outils de pointe.
Trusted by the world’s leading companies
Aperçu
Le JavaScript Rich Text Editor est un éditeur WYSIWYG HTML et WYSIWYG Markdown riche en fonctionnalités. Il est largement utilisé pour créer des blogs, des messages 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 un support mobile. Il dispose de divers outils pour éditer et formater du contenu riche, et il renvoie un balisage HTML valide ou du contenu Markdown (MD). Les utilisateurs peuvent insérer des images, des liens, des tableaux et des listes grâce à son architecture modulaire.
Pourquoi choisir le Syncfusion JavaScript Rich Text Editor ?
Éditeur WYSIWYG
Le contrôle JavaScript Rich Text Editor peut être utilisé comme un éditeur WYSIWYG HTML ou un éditeur Markdown, et il prend également en charge l’édition par iframe avec des caractéristiques d’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 contrôle JavaScript Rich Text Editor 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 les touches.
Prévisualiser le code HTML
Examinez et éditez le code HTML directement dans le code source et visualisez le résultat de l’aperçu (éditeur HTML en direct).
Barre d’outils
Le WYSIWYG Rich Text Editor pour JavaScript offre une variété d’options de barre d’outils entièrement personnalisables. Les options permettent des barres d’outils multilignes, extensibles, rapides et flottantes. Les commandes d’outils sont regroupées en fonction des fonctionnalités associées.
S’adapte à toutes les résolutions
Le Rich Text Editor possède une mise en page très réactive et une conception optimisée pour les ordinateurs de bureau, les tablettes 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
Il est facile d’intégrer des bibliothèques tierces, comme un vérificateur d’orthographe ou un miroir de code (Code Mirror), avec le Rich Text Editor pour améliorer le contenu.
Globalisation et localisation
Permettez aux utilisateurs de différentes localités d’utiliser le Rich Text Editor en formatant les dates, les devises et la numérotation selon leurs préférences.
Rich Text Editor prêt pour l’IA
Transformez vos applications JavaScript avec notre Rich Text Editor prêt pour l’IA, offrant la correction grammaticale, le support multilingue, la reformulation et la synthèse.
Exemple de code JavaScript Rich Text Editor
Commencez facilement avec le JavaScript Rich Text Editor en utilisant quelques lignes simples de code HTML et TypeScript, comme démontré ci-dessous. Explorez également cet exemple de JavaScript Rich Text Editor, qui montre comment restituer et configurer le contrôle.
<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');Barre d’outils de l’éditeur HTML
La barre d’outils de l’éditeur WYSIWYG HTML fournit une variété de commandes pour éditer et formater le contenu. Formatez du texte et des paragraphes et insérez des images, des hyperliens, des tableaux et des listes. Les commandes d’outils sont regroupées en fonction des fonctionnalités associées.
Barre d’outils multiligne
Les commandes de la barre d’outils de l’éditeur HTML5 WYSIWYG qui débordent sont enveloppées dans les lignes suivantes au sein de la barre d’outils.
Barre d’outils extensible
Les commandes de barre d’outils en surplus cachées dans 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, aux images, aux tableaux et aux liens. Elle aide à accéder et à formater ces éléments rapidement.
Barre d’outils flottante
La barre d’outils de l’éditeur HTML5 WYSIWYG ne reste pas collée au haut de l’éditeur. Elle flotte dans la zone de l’éditeur lors du défilement de la page actuelle.
Entièrement personnalisable
Les boutons de la barre d’outils du contrôle HTML5 Rich Text Editor sont entièrement personnalisables. Ajoutez ou supprimez des boutons et regroupez les commandes par catégorie. Cela aide à concevoir la barre d’outils en fonction des besoins de l’application, comme pour l’édition de blogs HTML, la composition d’e-mails HTML, et plus encore.
Outil personnalisé
Ajoutez vos propres commandes (outils) avec des actions aux commandes intégrées dans la barre d’outils.
Mode en ligne
Le JavaScript Rich Text Editor affiche un éditeur HTML en ligne lorsqu’on clique sur le contenu d’une zone modifiable ou qu’on le sélectionne.
Mention et hashtag
Lors de la composition de contenu dans le JavaScript Rich Text Editor, des utilisateurs ou des groupes peuvent être tagués ou sélectionnés à partir d’une liste de suggestions.
Configurations des touches Entrée et Maj+Entrée
Personnalisez les balises insérées lors de l’appui sur la touche Entrée et les touches Maj + Entrée. Vous pouvez configurer le contrôle pour insérer des balises spécifiques comme P, qui crée une balise <p> ; DIV, qui crée une balise <div> ; et BR, qui crée une balise
lorsqu’une combinaison de touches est utilisée.
Expérience d’édition
Le contrôle JavaScript Rich Text Editor 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 serveur avec des légendes d’image, puis liez des URL aux images. Téléchargez des images vers un serveur avec la fonctionnalité de glisser-déposer ou de chargement de fichier. De plus, l’éditeur propose 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 (tooltip) 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 sous forme de grille dans le JavaScript WYSIWYG Rich Text Editor. Manipulez le tableau et ses éléments dynamiquement : insérez ou supprimez des lignes et des colonnes ; redimensionnez un tableau entier, 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 leurs contenus. De plus, une cellule unique peut être divisée horizontalement et verticalement.
Alignement du texte
Des paramètres intégrés sont disponibles pour justifier le contenu ou l’aligner à gauche, au centre ou à droite.
Insérer des emoji
Incorporez des emoji dans votre contenu. Recherchez parmi une vaste collection d’emoji, en sélectionnant ceux qui résonnent avec votre message. Accédez au sélecteur d’emoji en appuyant simplement sur la touche deux-points (:) dans le JavaScript Rich Text Editor.
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, italique, souligné, barré, ou mettez en majuscules les lettres et les mots.
- Modifiez l’indentation et l’espacement des paragraphes.
- Sélectionnez les polices et les tailles de polices.
- 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 le JavaScript Rich Text Editor. Le contrôle permet de modifier 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
Mettez l’éditeur JavaScript HTML5 en plein écran (éditeur pleine page) pour l’édition du contenu.
Coller depuis Microsoft Word et Excel
Le JavaScript Markdown Editor 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, attributs et 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
Le JavaScript Rich Text Editor est configuré pour transformer automatiquement le texte en hyperlien lorsqu’une URL est saisie sous forme de texte brut.
Validations de formulaires JavaScript
Le JavaScript Rich Text Editor est un contrôle de formulaire qui prend en charge les formulaires HTML et obtient des valeurs lors des actions de soumission de formulaire. Les deux types de validation sont :
- Validation requise
- Validation de longueur maximale
Limiter la longueur du contenu
Restreignez le nombre maximum de caractères du contenu.
Éditeur redimensionnable
Le JavaScript Rich Text Editor dispose d’un support de redimensionnement intégré qui élargit ou rétracte la zone de contenu.
Insérer une image via le gestionnaire de fichiers
Le gestionnaire de fichiers intégré au Rich Text Editor peut être utilisé pour insérer et charger des images à partir d’un stockage cloud ou d’un serveur.
Reproducteur de mise en forme
Utilisez le reproducteur de mise en forme (Format Painter) pour copier la mise en forme et l’appliquer à votre contenu. Accédez au reproducteur de mise en forme via la barre d’outils ou des raccourcis clavier pour une application rapide et facile. Profitez du mode collant en double-cliquant sur le bouton de la barre d’outils, ce qui vous permet d’appliquer des formats à plusieurs endroits.
Couper, copier et coller
Le Rich Text Editor permet aux utilisateurs d’utiliser les opérations du presse-papiers (couper, copier et coller).
Gestionnaire annuler/rétablir
Le Rich Text Editor gère l’historique des actions annuler/rétablir pour stocker les actions d’édition.
Imprimer le contenu de l’éditeur de texte
Imprimez le contenu du WYSIWYG Rich Text Editor soit en utilisant l’option d’impression de la barre d’outils, soit par programmation avec la mise en forme appliquée.
Éditeur WYSIWYG tactile et réactif
Le JavaScript Text Editor (é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 adaptée aux mobiles offre la meilleure expérience utilisateur sur tous les formats mobiles, tablettes et ordinateurs de bureau.
Thèmes intégrés et personnalisables
JavaScript Rich Text Editor est livré avec plusieurs thèmes intégrés : Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent et en contraste élevé.
APIs adaptées aux développeurs
Il existe suffisamment d’APIs côté client disponibles pour optimiser l’édition de contenu.
Accessibilité de l’éditeur HTML
Navigation au clavier
Le composant JavaScript Rich Text Editor garantit que chaque cellule est accessible à l’aide du clavier. Les fonctionnalités majeures comme le tri, la sélection et l’édition peuvent être effectuées uniquement à l’aide de commandes au 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 JavaScript Rich Text Editor dispose d’un support complet d’accessibilité WAI-ARIA. Son interface utilisateur comprend des éléments visuels à contraste élevé qui aident les personnes malvoyantes à bénéficier de la meilleure expérience de visualisation. De plus, des descriptions d’interface valides sont facilement accessibles grâce aux technologies d’assistance telles que les lecteurs d’écran.
De droite à gauche (RTL)
Le Rich Text Editor HTML5/JavaScript prend en charge le rendu de droite à gauche, permettant au texte et à la mise en page de l’éditeur de texte d’être affichés de droite à gauche. Cela améliore l’expérience utilisateur et l’accessibilité pour les utilisateurs de langues RTL telles que l’arabe, le farsi et l’hébreu.
Autres frameworks supportés
Le Rich Text Editor est également disponible pour les frameworks Blazor, React, Angular et Vue. Explorez ses options spécifiques à la plateforme via les liens suivants :
Navigateurs supportés
Le JavaScript Rich Text Editor 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 JavaScript Rich Text Editor ? Notre documentation peut vous aider.
J’aimerais la lire maintenantPlus de 145+ contrôles d'interface utilisateur JavaScript
TOUS LES CONTROLES
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 le Syncfusion JavaScript Rich Text Editor ?
Le Syncfusion Rich Text Editor vous permet de :
Éditer du contenu WYSIWYG HTML et Markdown avec un ensemble riche d’outils pour les applications web et mobiles modernes.
Incorporer facilement l’éditeur dans des applications de type éditeur de blog, message, compositeur d’e-mail HTML et forum de discussion.
Créer une barre d’outils flottante ou un éditeur en ligne qui vous permet de sélectionner n’importe quel élément modifiable sur la page et de l’éditer sur place.
Profiter d’une configuration simple et d’une API.
- Restituer sur tous les navigateurs modernes avec facilité.
- Utiliser une interface utilisateur tactile et réactive.
Profiter de ressources d’apprentissage étendues telles que des démos et une documentation pour commencer rapidement avec le contrôle.
Quel est le prix du Syncfusion JavaScript Rich Text Editor ?
Nous ne vendons pas le JavaScript Rich Text Editor séparément. Il est uniquement disponible à l’achat dans le cadre de la suite de composants Essential Studio. Celle-ci contient plus de 1,600 composants et frameworks, y compris le JavaScript Rich Text Editor. Elle comprend le support et les mises à jour jusqu’à l’expiration de l’abonnement. De plus, nous pourrions offrir des remises basées sur les promotions actuellement actives. Veuillez contacter nos spécialistes produits pour obtenir un devis adapté à votre situation et vérifier les remises supplémentaires éventuelles.
Où puis-je trouver la démo de Syncfusion JavaScript Rich Text Editor ?
Vous pouvez trouver notre démo de JavaScript Rich Text Editor ici.
Puis-je acheter le composant Syncfusion JavaScript Rich Text Editor séparément ?
Non, nos 1,600+ composants et frameworks pour le web, le mobile et le bureau, y compris notre JavaScript Rich Text Editor, ne sont pas vendus individuellement. 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 JavaScript Rich Text Editor. 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 moyennant des frais d’abonnement. De plus, nous pourrions être en mesure d’offrir des remises basées sur les promotions actuellement actives. Veuillez contacter nos spécialistes produits pour voir si vous êtes éligible à des remises supplémentaires.
Puis-je télécharger et utiliser le Syncfusion JavaScript Rich Text Editor gratuitement ?
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 revenu brut annuel inférieur à 1 million USD, 5 développeurs ou moins, et 10 employés ou moins au total.
Comment commencer avec le Syncfusion JavaScript Rich Text Editor ?
Un bon point de départ serait notre documentation complète de mise en route.
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.
Belle suite de composants
Un ensemble très complet de composants, qui a une longueur d’avance sur les autres grands fournisseurs proposant des composants. Beaucoup moins de code requis pour l’utilisation et des échantillons de code pour des composants plus complets. S’intègre bien avec d’autres composants tiers.
John A.
Développeur C# (Contractuel)
Parfait pour tout développeur
Le Syncfusion Essential Studio possède d’excellentes fonctionnalités qui sont mises à jour ou ajoutées constamment sur une base régulière. Le support est exceptionnel — réponses rapides et professionnelles. L’équipe de support vous fournit des échantillons de code. Quant aux bugs, ils essaient toujours d’inclure la correction dans la prochaine version.
Dejan D.
Directeur Général
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 du Syncfusion JavaScript Rich Text Editor
Support technique
Contacter le support
Forum communautaire
Demandes de fonctionnalités et rapports de bugs
Contacter le support
Forum communautaire
Demandes de fonctionnalités et rapports de bugs
Kits UI
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.
