Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Je li vam teško pravodobno isporučiti posao bez tipfelerskih i gramatičkih pogrešaka? To može biti stresno, posebno kada želite biti sigurni da je sve savršeno - korištenje Grammarlyja može poboljšati vašu produktivnost i iskustvo pisanja.

Grammarly je program za gramatičku provjeru i lektor utemeljen na oblaku. Otkriva i ispravlja gramatičke, pravopisne, interpunkcijske i druge pogreške u pisanju. Također nudi prijedloge za poboljšanje vokabulara koji vam pomažu poboljšati kvalitetu vašeg pisanja.

Slijedite kako biste naučili kako integrirati Grammarly u uređivač teksta izgrađen s Reactom.

Što je Grammarly za programere?

Grammarly je nadaleko poznat po svom proširenju za preglednik koje možete koristiti za ispravljanje gramatičkih pogrešaka u uređivaču teksta web stranice. Grammarly for Developers značajka je na Grammarlyju koja vam pomaže integrirati Grammarlyjeve automatizirane lekture i alate za otkrivanje plagijata u vaše web aplikacije.

instagram viewer

Sada možete koristiti Grammarly za stvaranje ugrađene značajke za uređivanje teksta u stvarnom vremenu u vašoj web aplikaciji koristeći Grammarlyjev Software Development Kit (SDK). To daje vašim korisnicima pristup svim Grammarly značajkama bez potrebe za preuzimanjem proširenja preglednika.

Napravite novu aplikaciju na Grammarly Developer Console

Postavite novu aplikaciju na Grammarly konzolu za razvojne programere slijedeći ove korake:

  1. Idite do Grammarly za programere konzolu i prijavite se za račun. Ako već imate Grammarly račun, možete ga koristiti za prijavu na konzolu.
  2. Nakon prijave, na nadzornoj ploči konzole kliknite na Nova aplikacija gumb za izradu nove aplikacije. Unesite naziv svoje aplikacije i pritisnite Stvoriti završiti proces.
  3. Zatim, u lijevom oknu nadzorne ploče svoje aplikacije odaberite mreža karticu za pregled vjerodajnica vaše aplikacije na stranici postavki web klijenta.
  4. Kopirajte dostavljeni ID klijenta. Na istoj stranici primijetite brzi vodič o tome kako integrirati Grammarly SDK na web klijentu. SDK je kompatibilan s React, Vue.js i običnim JavaScript klijentima. Također možete integrirati SDK u HTML dodavanjem SDK-a kao oznake skripte.

Grammarly Text Editor SDK podržava najnovije verzije popularnih stolnih preglednika: Chrome, Firefox, Safari, Edge, Opera i Brave. Trenutno nema podrške za mobilne preglednike.

Integrirajte Grammarlyjev SDK u uređivač teksta React

Prvi, izraditi React aplikaciju. Zatim, u korijenskom direktoriju vaše projektne mape, stvorite ENV datoteku koja će sadržavati vašu varijablu okruženja: vaš ID klijenta. Prijeđite na stranicu web postavki vaše aplikacije na Grammarly konzoli za razvojne programere i kopirajte svoj ClientID.

REACT_APP_GRAMMARLY_CLIENT_ID= ID klijenta

1. Instalirajte potrebne pakete

Pokrenite ovu naredbu na svom terminalu da biste instalirali Grammarly React Text Editor SDK u svoju aplikaciju:

npm instalirati @gramatički/editor-sdk-react

2. Napravite uređivač teksta

Nakon instaliranja SDK-a za uređivač teksta Grammarly React, stvorite novu mapu u /src direktoriju vaše React aplikacije i nazovite je komponente. Unutar ove mape stvorite novu datoteku: TextEditor.js.

U datoteku TextEditor.js dodajte kod u nastavku:

uvoz Reagirati iz'reagirati'
uvoz {GrammarlyEditorPlugin} iz'@grammarly/editor-sdk-react'
funkcijaUređivač teksta() {
povratak (
<divnaziv klase="Aplikacija">
<Zaglavljenaziv klase="Zaglavlje aplikacije">
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ aktiviranje: "odmah" }}
 >
<ulaznirezerviranog mjesta="Podijeli svoje misli!!" />
GrammarlyEditorPlugin>
Zaglavlje>
div>
 );
}
izvozzadano Uređivač teksta;

