Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Vam je težko opraviti pravočasno delo brez tipkarskih in slovničnih napak? Lahko je stresno, zlasti ko se želite prepričati, da je vse popolno – uporaba Grammarly lahko izboljša vašo produktivnost in pisno izkušnjo.

Grammarly je preverjevalnik in lektor slovnice v oblaku. Odkriva in popravlja slovnične, črkovalne, ločilne in druge pisne napake. Ponuja tudi predloge za izboljšanje besedišča, ki vam pomagajo izboljšati kakovost vašega pisanja.

Sledite, če želite izvedeti, kako integrirati Grammarly v urejevalnik besedil, zgrajen z Reactom.

Kaj je Grammarly za razvijalce?

Grammarly je splošno znan po svoji razširitvi za brskalnik, ki jo lahko uporabite za popravljanje slovničnih napak v urejevalniku besedil spletnega mesta. Grammarly for Developers je funkcija na Grammarly, ki vam pomaga integrirati orodja za samodejno lektoriranje in odkrivanje plagiatorstva Grammarly v vaše spletne aplikacije.

instagram viewer

Zdaj lahko uporabite Grammarly za ustvarjanje vgrajene funkcije za urejanje besedila v realnem času v vaši spletni aplikaciji z uporabo Grammarlyjevega kompleta za razvoj programske opreme (SDK). To vašim uporabnikom omogoča dostop do vseh funkcij Grammarly, ne da bi jim bilo treba prenesti razširitev brskalnika.

Ustvarite novo aplikacijo na Grammarly Developer Console

Nastavite novo aplikacijo na konzoli za razvijalce Grammarly, tako da sledite tem korakom:

  1. Pojdite na Grammarly za razvijalce konzolo in se prijavite za račun. Če že imate račun Grammarly, ga lahko uporabite za prijavo v konzolo.
  2. Po prijavi na nadzorni plošči konzole kliknite ikono Nova aplikacija gumb za ustvarjanje nove aplikacije. Vnesite ime svoje aplikacije in pritisnite Ustvari da končate postopek.
  3. Nato v levem podoknu nadzorne plošče aplikacije izberite Splet zavihek za ogled poverilnic vaše aplikacije na strani z nastavitvami spletnega odjemalca.
  4. Kopirajte navedeni ID odjemalca. Na isti strani si oglejte hiter vodnik o tem, kako integrirati Grammarly SDK v spletni odjemalec. SDK je združljiv z odjemalci React, Vue.js in navadnim JavaScriptom. SDK lahko integrirate tudi v HTML tako, da dodate SDK kot oznako skripta.

SDK za urejevalnik besedil Grammarly podpira najnovejše različice priljubljenih namiznih brskalnikov: Chrome, Firefox, Safari, Edge, Opera in Brave. Trenutno ni podpore za mobilne brskalnike.

Integrirajte Grammarlyjev SDK v urejevalnik besedila React

Prvič, ustvarite aplikacijo React. Nato v korenskem imeniku mape vašega projekta ustvarite datoteko ENV, ki bo vsebovala vašo spremenljivko okolja: vaš ClientID. Pojdite na stran s spletnimi nastavitvami vaše aplikacije na Grammarlyjevi konzoli za razvijalce in kopirajte svoj ClientID.

REACT_APP_GRAMMARLY_CLIENT_ID= ID odjemalca

1. Namestite zahtevane pakete

Zaženite ta ukaz na vašem terminalu, da namestite SDK za urejevalnik besedil Grammarly React v svojo aplikacijo:

namestitev npm @grammarly/editor-sdk-react

2. Ustvari urejevalnik besedila

Po namestitvi SDK-ja urejevalnika besedil Grammarly React ustvarite novo mapo v imeniku /src vaše aplikacije React in jo poimenujte komponente. Znotraj te mape ustvarite novo datoteko: TextEditor.js.

V datoteko TextEditor.js dodajte spodnjo kodo:

uvoz Reagiraj od'reagirati'
uvoz {GrammarlyEditorPlugin} od'@grammarly/editor-sdk-react'
funkcijoUrejevalnik besedil() {
vrnitev (
<divclassName="Aplikacija">
<glavaclassName="Glava aplikacije">
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ aktiviranje: "takoj" }}
 >
