Documentation

Installez l’éditeur, configurez-le et pilotez-le depuis votre code. 108 guides et pages de référence.

Commencez ici

Démarrage rapide

Faites fonctionner RichTextEditor 2.6.12 : choisissez un mode d’installation, créez votre premier éditeur, lisez et enregistrez le HTML, et résolvez les problèmes d’installation courants.

Référence de configuration

Toutes les options de configuration de RichTextEditor : réglages de base de l’éditeur, typographie intelligente, sécurité de l’iframe, et plus de 100 options de plugins pour l’IA, l’export, la pagination, l’accessibilité et la sécurité du contenu.

Toutes les méthodes

Référence complète des méthodes de l’API JavaScript des instances RichTextEditor : contenu, sélection, commandes, boîtes de dialogue et cycle de vie.

AI Toolkit

Référence de l’AI Toolkit : la boîte de dialogue Ask AI, AI Chat, AI Review, le hook aiToolkitResolver, le contrat des opérations, les actions personnalisées et le BYOK.

Prise en main

Comment installer, mettre en place et configurer l’éditeur.

Démarrage rapide

Faites fonctionner RichTextEditor 2.6.12 : choisissez un mode d’installation, créez votre premier éditeur, lisez et enregistrez le HTML, et résolvez les problèmes d’installation courants.

Installation (div)

Installez RichTextEditor sur un élément div : incluez rte.js, créez l’instance, puis lisez ou définissez le contenu HTML depuis vos propres scripts.

Installation (textarea)

Installez RichTextEditor sur un textarea : l’éditeur resynchronise automatiquement le HTML dans le champ du formulaire, si bien que les envois de formulaires existants continuent de fonctionner.

Initialisation

RichTextEditor JavaScript global enables you to create, modify and interact with instances of the editor. This is the starting point for any integration.

Configuration

RichTextEditor peut être configuré de plusieurs façons pour s’adapter à votre expérience d’édition.

Référence de configuration

Toutes les options de configuration de RichTextEditor : réglages de base de l’éditeur, typographie intelligente, sécurité de l’iframe, et plus de 100 options de plugins pour l’IA, l’export, la pagination, l’accessibilité et la sécurité du contenu.

Habillage (skin)

Configuration de l’habillage et du thème : changer l’habillage de la barre d’outils, redéfinir les variables CSS et adapter l’apparence de l’éditeur à votre produit.

Définir et lire le contenu

Les façons courantes de définir et de lire le contenu HTML de RichTextEditor depuis JavaScript, y compris sa relecture avant l’envoi d’un formulaire.

État React et problèmes de curseur

Choisissez un état React contrôlé ou non contrôlé pour RichTextEditor. Enregistrez le HTML courant, évitez les réponses d’enregistrement automatique périmées et diagnostiquez les sauts de curseur, les remontages et le nettoyage en Strict Mode.

Validation de formulaire et champs obligatoires

Validez un champ RichTextEditor obligatoire sans compter du HTML vide comme du contenu. Synchronisez le textarea, affichez des erreurs accessibles et répétez la validation sur le serveur.

FAQ

Réponses aux questions courantes sur l’intégration, la configuration, les licences, la prise en charge des navigateurs et le dépannage de RichTextEditor.

IA

Outils de rédaction IA et connexion de votre propre fournisseur.

AI Toolkit

Référence de l’AI Toolkit : la boîte de dialogue Ask AI, AI Chat, AI Review, le hook aiToolkitResolver, le contrat des opérations, les actions personnalisées et le BYOK.

Fournisseurs d’IA, streaming et DOCX

Résolveurs de fournisseurs intégrés OpenAI / Anthropic / Azure OpenAI, streaming par Server-Sent Events et export DOCX côté serveur.

Coffre de clés BYOK (clés par locataire)

Charge AI traffic to each tenant's own provider account via the IAiKeyVault abstraction, with reference implementations, admin REST API, and cost ledger.

Documents et rédaction

Export Word, mise en page, contenu structuré et saisie.

Fidélité et sécurité DOCX

La matrice testée de prise en charge HTML vers DOCX, le contrat de requête, les conventions de balisage de relecture, la frontière de sécurité des images et les limites voulues.

Pagination et numérotation juridique

Affichage paginé (A4, Letter et Legal, avec en-têtes, pieds de page et numéros de page) et numérotation juridique à plusieurs niveaux, dans la licence standard.

Notes de bas de page, reproduction de la mise en forme et casse

Notes de bas de page numérotées automatiquement, un outil de reproduction de la mise en forme qui copie la mise en forme des caractères, et le changement de casse (UPPER, lower, Title, Sentence) - licence standard.

Contenu structuré

Documentation de RichTextEditor sur le JSON structuré, la conversion en Markdown, le rendu HTML statique et la validation.

Dictée

Reconnaissance vocale via la Web Speech API. Bouton micro dans la barre d’outils, transcriptions provisoires en direct, à activer explicitement.

Mode barre d’outils mobile