U gornjem kodu uvozite GrammarlyEditorPlugin iz Grammarly-React SDK-a i omotate ulaznu oznaku s GrammarlyEditorPlugin-om.

GrammarlyEditorPlugin ima dva svojstva: ID klijenta i svojstvo konfiguracije koje postavlja aktivaciju na trenutnu. Ovo svojstvo aktivira dodatak i čini ga dostupnim korisniku čim se stranica učita.

Ako imate proširenje preglednika Grammarly, trebate ga onemogućiti ili deinstalirati za ovo vodič budući da će dodatak na vašem projektu izbaciti pogrešku nakon što otkrije proširenje na vašem preglednik.

Grammarlyjev dodatak za uređivač ima druga dodatna svojstva konfiguracije koja možete koristiti za prilagodbu uređivača. Oni uključuju:

  • Automatsko dovršavanje: ovo svojstvo dovršava fraze za vaše korisnike dok upisuju.
  • ToneDetector: Prikazuje sučelje detektora tona.

3. Renderirajte komponentu uređivača teksta

Dodajte kod u nastavku u svoju datoteku app.js da biste prikazali komponentu uređivača teksta:

uvoz Uređivač teksta iz'./components/TextEditor';
funkcijaaplikacija() {
povratak (
<divnaziv klase="Aplikacija">
<Zaglavljenaziv klase="Zaglavlje aplikacije">
<Uređivač teksta />
Zaglavlje>
div>
 );
}
izvozzadano aplikacija;

Sada pokrenite ovu naredbu na svom terminalu kako biste pokrenuli razvojni poslužitelj i pregledali rezultate u svom pregledniku:

npm početak

Vaš uređivač s omogućenom Grammarly trebao bi izgledati otprilike ovako:

Primjetite, omotali ste oznaku unosa dodatkom GrammarlyEditorPlugin. Također možete omotati element textarea ili bilo koji element s koristan contenteditable atribut postaviti na "true".

Korištenje oznake textarea:

 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ aktiviranje: "odmah" }}
>
<tekstualno područjerezerviranog mjesta=" Podijeli svoje misli!!" />
GrammarlyEditorPlugin>

Pokrenite ovu naredbu na svom terminalu da biste vidjeli rezultate u svom pregledniku:

npm početak

Tada biste trebali vidjeti tekstualno područje s omogućenom Grammarly:

Integrirajte s uređivačem bogatog teksta kao što je TinyMCE

Također možete omotati potpuno razvijeni uređivač teksta s dodatkom GrammarlyEditorPlugin. Grammarly Text Editor SDK kompatibilan je s nekoliko uređivača obogaćenog teksta kao što su:

  • TinyMCE
  • Škriljevac
  • CKEditor
  • Pero

TinyMCE je uređivač teksta jednostavan za korištenje s puno alata za oblikovanje i uređivanje koji korisnicima omogućuju pisanje i uređivanje sadržaja unutar korisničkog sučelja.

Za integraciju TinyMCE uređivača u React aplikaciju s omogućenim Grammarly asistentom za pisanje, prvo posjetite TinyMCE i prijavite se za račun razvojnog programera. Zatim na nadzornoj ploči za uključivanje unesite URL domene za svoju aplikaciju i kliknite Sljedeće: Nastavite na nadzornu ploču gumb za završetak postupka postavljanja.

Za lokalni razvoj ne morate navesti domenu budući da URL lokalnog hosta postavlja Zadano, međutim, nakon što pošaljete svoju React aplikaciju u proizvodnju, trebate osigurati live URL domene.

Na kraju, kopirajte svoj API ključ s nadzorne ploče razvojnog programera i vratite se na svoj projekt u uređivaču koda i dodajte API ključ u ENV datoteku koju ste ranije izradili:

REACT_APP_TINY_MCE_API_KEY="API ključ"