<vnosrezervirano mesto="Deli svoje misli!!" />
GrammarlyEditorPlugin>
glava>
div>
 );
}
izvozprivzeto Urejevalnik besedil;

V zgornji kodi uvozite GrammarlyEditorPlugin iz Grammarly-React SDK in ovijete vhodno oznako z GrammarlyEditorPlugin.

Vtičnik GrammarlyEditorPlugin ima dve lastnosti: clientID in konfiguracijsko lastnost, ki nastavi aktivacijo na takojšnjo. Ta lastnost aktivira vtičnik in ga naredi uporabniku na voljo takoj, ko se stran naloži.

Če imate razširitev brskalnika Grammarly, jo morate za to onemogočiti ali odstraniti vadnico, saj bo vtičnik v vašem projektu sprožil napako, ko bo zaznal razširitev na vašem brskalnik.

Vtičnik urejevalnika Grammarly ima druge dodatne konfiguracijske lastnosti, ki jih lahko uporabite za prilagajanje urejevalnika. Vključujejo:

  • Samodokončanje: Ta lastnost dopolnjuje besedne zveze za vaše uporabnike, medtem ko tipkajo.
  • ToneDetector: To prikazuje vmesnik detektorja tonov.

3. Upodobite komponento urejevalnika besedila

Dodajte spodnjo kodo v datoteko app.js, da upodobite komponento urejevalnika besedila:

uvoz Urejevalnik besedil od'./components/TextEditor';
funkcijoaplikacija() {
vrnitev (
<divclassName="Aplikacija">
<glavaclassName="Glava aplikacije">
<Urejevalnik besedil />
glava>
div>
 );
}
izvozprivzeto aplikacija;

Zdaj zaženite ta ukaz na svojem terminalu, da zavrtite razvojni strežnik in si ogledate rezultate v brskalniku:

npm začetek

Vaš urejevalnik, ki podpira Grammarly, bi moral izgledati nekako takole:

Upoštevajte, da ste vnosno oznako ovili z vtičnikom GrammarlyEditorPlugin. Prav tako lahko oblijete element textarea ali kateri koli element z uporabni atribut vsebine, ki ga je mogoče urejati nastavljen na "true".

Uporaba oznake textarea:

 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ aktiviranje: "takoj" }}
>
<textarearezervirano mesto="Deli svoje misli!!" />
GrammarlyEditorPlugin>

Zaženite ta ukaz na terminalu, da si ogledate rezultate v brskalniku:

npm začetek

Nato bi morali videti besedilno polje, ki podpira Grammarly:

Integracija z urejevalnikom obogatenega besedila, kot je TinyMCE

Z vtičnikom GrammarlyEditorPlugin lahko zavijete tudi popoln urejevalnik besedil. SDK za urejevalnik besedil Grammarly je združljiv z več urejevalniki obogatenega besedila, kot so:

  • TinyMCE
  • Skrilavec
  • CKEditor
  • Quill

TinyMCE je urejevalnik besedil, enostaven za uporabo, z veliko orodji za oblikovanje in urejanje, ki uporabnikom omogočajo pisanje in urejanje vsebine v uporabniku prijaznem vmesniku.

Če želite integrirati urejevalnik TinyMCE v aplikacijo React z omogočenim pomočnikom za pisanje Grammarly, najprej obiščite TinyMCE in se prijavite za račun razvijalca. Nato na nadzorni plošči Onboarding vnesite URL domene za svojo aplikacijo in kliknite Naprej: Nadaljujte na nadzorno ploščo gumb za dokončanje postopka nastavitve.

Za lokalni razvoj vam ni treba določiti domene, saj URL lokalnega gostitelja nastavi privzeto pa morate, ko aplikacijo React pošljete v produkcijo, zagotoviti živo URL domene.

Na koncu kopirajte svoj ključ API z nadzorne plošče razvijalca in se vrnite v svoj projekt v urejevalniku kode ter dodajte ključ API v datoteko ENV, ki ste jo ustvarili prej:

REACT_APP_TINY_MCE_API_KEY="API ključ"

