Ar jums sunku laiku atlikti darbą nepadarant rašybos ir gramatikos klaidų? Tai gali sukelti įtampą, ypač kai norite įsitikinti, kad viskas yra tobula – „Grammarly“ naudojimas gali pagerinti jūsų produktyvumą ir rašymo patirtį.
Grammarly yra debesies pagrindu veikianti gramatikos tikrintuvas ir korektūra. Jis aptinka ir ištaiso gramatikos, rašybos, skyrybos ir kitas rašymo klaidas. Taip pat siūlomi žodyno tobulinimo pasiūlymai, kurie padės pagerinti rašymo kokybę.
Sekite kartu ir sužinokite, kaip integruoti „Grammarly“ į teksto rengyklę, sukurtą naudojant „React“.
Kas yra gramatika kūrėjams?
Grammarly yra plačiai žinomas dėl savo naršyklės plėtinio, kurį galite naudoti gramatinėms klaidoms ištaisyti svetainės teksto rengyklėje. „Grammarly for Developers“ yra „Grammarly“ funkcija, padedanti integruoti „Grammarly“ automatinius korektūros ir plagiato aptikimo įrankius į žiniatinklio programas.
Dabar galite naudoti „Grammarly“, kad sukurtumėte integruotą teksto redagavimo realiuoju laiku funkciją savo žiniatinklio programoje naudodami „Grammarly“ programinės įrangos kūrimo rinkinį (SDK). Tai suteikia vartotojams prieigą prie visų „Grammarly“ funkcijų neatsisiunčiant naršyklės plėtinio.
Sukurkite naują programą „Grammarly Developer Console“.
Nustatykite naują programą „Grammarly“ kūrėjų pulte atlikdami šiuos veiksmus:
- Eikite į Gramatika kūrėjams pultą ir prisiregistruokite prie paskyros. Jei jau turite Grammarly paskyrą, galite ją naudoti norėdami prisijungti prie konsolės.
- Prisijungę konsolės prietaisų skydelyje spustelėkite Nauja programėlė mygtuką, kad sukurtumėte naują programą. Įveskite savo programos pavadinimą ir paspauskite Sukurti užbaigti procesą.
- Tada kairėje programos prietaisų skydelio srityje pasirinkite Žiniatinklis skirtuką, kad peržiūrėtumėte programos kredencialus žiniatinklio kliento nustatymų puslapyje.
- Nukopijuokite pateiktą kliento ID. Tame pačiame puslapyje atkreipkite dėmesį į trumpą vadovą, kaip integruoti Grammarly SDK žiniatinklio kliente. SDK suderinamas su „React“, „Vue.js“ ir paprastais „JavaScript“ klientais. Taip pat galite integruoti SDK į HTML pridėdami SDK kaip scenarijaus žymą.
„Grammarly Text Editor“ SDK palaiko naujausias populiarių darbalaukio naršyklių versijas: „Chrome“, „Firefox“, „Safari“, „Edge“, „Opera“ ir „Brave“. Šiuo metu mobiliosios naršyklės nepalaikomos.
Integruokite „Grammarly“ SDK į „React“ teksto rengyklę
Pirmas, sukurti „React“ programą. Tada projekto aplanko šakniniame kataloge sukurkite ENV failą, kuriame bus jūsų aplinkos kintamasis: jūsų kliento ID. Eikite į savo programos žiniatinklio nustatymų puslapį „Grammarly's Developer Console“ ir nukopijuokite savo ClientID.
REACT_APP_GRAMMARLY_CLIENT_ID= Kliento ID1. Įdiekite reikiamus paketus
Vykdykite šią komandą savo terminale, kad įdiegtumėte „Grammarly React Text Editor“ SDK programoje:
npm diegimas @grammarly/editor-sdk-react2. Sukurkite teksto rengyklę
Įdiegę „Grammarly React“ teksto rengyklės SDK, sukurkite naują aplanką „React“ programos kataloge /src ir pavadinkite jį komponentais. Šiame aplanke sukurkite naują failą: TextEditor.js.
Failo TextEditor.js pridėkite toliau pateiktą kodą:
importuoti Reaguoti iš'reaguoti'
importuoti { GrammarlyEditorPlugin } iš„@grammarly/editor-sdk-react“funkcijaTeksto redaktorius() {
grąžinti (
<divklasės pavadinimas="Programėlė">
<antraštęklasės pavadinimas="Programos antraštė">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktyvinimas: "nedelsiant" }}
>
<įvestisvietos rezervuaras="Pasidalinkite savo mintimis!!" />
GrammarlyEditorPlugin>
antraštę>
div>
);
}
eksportuotinumatytas Teksto redaktorius;
Aukščiau pateiktame kode importuojate „GrammarlyEditorPlugin“ iš „Grammarly-React“ SDK ir įvesties žymą supakuojate su „GrammarlyEditorPlugin“.
„GrammarlyEditorPlugin“ turi dvi ypatybes: kliento ID ir konfigūracijos ypatybę, kuri nustato aktyvavimą nedelsiant. Ši savybė suaktyvina papildinį ir padaro jį prieinamą vartotojui, kai tik puslapis įkeliamas.
Jei turite „Grammarly“ naršyklės plėtinį, turite jį išjungti arba pašalinti pamoka, nes jūsų projekto papildinys parodys klaidą, kai aptiks jūsų plėtinį naršyklė.
„Grammarly“ redaktoriaus papildinys turi kitų papildomų konfigūracijos ypatybių, kurias galite naudoti norėdami tinkinti redaktorių. Jie įtraukia:
- Automatinis užbaigimas: ši nuosavybė užbaigia jūsų naudotojų frazes jiems rašant.
- ToneDetector: Tai rodo tonų detektoriaus sąsają.
3. Pateikite teksto rengyklės komponentą
Pridėkite toliau pateiktą kodą į failą app.js, kad pateiktumėte teksto rengyklės komponentą:
importuoti Teksto redaktorius iš„./components/TextEditor“;funkcijaProgramėlė() {
grąžinti (
<divklasės pavadinimas="Programėlė">
<antraštęklasės pavadinimas="Programos antraštė">
<Teksto redaktorius />
antraštę>
div>
);
}
eksportuotinumatytas Programėlė;
Dabar paleiskite šią komandą savo terminale, kad sukurtumėte kūrimo serverį ir peržiūrėtumėte rezultatus naršyklėje:
npm pradėtiJūsų gramatikos redaktorius turėtų atrodyti maždaug taip:
Atkreipkite dėmesį, kad įvesties žymą supakavote su GrammarlyEditorPlugin. Taip pat galite apvynioti tekstinės srities elementą arba bet kurį elementą naudingas turinio turinio atributas nustatyti į „tiesa“.
Tekstinės srities žymos naudojimas:
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktyvinimas: "nedelsiant" }}
>
<teksto sritisvietos rezervuaras="Pasidalinkite savo mintimis!!" />
GrammarlyEditorPlugin>Paleiskite šią komandą savo terminale, kad peržiūrėtumėte rezultatus naršyklėje:
npm pradėtiTada turėtumėte pamatyti teksto sritį, kurioje įgalinta gramatika:
Integruokite su raiškiojo teksto redaktoriumi, pavyzdžiui, „TinyMCE“.
Taip pat galite apvynioti visavertį teksto rengyklę naudodami „GrammarlyEditorPlugin“. Grammarly Text Editor SDK yra suderinamas su keliais raiškiojo teksto rengyklėmis, pvz.:
- TinyMCE
- Šiferis
- CKE redaktorius
- Quill
TinyMCE yra paprasta naudoti teksto rengyklė su daugybe formatavimo ir redagavimo įrankių, leidžiančių vartotojams rašyti ir redaguoti turinį patogioje sąsajoje.
Norėdami integruoti TinyMCE redaktorių į „React“ programą su įjungtu „Grammarly“ rašymo asistentu, pirmiausia apsilankykite TinyMCE ir prisiregistruoti gauti kūrėjo paskyrą. Tada „Onboarding“ informacijos suvestinėje pateikite savo programos domeno URL ir spustelėkite Kitas: eikite į savo prietaisų skydelį mygtuką, kad užbaigtumėte sąrankos procesą.
Vietiniam plėtrai nereikia nurodyti domeno, nes vietinės prieglobos URL nustato numatytuosius nustatymus, tačiau kai išsiųsite „React“ programą į gamybinę versiją, turite pateikti tiesioginę domeno URL.
Galiausiai nukopijuokite API raktą iš kūrėjo prietaisų skydelio ir grįžkite į projektą savo kodo rengyklėje ir pridėkite API raktą į anksčiau sukurtą ENV failą:
REACT_APP_TINY_MCE_API_KEY="API raktas"Dabar eikite į failą TextEditor.js ir atlikite šiuos pakeitimus:
- Atlikite šiuos importavimo veiksmus:
Pridėkite „useRef“ kabliuką ir importuokite „TinyMCE Editor“ komponentą iš įdiegto paketo.importuoti Reaguoti, { useRef } iš'reaguoti';
importuoti { Redaktorius } iš„@tinymce/tinymce-react“; - Funkciniame komponente pridėkite toliau esantį kodą:
„useRef Hook“ leidžia išlaikyti kintamas reikšmes tarp pateikimų. Norėdami išlaikyti redaktoriuje įvestų duomenų būseną, naudosite editorRef kintamąjį.konst editorRef = useRef(nulinis); - Galiausiai grąžinkite redaktoriaus komponentą iš TinyMCE bibliotekos:
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, redaktorius) => redaktoriusRef.current = redaktorius}
pradinė vertė="<p>Tai yra pradinis redaktoriaus turinys.p>"
init={{
aukštis: 500,
meniu juosta: klaidinga,
papildiniai: [
'advlist', "automatinė nuoroda", "sąrašai", 'nuoroda', 'vaizdas', 'charmap', 'peržiūra',
"inkaras", 'searchplace', "vizualiniai blokai", 'kodas', 'per visą ekraną',
'insertdatetime', "žiniasklaida", "stalas", 'kodas', 'pagalba', 'žodžių skaičius'
],
įrankių juosta: 'anuliuoti perdarymą | blokeliai | ' +
'pusjuodis kursyvas priekinė spalva | lygiuoti į kairę lygiavimo centrą +
'sulyginti į dešinę išlyginti išlyginti | bullist numlist outdent įtrauka | ' +
'pašalinti formatą | padėti',
content_style: 'body { font-family: Helvetica, Arial, sans-serif; šrifto dydis: 14 pikselių }'
}}
/> - Komponentas apibrėžia redaktoriaus ypatybes, ty API raktą, pradinę reikšmę, objektą su redaktoriaus aukščiu, papildinius ir įrankių juostos ypatybes, ir galiausiai metodą editorRef.current, kuris priskiria parametro "editor" reikšmę "editorRef" kintamasis.
- Parametras „Redaktorius“ yra įvykio objektas, kuris perduodamas, kai suaktyvinamas „onInit“ įvykis.
Visas kodas turėtų atrodyti taip:
importuoti Reaguoti, { useRef } iš'reaguoti';
importuoti { GrammarlyEditorPlugin } iš„@grammarly/editor-sdk-react“;
importuoti { Redaktorius } iš„@tinymce/tinymce-react“;
funkcijaTeksto redaktorius() {
konst editorRef = useRef(nulinis);
grąžinti (
<divklasės pavadinimas="Programėlė">
<antraštęklasės pavadinimas="Programos antraštė">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={
{ aktyvinimas: "nedelsiant" }}
>
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, redaktorius) => redaktoriusRef.current = redaktorius}
pradinė vertė="<p>Tai yra pradinis redaktoriaus turinys. p>"
init={{
aukštis: 500,
meniu juosta: klaidinga,
papildiniai: [
'advlist', "automatinė nuoroda", "sąrašai", 'nuoroda', 'vaizdas', 'charmap', 'peržiūra',
"inkaras", 'searchplace', "vizualiniai blokai", 'kodas', 'per visą ekraną',
'insertdatetime', "žiniasklaida", "stalas", 'kodas', 'pagalba', 'žodžių skaičius'
],
įrankių juosta: 'anuliuoti perdarymą | blokeliai | ' +
'pusjuodis kursyvas priekinė spalva | lygiuoti į kairę lygiavimo centrą +
'sulyginti į dešinę išlyginti išlyginti | bullist numlist outdent įtrauka | ' +
'pašalinti formatą | padėti',
content_style: 'body { font-family: Helvetica, Arial, sans-serif; šrifto dydis: 14 pikselių }'
}}
/>
GrammarlyEditorPlugin>
antraštę>
div>
);
}
eksportuotinumatytas Teksto redaktorius;
Šiame kode „TinyMCE“ redaktoriaus komponentą apjungiate su „GrammarlyEditorPlugin“, kad integruotumėte „Grammarly“ pagalbos funkciją „TinyMCE“ teksto rengyklėje. Galiausiai sukite kūrimo serverį, kad išsaugotumėte pakeitimus ir eitumėte į http://localhost: 3000 naršyklėje, kad pamatytumėte rezultatus.
Naudokite Grammarly, kad pagerintumėte vartotojų produktyvumą
„Grammarly“ SDK yra galingas įrankis, galintis padėti pagerinti „React“ teksto rengyklės turinio kokybę ir tikslumą.
Tai lengva integruoti su esamais projektais ir suteikia išsamias gramatikos ir rašybos tikrinimo galimybes, kurios gali pagerinti vartotojo rašymo patirtį.