Sada prijeđite na datoteku TextEditor.js i napravite sljedeće promjene:

  • Napravite sljedeće uvoze: 
    uvoz Reagiraj, {useRef} iz'reagirati';
    uvoz { Urednik } iz'@tinymce/tinymce-react';
    Dodajte useRef hook i uvezite TinyMCE Editor komponentu iz instaliranog paketa.
  • U funkcionalnu komponentu dodajte kod u nastavku: 
    konst editorRef = useRef(ništavan);
    UseRef hook vam omogućuje da ustrajete u promjenjivim vrijednostima između renderiranja. Koristit ćete varijablu editorRef za održavanje stanja podataka unesenih u editoru.
  • Konačno, vratite komponentu uređivača iz biblioteke TinyMCE: 
     apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editor) => editorRef.current = editor}
     početna vrijednost="<str>Ovo je početni sadržaj uređivača.str>"
     init={{
     visina: 500,
     traka izbornika: lažno,
     dodaci: [
    'advlist', 'automatsko povezivanje', 'popisi', 'veza', 'slika', 'charmap', 'pregled',
    'sidro', 'pretraži zamijeni', 'vizualni blokovi', 'kodirati', 'puni zaslon',
    'umetni datumvrijeme', 'mediji', 'stol', 'kodirati', 'Pomozite', 'Brojanje riječi'
     ],
     alatna traka: 'poništi ponovi | blokovi | ' +
    'podebljani kurziv prednja boja | poravnajlijevo poravnajcentar ' +
    'poravnati desno poravnati poravnati | bullist numlist outdent indent | ' +
    'ukloni format | Pomozite',
     content_style: 'body { obitelj-fontova: Helvetica, Arial, sans-serif; veličina fonta: 14px }'
     }}
    />
  • Komponenta definira svojstva uređivača, tj. API ključ, početnu vrijednost, objekt s visinom uređivača, dodatke i svojstva alatne trake, i na kraju editorRef.current metoda koja dodjeljuje vrijednost parametra "editor" "editorRef" varijabla.
  • Parametar "editor" je objekt događaja koji se prosljeđuje kada se pokrene događaj "onInit".

Kompletan kod bi trebao izgledati ovako:

uvoz Reagiraj, {useRef} iz'reagirati';
uvoz {GrammarlyEditorPlugin} iz'@grammarly/editor-sdk-react';
uvoz { Urednik } iz'@tinymce/tinymce-react';
funkcijaUređivač teksta() {
konst editorRef = useRef(ništavan);
povratak (
<divnaziv klase="Aplikacija">
<Zaglavljenaziv klase="Zaglavlje aplikacije">
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={
 { aktiviranje: "odmah" }}
 >
 apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editor) => editorRef.current = editor}
 početna vrijednost="<str>Ovo je početni sadržaj uređivača. str>"
 init={{
 visina: 500,
 traka izbornika: lažno,
 dodaci: [
'advlist', 'automatsko povezivanje', 'popisi', 'veza', 'slika', 'charmap', 'pregled',
'sidro', 'pretraži zamijeni', 'vizualni blokovi', 'kodirati', 'puni zaslon',
'umetni datumvrijeme', 'mediji', 'stol', 'kodirati', 'Pomozite', 'Brojanje riječi'
 ],
 alatna traka: 'poništi ponovi | blokovi | ' +
'podebljani kurziv prednja boja | poravnajlijevo poravnajcentar ' +
'poravnati desno poravnati poravnati | bullist numlist outdent indent | ' +
'ukloni format | Pomozite',
 content_style: 'body { obitelj-fontova: Helvetica, Arial, sans-serif; veličina fonta: 14px }'
 }}
 />
GrammarlyEditorPlugin>
Zaglavlje>
div>
 );
}
izvozzadano Uređivač teksta;

U ovom kodu omotavate komponentu uređivača TinyMCE s dodatkom GrammarlyEditorPlugin kako biste integrirali značajku pomoći Grammarly u uređivač teksta TinyMCE. Na kraju, zavrtite razvojni poslužitelj da biste spremili promjene i dođite do njega http://localhost: 3000 u vašem pregledniku da vidite rezultate.

Koristite Grammarly za poboljšanje korisničke produktivnosti

Grammarlyjev SDK pruža moćan alat koji može pomoći u poboljšanju kvalitete i točnosti vašeg sadržaja u uređivaču teksta React.

Lako se integrira s postojećim projektima i pruža sveobuhvatne mogućnosti gramatike i provjere pravopisa koje mogu poboljšati iskustvo pisanja korisnika.