Je pre vás ťažké dodať prácu načas bez preklepov a gramatických chýb? Môže to byť stresujúce najmä vtedy, keď sa chcete uistiť, že je všetko dokonalé – používanie gramatiky môže zlepšiť vašu produktivitu a skúsenosti s písaním.
Grammarly je cloudová kontrola gramatiky a korektor. Zisťuje a opravuje gramatické, pravopisné, interpunkčné a iné chyby v písaní. Ponúka tiež návrhy na zlepšenie slovnej zásoby, ktoré vám pomôžu zlepšiť kvalitu písania.
Postupujte ďalej a zistite, ako integrovať Grammarly do textového editora vytvoreného s Reactom.
Čo je gramatika pre vývojárov?
Grammarly je široko uznávaný pre svoje rozšírenie prehliadača, ktoré môžete použiť na opravu gramatických chýb v textovom editore webových stránok. Grammarly for Developers je funkcia na Grammarly, ktorá vám pomáha integrovať automatické nástroje na korektúry a odhaľovanie plagiátov od Grammarly do vašich webových aplikácií.
Teraz môžete použiť Grammarly na vytvorenie vstavanej funkcie úpravy textu v reálnom čase do vašej webovej aplikácie pomocou súpravy Software Development Kit (SDK) od Grammarly. To umožňuje vašim používateľom prístup ku všetkým funkciám gramatiky bez toho, aby si museli sťahovať rozšírenie prehliadača.
Vytvorte novú aplikáciu v Grammarly Developer Console
Nastavte novú aplikáciu na vývojárskej konzole Grammarly podľa týchto krokov:
- Zamierte k Gramatika pre vývojárov konzolu a zaregistrujte si účet. Ak už máte účet Grammarly, môžete ho použiť na prihlásenie do konzoly.
- Po prihlásení kliknite na ovládacom paneli konzoly na Nová aplikácia tlačidlo na vytvorenie novej aplikácie. Vyplňte názov svojej aplikácie a stlačte Vytvorte dokončiť proces.
- Potom na ľavej table ovládacieho panela vašej aplikácie vyberte položku Web na zobrazenie poverení vašej aplikácie na stránke nastavení webového klienta.
- Skopírujte poskytnuté ID klienta. Na tej istej stránke si všimnite rýchly návod, ako integrovať Grammarly SDK do webového klienta. SDK je kompatibilné s klientmi React, Vue.js a obyčajným JavaScriptom. Súpravu SDK môžete tiež integrovať do kódu HTML pridaním súpravy SDK ako značky skriptu.
Súprava Grammarly Text Editor SDK podporuje najnovšie verzie populárnych prehliadačov pre stolné počítače: Chrome, Firefox, Safari, Edge, Opera a Brave. V súčasnosti neexistuje podpora pre mobilné prehliadače.
Integrujte súpravu Grammarly's SDK do textového editora React
Najprv, vytvorte aplikáciu React. Potom v koreňovom adresári priečinka projektu vytvorte súbor ENV, ktorý bude obsahovať vašu premennú prostredia: vaše ClientID. Prejdite na stránku webových nastavení vašej aplikácie v Konzole pre vývojárov Grammarly a skopírujte svoje ClientID.
REACT_APP_GRAMMARLY_CLIENT_ID= ClientID1. Nainštalujte požadované balíky
Spustite tento príkaz na svojom termináli a nainštalujte do svojej aplikácie súpravu Grammarly React Text Editor SDK:
inštalácia npm @gramatika/editor-sdk-react2. Vytvorte textový editor
Po nainštalovaní súpravy Grammarly React text editor SDK vytvorte nový priečinok v adresári /src vašej aplikácie React a pomenujte ho ako komponenty. V tomto priečinku vytvorte nový súbor: TextEditor.js.
Do súboru TextEditor.js pridajte nižšie uvedený kód:
importovať Reagovať od'reagovať'
importovať { GrammarlyEditorPlugin } od'@grammarly/editor-sdk-react'funkciuTextEditor() {
vrátiť (
<divclassName="aplikácia">
<hlavičkaclassName="Hlavička aplikácie">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktivácia: "okamžitá" }}
>
<vstupzástupný symbol="Zdieľaj svoje myšlienky!!" />
GrammarlyEditorPlugin>
hlavička>
div>
);
}
exportpredvolená TextEditor;
Vo vyššie uvedenom kóde importujete GrammarlyEditorPlugin z Grammarly-React SDK a zabalíte vstupnú značku do GrammarlyEditorPlugin.
GrammarlyEditorPlugin má dve vlastnosti: clientID a vlastnosť config, ktorá nastaví aktiváciu na okamžitú. Táto vlastnosť aktivuje doplnok a sprístupní ho používateľovi hneď po načítaní stránky.
Ak máte rozšírenie prehliadača Grammarly, musíte ho zakázať alebo odinštalovať návod, pretože doplnok vo vašom projekte vyvolá chybu, keď zistí rozšírenie na vašom projekte prehliadač.
Doplnok editora Grammarly má ďalšie dodatočné konfiguračné vlastnosti, ktoré môžete použiť na prispôsobenie editora. Zahŕňajú:
- Automatické dopĺňanie: Táto vlastnosť dopĺňa frázy vašich používateľov počas písania.
- ToneDetector: Zobrazuje rozhranie detektora tónov.
3. Vykreslite komponent textového editora
Pridajte nižšie uvedený kód do súboru app.js na vykreslenie komponentu textového editora:
importovať TextEditor od'./components/TextEditor';funkciuApp() {
vrátiť (
<divclassName="aplikácia">
<hlavičkaclassName="Hlavička aplikácie">
<TextEditor />
hlavička>
div>
);
}
exportpredvolená App;
Teraz spustite tento príkaz na svojom termináli, čím spustíte vývojový server a zobrazíte výsledky vo svojom prehliadači:
npm začaťVáš editor s podporou gramatiky by mal vyzerať asi takto:
Všimnite si, že ste zabalili vstupnú značku pomocou GrammarlyEditorPlugin. Môžete tiež zabaliť prvok textovej oblasti alebo akýkoľvek prvok pomocou užitočný atribút contenteditable nastavte na "true".
Použitie značky textarea:
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktivácia: "okamžitá" }}
>
<textareazástupný symbol=" Zdieľaj svoje myšlienky!!" />
GrammarlyEditorPlugin>Ak chcete zobraziť výsledky vo svojom prehliadači, spustite tento príkaz na svojom termináli:
npm začaťPotom by ste mali vidieť svoju textovú oblasť s povolenou gramatikou:
Integrácia s editorom formátovaného textu ako TinyMCE
Doplnkom GrammarlyEditorPlugin môžete zabaliť aj plnohodnotný textový editor. Súprava Grammarly Text Editor SDK je kompatibilná s niekoľkými editormi formátovaného textu, ako sú:
- TinyMCE
- Bridlica
- Editor CK
- Brko
TinyMCE je ľahko použiteľný textový editor s množstvom nástrojov na formátovanie a úpravu, ktoré používateľom umožňujú písať a upravovať obsah v užívateľsky prívetivom rozhraní.
Ak chcete integrovať editor TinyMCE do aplikácie React s povoleným asistentom písania gramatiky, najskôr navštívte stránku TinyMCE a zaregistrujte si účet vývojára. Ďalej na paneli Onboarding zadajte adresu URL domény pre vašu aplikáciu a kliknite na Ďalej: Pokračujte na svoj informačný panel tlačidlo na dokončenie procesu nastavenia.
Pre lokálny vývoj nemusíte špecifikovať doménu, pretože adresa URL localhost je nastavená pomocou predvolene však, keď odošlete svoju aplikáciu React do produkcie, musíte poskytnúť živú verziu URL domény.
Nakoniec skopírujte kľúč API z panela vývojára a vráťte sa do svojho projektu v editore kódu a pridajte kľúč API do súboru ENV, ktorý ste vytvorili predtým:
REACT_APP_TINY_MCE_API_KEY="API kľúč"Teraz prejdite do súboru TextEditor.js a vykonajte nasledujúce zmeny:
- Vykonajte nasledujúce importy:
Pridajte háčik useRef a importujte komponent TinyMCE Editor z nainštalovaného balíka.importovať Reagovať, { useRef } od'reagovať';
importovať { Editor } od'@tinymce/tinymce-react'; - Vo funkčnom komponente pridajte kód nižšie:
Hák useRef vám umožňuje zachovať meniteľné hodnoty medzi rendermi. Premennú editorRef použijete na udržanie stavu údajov napísaných v editore.konšt editorRef = useRef(nulový); - Nakoniec vráťte komponent editora z knižnice TinyMCE:
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, editor) => editorRef.current = editor}
initialValue="<p>Toto je počiatočný obsah editora.p>"
init={{
výška: 500,
panel s ponukami: falošný,
pluginy: [
'advlist', 'automatické prepojenie', 'zoznamy', 'link', 'image', 'charmap', 'Náhľad',
'Kotva', "vyhľadať nahradiť", 'vizuálne bloky', 'kód', 'celá obrazovka',
'insertdatetime', 'media', 'stôl', 'kód', 'Pomoc', 'počet slov'
],
panel s nástrojmi: vrátiť späť | bloky | ' +
„tučná kurzíva popredia | zarovnať doľava zarovnať na stred +
'alignright alignjustify | bullist numlist outdent zarážka | ' +
'removeformat | Pomoc',
content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 14px }'
}}
/> - Komponent definuje vlastnosti editora, t.j. kľúč API, počiatočnú hodnotu, objekt s výškou editora, pluginy a vlastnosti panela nástrojov a nakoniec metóda editorRef.current, ktorá priraďuje hodnotu parametra "editor" parametru "editorRef" premenlivý.
- Parameter "editor" je objekt udalosti, ktorý sa odovzdá pri spustení udalosti "onInit".
Kompletný kód by mal vyzerať takto:
importovať Reagovať, { useRef } od'reagovať';
importovať { GrammarlyEditorPlugin } od'@grammarly/editor-sdk-react';
importovať { Editor } od'@tinymce/tinymce-react';
funkciuTextEditor() {
konšt editorRef = useRef(nulový);
vrátiť (
<divclassName="aplikácia">
<hlavičkaclassName="Hlavička aplikácie">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={
{ aktivácia: "okamžitá" }}
>
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, editor) => editorRef.current = editor}
initialValue="<p>Toto je počiatočný obsah editora. p>"
init={{
výška: 500,
panel s ponukami: falošný,
pluginy: [
'advlist', 'automatické prepojenie', 'zoznamy', 'link', 'image', 'charmap', 'Náhľad',
'Kotva', "vyhľadať nahradiť", 'vizuálne bloky', 'kód', 'celá obrazovka',
'insertdatetime', 'media', 'stôl', 'kód', 'Pomoc', 'počet slov'
],
panel s nástrojmi: vrátiť späť | bloky | ' +
„tučná kurzíva popredia | zarovnať doľava zarovnať na stred +
'alignright alignjustify | bullist numlist outdent zarážka | ' +
'removeformat | Pomoc',
content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 14px }'
}}
/>
GrammarlyEditorPlugin>
hlavička>
div>
);
}
exportpredvolená TextEditor;
V tomto kóde zabalíte komponent editora TinyMCE s doplnkom GrammarlyEditorPlugin, aby ste integrovali funkciu pomoci Grammarly do textového editora TinyMCE. Nakoniec roztočte vývojový server, aby ste uložili zmeny a prejdite naň http://localhost: 3000 vo vašom prehliadači, aby ste videli výsledky.
Použite gramatiku na zlepšenie produktivity používateľov
Grammarly's SDK poskytuje výkonný nástroj, ktorý môže pomôcť zlepšiť kvalitu a presnosť vášho obsahu v textovom editore React.
Je ľahké ho integrovať s existujúcimi projektmi a poskytuje komplexné možnosti kontroly gramatiky a pravopisu, ktoré môžu zlepšiť používateľský zážitok z písania.
