Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

Vă este greu să livrați lucrări în timp util fără a face greșeli de scriere și gramaticale? Poate fi stresant, mai ales atunci când doriți să vă asigurați că totul este perfect – utilizarea Grammarly vă poate îmbunătăți productivitatea și experiența de scriere.

Grammarly este un verificator gramatical și un corector bazat pe cloud. Detectează și corectează gramatica, ortografie, punctuația și alte erori de scriere. De asemenea, oferă sugestii de îmbunătățire a vocabularului care vă ajută să vă îmbunătățiți calitatea scrisului.

Urmăriți pentru a afla cum să integrați Grammarly într-un editor de text construit cu React.

Ce este Grammarly pentru dezvoltatori?

Grammarly este recunoscut pe scară largă pentru extensia sa de browser pe care o puteți folosi pentru a corecta greșelile gramaticale în editorul de text al unui site web. Grammarly pentru dezvoltatori este o caracteristică a Grammarly care vă ajută să integrați instrumentele automate de corectare și de detectare a plagiatului Grammarly în aplicațiile dvs. web.

instagram viewer

Acum puteți utiliza Grammarly pentru a crea o funcție de editare a textului în timp real în aplicația dvs. web folosind Kitul de dezvoltare software (SDK) de la Grammarly. Acest lucru oferă utilizatorilor dvs. acces la toate funcțiile Grammarly fără a fi nevoie să descărcați extensia de browser.

Creați o nouă aplicație pe Grammarly Developer Console

Configurați o nouă aplicație pe consola pentru dezvoltatori Grammarly urmând acești pași:

  1. Îndreptați-vă spre Gramatical pentru dezvoltatori console și creați un cont. Dacă aveți deja un cont Grammarly, îl puteți utiliza pentru a vă conecta la consolă.
  2. După conectare, pe tabloul de bord al consolei, faceți clic pe Aplicație nouă butonul pentru a crea o aplicație nouă. Completați numele aplicației dvs. și apăsați Crea pentru a finaliza procesul.
  3. Apoi, în panoul din stânga al tabloului de bord al aplicației dvs., selectați Web pentru a vedea datele de conectare ale aplicației dvs. pe pagina de setări a clientului web.
  4. Copiați ID-ul de client furnizat. Pe aceeași pagină, observați ghidul rapid despre cum să integrați Grammarly SDK pe un client web. SDK-ul este compatibil cu clienții React, Vue.js și JavaScript simpli. De asemenea, puteți integra SDK-ul în HTML adăugând SDK-ul ca etichetă de script.

Grammarly Text Editor SDK acceptă cele mai recente versiuni ale browserelor desktop populare: Chrome, Firefox, Safari, Edge, Opera și Brave. În prezent, nu există suport pentru browserele mobile.

Integrați SDK-ul Grammarly într-un editor de text React

Primul, creați o aplicație React. Apoi, în directorul rădăcină al folderului de proiect, creați un fișier ENV care să dețină variabila de mediu: ClientID. Accesați pagina de setări web a aplicației dvs. din Consola pentru dezvoltatori ai Grammarly și copiați-vă ClientID.

REACT_APP_GRAMMARLY_CLIENT_ID= ID client

1. Instalați pachetele necesare

Rulați această comandă pe terminalul dvs. pentru a instala SDK-ul Grammarly React Text Editor în aplicația dvs.:

instalare npm @gramatical/editor-sdk-react

2. Creați un editor de text

După instalarea SDK-ului editor de text Grammarly React, creați un folder nou în directorul /src al aplicației dvs. React și denumiți-i componentele. În interiorul acestui folder, creați un fișier nou: TextEditor.js.

În fișierul TextEditor.js, adăugați codul de mai jos:

import Reacţiona din'reacţiona'
import { GrammarlyEditorPlugin } din„@grammarly/editor-sdk-react”
funcţieTextEditor() {
întoarcere (
<divnumele clasei=„Aplicație”>
<antetnumele clasei=„Aplicație antet”>
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ activare: "imediat" }}
 >
