Des lecteurs comme vous aident à soutenir MUO. Lorsque vous effectuez un achat en utilisant des liens sur notre site, nous pouvons gagner une commission d'affiliation. En savoir plus.

Trouvez-vous difficile de fournir un travail en temps opportun sans faire de fautes de frappe et de grammaire? Cela peut être stressant, surtout lorsque vous voulez vous assurer que tout est parfait - l'utilisation de Grammarly peut améliorer votre productivité et votre expérience d'écriture.

Grammarly est un vérificateur de grammaire et un correcteur basé sur le cloud. Il détecte et corrige les erreurs de grammaire, d'orthographe, de ponctuation et autres erreurs d'écriture. Il propose également des suggestions d'amélioration du vocabulaire qui vous aident à améliorer la qualité de votre écriture.

Suivez-nous pour apprendre à intégrer Grammarly dans un éditeur de texte construit avec React.

Qu'est-ce que la grammaire pour les développeurs ?

Grammarly est largement reconnu pour son extension de navigateur que vous pouvez utiliser pour corriger les erreurs grammaticales dans l'éditeur de texte d'un site Web. Grammarly for Developers est une fonctionnalité de Grammarly qui vous aide à intégrer les outils de relecture et de détection de plagiat automatisés de Grammarly dans vos applications Web.

instagram viewer

Vous pouvez désormais utiliser Grammarly pour créer une fonction d'édition de texte en temps réel intégrée dans votre application Web à l'aide du kit de développement logiciel (SDK) de Grammarly. Cela permet à vos utilisateurs d'accéder à toutes les fonctionnalités de Grammarly sans avoir à télécharger l'extension de navigateur.

Créer une nouvelle application sur Grammarly Developer Console

Configurez une nouvelle application sur la console développeur de Grammarly en suivant ces étapes :

  1. Dirigez-vous vers le Grammaire pour les développeurs console et créez un compte. Si vous avez déjà un compte Grammarly, vous pouvez l'utiliser pour vous connecter à la console.
  2. Après vous être connecté, sur le tableau de bord de la console, cliquez sur le Nouvelle application bouton pour créer une nouvelle application. Remplissez le nom de votre application et appuyez sur Créer pour terminer le processus.
  3. Ensuite, dans le volet gauche du tableau de bord de votre application, sélectionnez le la toile pour afficher les informations d'identification de votre application sur la page des paramètres du client Web.
  4. Copiez l'ID client fourni. Sur la même page, notez le guide rapide sur la façon d'intégrer Grammarly SDK sur un client Web. Le SDK est compatible avec React, Vue.js et les clients JavaScript simples. Vous pouvez également intégrer le SDK dans HTML en ajoutant le SDK en tant que balise de script.

Le SDK Grammarly Text Editor prend en charge les dernières versions des navigateurs de bureau populaires: Chrome, Firefox, Safari, Edge, Opera et Brave. Les navigateurs mobiles ne sont actuellement pas pris en charge.

Intégrer le SDK de Grammarly dans un éditeur de texte React

D'abord, créer une application React. Ensuite, dans le répertoire racine de votre dossier de projet, créez un fichier ENV pour contenir votre variable d'environnement: votre ClientID. Rendez-vous sur la page des paramètres Web de votre application sur la console développeur de Grammarly et copiez votre ID client.

REACT_APP_GRAMMARLY_CLIENT_ID= ID client

1. Installer les packages requis

Exécutez cette commande sur votre terminal pour installer le SDK Grammarly React Text Editor dans votre application :

installation npm @grammaire/editor-sdk-react

2. Créer un éditeur de texte

Après avoir installé le SDK de l'éditeur de texte Grammarly React, créez un nouveau dossier dans le répertoire /src de votre application React et nommez-le composants. Dans ce dossier, créez un nouveau fichier: TextEditor.js.

Dans le fichier TextEditor.js, ajoutez le code ci-dessous :

importer Réagir depuis'réagir'
importer { GrammarlyEditorPlugin } depuis'@grammarly/editor-sdk-react'
fonctionÉditeur de texte() {
retour (
<divnom du cours="Application">
<entêtenom du cours="App-header">
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ Activation: "immédiat" }}
 >