Feuille de style mobile à activer explicitement, avec des zones tactiles de 44x44, une barre d’outils à défilement horizontal, un en-tête fixe et des boîtes de dialogue en panneau inférieur.

Collaboration

Commentaires, suivi des modifications et édition en temps réel.

Collaboration et relecture

Référence des plugins de collaboration et de relecture : Slash Commands, @Mentions, Track Changes, Comments, Revision History et présence Yjs.

Moteur CRDT Yjs par nœud

Le fonctionnement interne de textSync: 'crdt' : la liaison par nœud, l’encodage de l’awareness, le gestionnaire d’annulation par auteur et le dispatcher de rte.js.

Images et envois

Téléverser, stocker et parcourir des images et des fichiers.

Téléverser des fichiers

Configurez des envois de fichiers sécurisés dans RichTextEditor avec un gestionnaire personnalisé, la validation, des callbacks de progression et des contrôles de stockage côté serveur.

Chemin de la galerie d’images

Faites pointer la boîte de dialogue Insert Gallery vers vos propres images : le contrat JSON des dossiers, la façon dont un dossier devient une URL, et le code du point de terminaison pour ASP.NET, ASP.NET Core et PHP.

Stocker les images sous forme de fichiers

Configuration des images en production : créer le dossier d’envoi et de galerie, brancher le gestionnaire d’envoi, désactiver l’intégration en base64, refuser le base64 sur le serveur et transformer les images base64 existantes en fichiers. ASP.NET Core, ASP.NET et PHP.

Résoudre les problèmes d’envoi d’images

Diagnostiquez pas à pas l’envoi d’images de RichTextEditor : requêtes absentes, erreurs 403 et 413, réponses invalides, URL d’images cassées et images perdues après l’enregistrement.

Fournisseurs de stockage cloud pour les envois

Send uploads to S3, Azure Blob, Cloudinary, or any custom backend via IRichTextBoxUploadStore. Reference implementations included.

Personnaliser et étendre

Barres d’outils, commandes, événements et vos propres plugins.

Notions de base de l’API

L’éditeur expose des méthodes côté client pour lire et modifier le contenu.

Référence des éléments de barre d’outils et de menu

Every toolbar and menu item identifier RichTextEditor supports, grouped by category, for building custom toolbars in config.toolbar strings.

Toutes les commandes (execCommand)

Référence complète des commandes d’execCommand() : mise en forme, blocs, listes, tableaux, médias et commandes de boîtes de dialogue, avec leurs signatures d’arguments.

Toutes les propriétés

Les propriétés en lecture seule d’une instance RichTextEditor, pour atteindre les objets liés à l’éditeur depuis votre propre code. Avec des exemples.

Toutes les méthodes

Référence complète des méthodes de l’API JavaScript des instances RichTextEditor : contenu, sélection, commandes, boîtes de dialogue et cycle de vie.

Gérer les événements

Référence de runjsevent : reliez des boutons de la barre d’outils à vos propres gestionnaires JavaScript et réagissez aux commandes de l’éditeur depuis le code de l’application.

Écrire votre premier plugin

Construisez un plugin RichTextEditor de bout en bout : enregistrement, valeurs de configuration par défaut, un bouton de barre d’outils, une commande, le bus d’événements, et son effet sur le contenu enregistré.

Taille du bundle et sélection des plugins

Par défaut, tous les plugins sont livrés dans all_plugins.min.js. Ne chargez que les plugins que vous utilisez, et l’éditeur passe de 529 KB à 214 KB en gzip. Préréglages mesurés pour un blog, des documents, la relecture et la collaboration, avec les balises script de chacun.

Les fonctionnalités, une par une

Ce que fait chaque fonctionnalité, comment l’activer et ses options.

Sélecteur d’emojis

Un sélecteur avec recherche de 1,037 émojis dans huit catégories, un onglet récent et une navigation au clavier. Les émojis sont enregistrés en caractères Unicode simples.

Saisie semi-automatique des emojis

Saisissez :smile: pour obtenir l’émoji ou quelques lettres après deux-points pour le choisir dans une liste. Noms courts, codes personnalisés et annulation.

Modèles de contenu

Proposez des documents prédéfinis dans une boîte de dialogue avec recherche et aperçus. Définition de htmlTemplates, formats acceptés et remplacement du contenu.

Équations mathématiques

Insérez des équations TeX et LaTeX depuis une boîte de dialogue avec aperçu. Utilisation de KaTeX ou MathJax chargé sur la page, enregistrement et affichage.

Diagrammes Mermaid

Créez des organigrammes, diagrammes de séquence, secteurs et Gantt en texte Mermaid. Chargement de Mermaid ou rendu serveur, enregistrement et affichage ultérieur.

Cartes de signets

Insérez un lien sous forme de carte avec titre, description, icône et image. L’éditeur ne récupère rien : reliez bookmarkResolver à votre propre point de terminaison.

Intégration automatique