<intraresubstituent="Impartaseste-ti gandurile!!" />
GrammarlyEditorPlugin>
antet>
div>
 );
}
exportMod implicit TextEditor;

În codul de mai sus, importați GrammarlyEditorPlugin din SDK-ul Grammarly-React și includeți o etichetă de intrare cu GrammarlyEditorPlugin.

GrammarlyEditorPlugin are două proprietăți: clientID și o proprietate de configurare care setează activarea la imediată. Această proprietate activează pluginul și îl pune la dispoziția utilizatorului de îndată ce pagina se încarcă.

Dacă aveți extensia de browser Grammarly, trebuie să o dezactivați sau să o dezinstalați pentru aceasta tutorial, deoarece pluginul de pe proiectul dvs. va genera o eroare odată ce detectează extensia de pe dvs browser.

Pluginul de editor Grammarly are alte proprietăți de configurare suplimentare pe care le puteți utiliza pentru a vă personaliza editorul. Ei includ:

  • Completare automată: această proprietate completează expresii pentru utilizatorii dvs. pe măsură ce scriu.
  • ToneDetector: Acesta arată interfața detectorului de ton.

3. Redați componenta Editor de text

Adăugați codul de mai jos în fișierul dvs. app.js pentru a reda componenta editor de text:

import TextEditor din„./components/TextEditor”;
funcţieApp() {
întoarcere (
<divnumele clasei=„Aplicație”>
<antetnumele clasei=„Aplicație antet”>
<TextEditor />
antet>
div>
 );
}
exportMod implicit Aplicație;

Acum, rulați această comandă pe terminalul dvs. pentru a porni serverul de dezvoltare și pentru a vedea rezultatele în browser:

npm start

Editorul dvs. activat pentru gramatică ar trebui să arate cam așa:

Observați, ați împachetat o etichetă de intrare cu GrammarlyEditorPlugin. De asemenea, puteți împacheta un element textarea sau orice element cu atributul util contenteditable setat la „adevărat”.

Folosind o etichetă textarea:

 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ activare: "imediat" }}
>
<zona textuluisubstituent=" Impartaseste-ti gandurile!!" />
GrammarlyEditorPlugin>

Rulați această comandă pe terminalul dvs. pentru a vedea rezultatele în browser:

npm start

Apoi ar trebui să vedeți zona de text activată pentru gramatică:

Integrați cu un editor de text îmbogățit precum TinyMCE

De asemenea, puteți include un editor de text complet cu GrammarlyEditorPlugin. Grammarly Text Editor SDK este compatibil cu mai multe editoare de text îmbogățit, cum ar fi:

  • TinyMCE
  • Ardezie
  • CKEditor
  • Pană

TinyMCE este un editor de text ușor de utilizat, cu o mulțime de instrumente de formatare și editare care permit utilizatorilor să scrie și să editeze conținut într-o interfață ușor de utilizat.

Pentru a integra editorul TinyMCE într-o aplicație React cu asistentul de scriere Grammarly activat, mai întâi, accesați TinyMCE și înscrieți-vă pentru un cont de dezvoltator. Apoi, pe tabloul de bord Onboarding, furnizați o adresă URL de domeniu pentru aplicația dvs. și faceți clic pe Următorul: Continuați la tabloul de bord butonul pentru a finaliza procesul de configurare.

Pentru dezvoltarea locală, nu trebuie să specificați domeniul, deoarece adresa URL localhost este setată de implicit, totuși, odată ce expediați aplicația React în producție, trebuie să furnizați live-ul adresa URL a domeniului.

În cele din urmă, copiați cheia API din tabloul de bord pentru dezvoltatori și reveniți la proiectul dvs. în editorul de cod și adăugați cheia API în fișierul ENV pe care l-ați creat mai devreme:

REACT_APP_TINY_MCE_API_KEY=„cheie API”