<saisirespace réservé="Partage tes pensées!!" />
GrammarlyEditorPlugin>
entête>
div>
 );
}
exporterdéfaut Éditeur de texte;

Dans le code ci-dessus, vous importez le GrammarlyEditorPlugin à partir du SDK Grammarly-React et encapsulez une balise d'entrée avec le GrammarlyEditorPlugin.

Le GrammarlyEditorPlugin prend deux propriétés: clientID et une propriété de configuration qui définit l'activation sur immédiate. Cette propriété active le plugin et le met à la disposition de l'utilisateur dès que la page se charge.

Si vous avez l'extension de navigateur Grammarly, vous devez la désactiver ou la désinstaller pour cela tutoriel car le plugin de votre projet générera une erreur une fois qu'il aura détecté l'extension sur votre navigateur.

Le plug-in d'éditeur de Grammarly possède d'autres propriétés de configuration supplémentaires que vous pouvez utiliser pour personnaliser votre éditeur. Ils comprennent:

  • Saisie semi-automatique: cette propriété complète les phrases pour vos utilisateurs au fur et à mesure qu'ils les saisissent.
  • ToneDetector: Affiche l'interface du détecteur de tonalité.

3. Rendre le composant de l'éditeur de texte

Ajoutez le code ci-dessous dans votre fichier app.js pour rendre votre composant d'éditeur de texte :

importer Éditeur de texte depuis'./composants/éditeur de texte';
fonctionApplication() {
retour (
<divnom du cours="Application">
<entêtenom du cours="App-header">
<Éditeur de texte />
entête>
div>
 );
}
exporterdéfaut application ;

Maintenant, exécutez cette commande sur votre terminal pour lancer le serveur de développement et afficher les résultats sur votre navigateur :

npm commencer

Votre éditeur compatible avec la grammaire devrait ressembler à ceci:

Remarquez que vous avez enveloppé une balise d'entrée avec le GrammarlyEditorPlugin. Vous pouvez également envelopper un élément textarea ou tout élément avec l'attribut contenteditable utile défini sur "vrai".

Utilisation d'une balise textarea :

 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ Activation: "immédiat" }}
>
<zone de texteespace réservé=" Partage tes pensées!!" />
GrammarlyEditorPlugin>

Exécutez cette commande sur votre terminal pour afficher les résultats sur votre navigateur :

npm commencer

Vous devriez alors voir votre zone de texte compatible Grammarly:

Intégrer avec un éditeur de texte enrichi comme TinyMCE

Vous pouvez également envelopper un éditeur de texte à part entière avec le GrammarlyEditorPlugin. Le SDK Grammarly Text Editor est compatible avec plusieurs éditeurs de texte enrichi tels que :

  • TinyMCE
  • Ardoise
  • CKEditorComment
  • Penne

TinyMCE est un éditeur de texte facile à utiliser avec de nombreux outils de formatage et d'édition qui permettent aux utilisateurs d'écrire et de modifier du contenu dans une interface conviviale.

Pour intégrer l'éditeur de TinyMCE dans une application React avec l'assistant d'écriture grammaticale activé, visitez d'abord TinyMCE et créez un compte développeur. Ensuite, sur le tableau de bord d'intégration, fournissez une URL de domaine pour votre application et cliquez sur le Suivant: Continuer vers votre tableau de bord bouton pour terminer le processus de configuration.

Pour le développement local, vous n'avez pas besoin de spécifier le domaine puisque l'URL localhost est définie par par défaut, cependant, une fois que vous avez expédié votre application React en production, vous devez fournir le live URL de domaine.

Enfin, copiez votre clé API depuis votre tableau de bord développeur et revenez à votre projet sur votre éditeur de code et ajoutez la clé API dans le fichier ENV que vous avez créé précédemment :

REACT_APP_TINY_MCE_API_KEY="Clé API"