Collez un lien YouTube, Vimeo, Loom ou autre sur sa propre ligne pour obtenir un lecteur 16:9. Sites pris en charge, fournisseurs personnalisés et balisage enregistré.

Pastilles intelligentes

Puces de date, de personne et de lien dans le texte avec valeur lisible par machine. Dates rapides, suggestions de votre chipResolver et balisage enregistré.

Tableaux de mise en page

Marquez les tableaux servant uniquement à positionner le contenu avec role=presentation pour que les lecteurs d’écran ignorent la grille. Commandes, menu slash, API et effets.

@mentions

Saisissez @ pour choisir une personne dans une liste fixe ou une recherche serveur. La puce conserve son identifiant dans le HTML pour identifier les personnes mentionnées.

Complétion en texte fantôme

Suggestions grises après le curseur, fournies par votre résolveur. Tab accepte, Échap ferme. Aucun modèle inclus ; appelez votre propre point de terminaison d’IA.

Code en ligne

Marquez un mot ou une sélection comme code avec le bouton ou la commande inlinecode. Enregistre un élément <code> simple ; appuyez de nouveau pour retirer le code.

Titres repliables

Réduisez une section avec la flèche à côté de son titre ou par script. Le repli ne concerne que l’affichage ; le HTML enregistré conserve toutes les sections.

Curseur d’intervalle

Ajoutez un paragraphe avant un tableau initial ou entre deux tableaux, séparateurs ou images, avec une flèche, un clic dans l’espace ou la ligne d’aide bleue.

Tri des tableaux et numéros de ligne

Triez les lignes par colonne avec détection des nombres, montants et dates, ajoutez une colonne de numéros actualisée automatiquement et déplacez lignes et colonnes depuis les menus.

Statistiques de lisibilité

Score Flesch Reading Ease, niveau Flesch-Kincaid, temps de lecture et nombres de mots, de phrases et de syllabes, calculés dans le navigateur. Affichage en boîte de dialogue ou lecture par script.

Lecture à voix haute

Lit le document ou la sélection avec la synthèse vocale du navigateur, phrase par phrase, avec lecture, pause, voix et vitesse dans une petite barre.

Éditeur d’images

Recadrez, faites pivoter ou retournez une image, dessinez, ajoutez texte ou filtres. Save envoie un PNG via votre gestionnaire ou l’intègre sous forme d’URL de données.

Correcteur orthographique

Vérification du navigateur dans la zone d’édition et commande Spell Check ouvrant un panneau de révision alimenté par votre propre service d’orthographe.

Langue des passages de texte

Marquez un mot ou un passage en français, en hébreu ou dans une autre langue avec span lang pour une prononciation correcte par les lecteurs d’écran (WCAG 3.1.2).

Interface de droite à gauche

Inversez la barre d’outils, les menus, les boîtes de dialogue et la barre d’état pour l’arabe, l’hébreu, le persan et l’ourdou, automatiquement ou toujours. Le contenu reste inchangé.

Importer des styles

Remplissez les menus de styles de paragraphes, de texte, d’images et de liens avec les classes CSS de vos feuilles de style, selon l’élément de chaque sélecteur.

HTML pour e-mail

getEmailHTML() copie les styles calculés en ligne, supprime classes et identifiants et enveloppe le contenu dans un tableau de largeur fixe pour les clients de messagerie.

Plusieurs zones modifiables

Regroupez des éditeurs de titre, résumé et corps : seule la zone active affiche sa barre d’outils et une API enregistre et charge toutes les zones ensemble.

Shadow DOM

Exécutez l’éditeur dans une racine shadow ou un composant web. Le plugin copie ses feuilles de style dans la racine shadow, y compris celles ajoutées ultérieurement.

Accessibilité des boîtes de dialogue

Attribue aux boîtes de dialogue le rôle dialog, un nom issu du titre et des noms accessibles aux champs, pour que les lecteurs d’écran annoncent URL plutôt que edit.

Accessibilité et exploitation

Conformité WCAG et exploitation de l’éditeur en production.

Accessibilité (WCAG 2.2 AA)

Objectif de conformité WCAG 2.2 niveau AA, ce qui fonctionne aujourd’hui, les lacunes connues et les combinaisons de technologies d’assistance prises en charge par RichTextEditor.

Règles du vérificateur d’accessibilité

Chaque règle que le vérificateur d’accessibilité intégré applique au contenu de l’éditeur, ce que chacune détecte, lesquelles proposent une réparation en un clic, et l’API JavaScript pour le lancer vous-même.

Exploitation en production

Exploiter RichTextEditor et RichTextBox.AspNetCore en production : limitation de débit, nouvelles tentatives HTTP, journal d’audit, sondes d’intégrité, idempotence et BYOK.

Référence des méthodes

Toutes les méthodes de l’éditeur, une page pour chacune.

Événements

Les événements déclenchés par l’éditeur et comment les écouter.

Vous préférez le voir en action ?

Chaque fonctionnalité de cette documentation a une démo en direct que vous pouvez modifier et inspecter.

Parcourir les démosContacter le support