Acum, mergeți la fișierul TextEditor.js și faceți următoarele modificări:

  • Efectuați următoarele importuri: 
    import Reacționează, { useRef } din'reacţiona';
    import { Editor } din„@tinymce/tinymce-react”;
    Adăugați cârligul useRef și importați componenta TinyMCE Editor din pachetul instalat.
  • În componenta funcțională, adăugați codul de mai jos: 
    const editorRef = useRef(nul);
    Cârligul useRef vă permite să persistați valorile modificabile între randări. Veți folosi variabila editorRef pentru a menține starea datelor tastate în editor.
  • În cele din urmă, returnați componenta editor din biblioteca TinyMCE: 
     apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editor) => editorRef.current = editor}
     initialValue="<p>Acesta este conținutul inițial al editorului.p>"
     init={{
     inaltime: 500,
     Bară de meniu: fals,
     pluginuri: [
    'advlist', 'autolink', 'liste', 'legătură', 'imagine', "charmap", 'previzualizare',
    'ancoră', „căutare înlocuire”, „blocuri vizuale”, 'cod', 'ecran complet',
    „insertdatetime”, 'mass-media', 'masa', 'cod', 'Ajutor', 'număr de cuvinte'
     ],
     bara de instrumente: 'undo redo | blocuri | ' +
    „culoare anterioară îndrăzneață italic | alignleft aligncenter ' +
    'alignright alignjustify | bullist numlist outdent indent | ' +
    'eliminare format | Ajutor',
     stil_conținut: 'body { font-family: Helvetica, Arial, sans-serif; dimensiunea fontului: 14px }'
     }}
    />
  • Componenta definește proprietățile editorului, adică cheia API, valoarea inițială, un obiect cu înălțimea editorului, plugin-urile și proprietățile barei de instrumente și, în sfârșit, metoda editorRef.current care atribuie valoarea parametrului „editor” la „editorRef” variabil.
  • Parametrul „editor” este un obiect eveniment care este transmis atunci când evenimentul „onInit” este declanșat.

Codul complet ar trebui să arate astfel:

import Reacționează, { useRef } din'reacţiona';
import { GrammarlyEditorPlugin } din„@grammarly/editor-sdk-react”;
import { Editor } din„@tinymce/tinymce-react”;
funcţieTextEditor() {
const editorRef = useRef(nul);
întoarcere (
<divnumele clasei=„Aplicație”>
<antetnumele clasei=„Aplicație antet”>
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={
 { activare: "imediat" }}
 >
 apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editor) => editorRef.current = editor}
 initialValue="<p>Acesta este conținutul inițial al editorului. p>"
 init={{
 inaltime: 500,
 Bară de meniu: fals,
 pluginuri: [
'advlist', 'autolink', 'liste', 'legătură', 'imagine', "charmap", 'previzualizare',
'ancoră', „căutare înlocuire”, „blocuri vizuale”, 'cod', 'ecran complet',
„insertdatetime”, 'mass-media', 'masa', 'cod', 'Ajutor', 'număr de cuvinte'
 ],
 bara de instrumente: 'undo redo | blocuri | ' +
„culoare anterioară îndrăzneață italic | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'eliminare format | Ajutor',
 stil_conținut: 'body { font-family: Helvetica, Arial, sans-serif; dimensiunea fontului: 14px }'
 }}
 />
GrammarlyEditorPlugin>
antet>
div>
 );
}
exportMod implicit TextEditor;

În acest cod, includeți componenta editor TinyMCE cu GrammarlyEditorPlugin pentru a integra caracteristica de asistență Grammarly în editorul de text TinyMCE. În cele din urmă, rotiți serverul de dezvoltare pentru a salva modificările și navigați la http://localhost: 3000 în browser pentru a vedea rezultatele.

Utilizați Grammarly pentru a îmbunătăți productivitatea utilizatorilor

SDK-ul Grammarly oferă un instrument puternic care poate ajuta la îmbunătățirea calității și acurateței conținutului dvs. într-un editor de text React.

Este ușor de integrat cu proiectele existente și oferă capabilități complete de gramatică și verificare ortografică care pot îmbunătăți experiența de scriere a utilizatorului.