Zdaj pa pojdite na datoteko TextEditor.js in naredite naslednje spremembe:

  • Izvedite naslednje uvoze: 
    uvoz Odziv, {useRef} od'reagirati';
    uvoz { Urednik } od'@tinymce/tinymce-react';
    Dodajte kljuko useRef in uvozite komponento TinyMCE Editor iz nameščenega paketa.
  • V funkcijski komponenti dodajte spodnjo kodo: 
    konst editorRef = useRef(nič);
    Kavelj useRef vam omogoča, da ohranite spremenljive vrednosti med upodabljanji. Za vzdrževanje stanja podatkov, vnesenih v urejevalnik, boste uporabili spremenljivko editorRef.
  • Na koncu vrnite komponento urejevalnika iz knjižnice TinyMCE: 
     apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editor) => editorRef.current = editor}
     začetniVrednost="<str>To je začetna vsebina urejevalnika.str>"
     init={{
     višina: 500,
     menijska vrstica: lažno,
     vtičniki: [
    'advlist', 'samodejna povezava', 'seznami', 'povezava', 'image', 'charmap', 'predogled',
    'sidro', 'searchreplace', 'visualblocks', 'Koda', 'celozaslonski način',
    'vstavi datum in čas', 'medij', 'table', 'Koda', 'pomoč', 'Število besed'
     ],
     orodna vrstica: 'razveljavi ponovi | bloki | ' +
    'krepka poševna prednja barva | alignleft aligncenter ' +
    'alignright alignjustify | bullist numlist odmik zamik | ' +
    'odstrani format | pomoč',
     content_style: 'body { družina pisav: Helvetica, Arial, sans-serif; velikost-pisave: 14px }'
     }}
    />
  • Komponenta definira lastnosti urejevalnika, tj. ključ API, začetno vrednost, objekt z višino urejevalnika, vtičnike in lastnosti orodne vrstice ter nazadnje metoda editorRef.current, ki dodeli vrednost parametra "editor" "editorRef" spremenljivka.
  • Parameter »urejevalnik« je objekt dogodka, ki se posreduje, ko se sproži dogodek »onInit«.

Celotna koda bi morala izgledati takole:

uvoz Odziv, {useRef} od'reagirati';
uvoz {GrammarlyEditorPlugin} od'@grammarly/editor-sdk-react';
uvoz { Urednik } od'@tinymce/tinymce-react';
funkcijoUrejevalnik besedil() {
konst editorRef = useRef(nič);
vrnitev (
<divclassName="Aplikacija">
<glavaclassName="Glava aplikacije">
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={
 { aktiviranje: "takoj" }}
 >
 apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editor) => editorRef.current = editor}
 začetniVrednost="<str>To je začetna vsebina urejevalnika. str>"
 init={{
 višina: 500,
 menijska vrstica: lažno,
 vtičniki: [
'advlist', 'samodejna povezava', 'seznami', 'povezava', 'image', 'charmap', 'predogled',
'sidro', 'searchreplace', 'visualblocks', 'Koda', 'celozaslonski način',
'vstavi datum in čas', 'medij', 'table', 'Koda', 'pomoč', 'Število besed'
 ],
 orodna vrstica: 'razveljavi ponovi | bloki | ' +
'krepka poševna prednja barva | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist odmik zamik | ' +
'odstrani format | pomoč',
 content_style: 'body { družina pisav: Helvetica, Arial, sans-serif; velikost-pisave: 14px }'
 }}
 />
GrammarlyEditorPlugin>
glava>
div>
 );
}
izvozprivzeto Urejevalnik besedil;

V tej kodi ovijete komponento urejevalnika TinyMCE z vtičnikom GrammarlyEditorPlugin, da integrirate funkcijo pomoči Grammarly v urejevalnik besedil TinyMCE. Na koncu zavrtite razvojni strežnik, da shranite spremembe in se pomaknete do njega http://localhost: 3000 v brskalniku za ogled rezultatov.

Uporabite Grammarly za izboljšanje produktivnosti uporabnikov

Grammarlyjev SDK ponuja zmogljivo orodje, ki lahko pomaga izboljšati kakovost in natančnost vaše vsebine v urejevalniku besedila React.

Enostavno ga je integrirati z obstoječimi projekti in zagotavlja celovite zmožnosti slovnice in preverjanja črkovanja, ki lahko izboljšajo uporabniško izkušnjo pisanja.