Maintenant, dirigez-vous vers votre fichier TextEditor.js et apportez les modifications suivantes :

  • Effectuez les importations suivantes: 
    importer Réagissez, { useRef } depuis'réagir';
    importer { Éditeur } depuis'@tinymce/tinymce-react';
    Ajoutez le hook useRef et importez le composant TinyMCE Editor à partir du package installé.
  • Dans le composant fonctionnel, ajoutez le code ci-dessous: 
    constante reféditeur = useRef(nul);
    Le crochet useRef vous permet de conserver des valeurs modifiables entre les rendus. Vous utiliserez la variable editorRef pour maintenir l'état des données saisies dans l'éditeur.
  • Enfin, renvoyez le composant éditeur de la bibliothèque TinyMCE: 
     apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, éditeur) => editorRef.current = éditeur}
     valeurinitiale="<p>C'est le contenu initial de l'éditeur.p>"
     init={{
     hauteur: 500,
     barre de menu: FAUX,
     plugins: [
    'advlist', 'lien automatique', 'listes', 'lien', 'image', 'charmap', 'Aperçu',
    'ancre', 'rechercher remplacer', 'blocs visuels', 'code', 'plein écran',
    'insérer la date et l'heure', 'médias', 'tableau', 'code', 'aider', 'nombre de mots'
     ],
     barre d'outils: 'annuler refaire | blocs | ' +
    'avant-garde italique gras | alignleft aligncenter ' +
    'alignright alignjustify | bulliste numlist indentation externe | ' +
    'supprimer le format | aider',
     style_de_contenu: 'body { font-family: Helvetica, Arial, sans-serif; taille de police: 14px }'
     }}
    />
  • Le composant définit les propriétés de l'éditeur c'est à dire la clé API, la valeur initiale, un objet à la hauteur de l'éditeur, les plugins et de la barre d'outils, et enfin la méthode editorRef.current qui affecte la valeur du paramètre "editor" à la "editorRef" variable.
  • Le paramètre "editor" est un objet événement qui est transmis lorsque l'événement "onInit" est déclenché.

Le code complet devrait ressembler à ceci :

importer Réagissez, { useRef } depuis'réagir';
importer { GrammarlyEditorPlugin } depuis'@grammarly/editor-sdk-react';
importer { Éditeur } depuis'@tinymce/tinymce-react';
fonctionÉditeur de texte() {
constante reféditeur = useRef(nul);
retour (
<divnom du cours="Application">
<entêtenom du cours="App-header">
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={
 { Activation: "immédiat" }}
 >
 apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, éditeur) => editorRef.current = éditeur}
 valeurinitiale="<p>C'est le contenu initial de l'éditeur. p>"
 init={{
 hauteur: 500,
 barre de menu: FAUX,
 plugins: [
'advlist', 'lien automatique', 'listes', 'lien', 'image', 'charmap', 'Aperçu',
'ancre', 'rechercher remplacer', 'blocs visuels', 'code', 'plein écran',
'insérer la date et l'heure', 'médias', 'tableau', 'code', 'aider', 'nombre de mots'
 ],
 barre d'outils: 'annuler refaire | blocs | ' +
'avant-garde italique gras | alignleft aligncenter ' +
'alignright alignjustify | bulliste numlist indentation externe | ' +
'supprimer le format | aider',
 style_de_contenu: 'body { font-family: Helvetica, Arial, sans-serif; taille de police: 14px }'
 }}
 />
GrammarlyEditorPlugin>
entête>
div>
 );
}
exporterdéfaut Éditeur de texte;

Dans ce code, vous encapsulez le composant de l'éditeur TinyMCE avec le GrammarlyEditorPlugin pour intégrer la fonction d'assistance grammaticale sur l'éditeur de texte TinyMCE. Enfin, lancez le serveur de développement pour enregistrer les modifications et accédez à http://localhost: 3000 dans votre navigateur pour afficher les résultats.

Utiliser la grammaire pour améliorer la productivité des utilisateurs

Le SDK de Grammarly fournit un outil puissant qui peut aider à améliorer la qualité et la précision de votre contenu dans un éditeur de texte React.

Il est facile à intégrer aux projets existants et fournit des fonctionnalités complètes de vérification de la grammaire et de l'orthographe qui peuvent améliorer l'expérience d'écriture de l'utilisateur.