Kas teil on raske õigeaegselt tööd teha ilma kirja- ja grammatikavigu tegemata? See võib olla stressirohke, eriti kui soovite veenduda, et kõik on täiuslik – Grammarly kasutamine võib parandada teie tootlikkust ja kirjutamiskogemust.
Grammarly on pilvepõhine grammatika- ja korrektor. See tuvastab ja parandab grammatika-, õigekirja-, kirjavahemärkide ja muid kirjavigu. Samuti pakub see sõnavara täiendamise soovitusi, mis aitavad teil oma kirjutamise kvaliteeti parandada.
Järgige teksti, et õppida, kuidas integreerida Grammarly Reactiga loodud tekstiredaktorisse.
Mis on Grammarly arendajatele?
Grammarly on laialdaselt tunnustatud oma brauseri laienduse poolest, mida saate kasutada veebisaidi tekstiredaktoris grammatiliste vigade parandamiseks. Grammarly for Developers on Grammarly funktsioon, mis aitab teil integreerida Grammarly automatiseeritud korrektuuri- ja plagiaadituvastustööriistad oma veebirakendustesse.
Nüüd saate Grammarly abil luua oma veebirakendusse sisseehitatud reaalajas teksti redigeerimise funktsiooni, kasutades Grammarly tarkvaraarenduskomplekti (SDK). See annab teie kasutajatele juurdepääsu kõigile Grammarly funktsioonidele, ilma et peaksite brauseri laiendust alla laadima.
Looge Grammarly arendajakonsoolis uus rakendus
Seadistage Grammarly arendajakonsoolis uus rakendus, järgides neid samme.
- Suunduge poole Grammatika arendajatele konsooli ja registreerige konto. Kui teil juba on Grammarly konto, saate seda kasutada konsooli sisselogimiseks.
- Pärast sisselogimist klõpsake konsooli armatuurlaual Uus rakendus nuppu uue rakenduse loomiseks. Sisestage oma rakenduse nimi ja klõpsake nuppu Loo protsessi lõpetamiseks.
- Järgmisena valige oma rakenduse armatuurlaua vasakul paanil võrk vahekaarti, et vaadata oma rakenduse mandaate veebikliendi seadete lehel.
- Kopeerige antud kliendi ID. Samal lehel vaadake lühijuhendit, kuidas integreerida Grammarly SDK veebikliendisse. SDK ühildub Reacti, Vue.js-i ja tavaliste JavaScripti klientidega. Samuti saate SDK HTML-i integreerida, lisades SDK skriptimärgendina.
Grammarly Text Editor SDK toetab populaarsete lauaarvuti brauserite uusimaid versioone: Chrome, Firefox, Safari, Edge, Opera ja Brave. Mobiilibrauserite tugi praegu puudub.
Integreerige Grammarly SDK Reacti tekstiredaktorisse
Esiteks looge rakendus React. Järgmisena looge oma projektikausta juurkataloogis keskkonnamuutuja hoidmiseks ENV-fail: teie kliendi ID. Minge oma rakenduse veebiseadete lehele Grammarly's Developer Console'is ja kopeerige oma ClientID.
REACT_APP_GRAMMARLY_CLIENT_ID= Kliendi ID1. Installige nõutavad paketid
Käivitage oma terminalis see käsk, et installida oma rakendusse Grammarly Reacti tekstiredaktori SDK:
npm installimine @grammarly/editor-sdk-react2. Loo tekstiredaktor
Pärast Grammarly Reacti tekstiredaktori SDK installimist looge oma Reacti rakenduse kataloogis /src uus kaust ja nimetage see komponentideks. Looge selles kaustas uus fail: TextEditor.js.
Lisage faili TextEditor.js allolev kood:
importida Reageerige alates'reageeri'
importida { GrammarlyEditorPlugin } alates'@grammarly/editor-sdk-react'funktsiooniTekstiredaktor() {
tagasi (
<divklassi nimi="Rakendus">
<päisklassi nimi="Rakenduse päis">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktiveerimine: "kohene" }}
>
<sisendkohatäide="Jagage oma mõtteid!!" />
GrammarlyEditorPlugin>
päis>
div>
);
}
eksportidavaikimisi tekstiredaktor;
Ülaltoodud koodis impordite GrammarlyEditorPlugini Grammarly-React SDK-st ja mähite sisendmärgendi GrammarlyEditorPluginiga.
GrammarlyEditorPlugin sisaldab kahte atribuuti: kliendi ID ja konfiguratsiooni atribuut, mis määrab aktiveerimise koheseks. See atribuut aktiveerib pistikprogrammi ja teeb selle kasutajale kättesaadavaks kohe, kui leht laadib.
Kui teil on Grammarly brauserilaiend, peate selle selleks keelama või desinstallima õpetus, kuna teie projekti pistikprogramm annab teie laienduse tuvastamisel vea brauser.
Grammarly redaktori pistikprogrammil on muid täiendavaid konfiguratsiooniatribuute, mida saate redaktori kohandamiseks kasutada. Nad sisaldavad:
- Automaatne täitmine: see atribuut lõpetab teie kasutajate jaoks teksti sisestamise ajal fraase.
- ToneDetector: see näitab toonidetektori liidest.
3. Renderdage tekstiredaktori komponent
Tekstiredaktori komponendi renderdamiseks lisage faili app.js allolev kood.
importida Tekstiredaktor alates'./components/TextEditor';funktsiooniRakendus() {
tagasi (
<divklassi nimi="Rakendus">
<päisklassi nimi="Rakenduse päis">
<Tekstiredaktor />
päis>
div>
);
}
eksportidavaikimisi Rakendus;
Nüüd käivitage see käsk oma terminalis, et käivitada arendusserver ja vaadata tulemusi oma brauseris:
npm alustadaTeie Grammarly-toega redaktor peaks välja nägema umbes selline:
Pange tähele, et mähkisite sisendmärgendi GrammarlyEditorPluginiga. Sellega saate mähkida ka tekstiala elemendi või mis tahes elemendi kasulik sisu muudetav atribuut seatud väärtusele "tõene".
Tekstiala märgendi kasutamine:
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktiveerimine: "kohene" }}
>
<tekstialakohatäide="Jagage oma mõtteid!!" />
GrammarlyEditorPlugin>Käivitage see käsk terminalis, et vaadata brauseris tulemusi:
npm alustadaSeejärel peaksite nägema oma Grammarly-toega tekstiala:
Integreerige rikastekstiredaktoriga nagu TinyMCE
GrammarlyEditorPluginiga saate ümbritseda ka täieõigusliku tekstiredaktoriga. Grammarly Text Editor SDK ühildub mitme rikastekstiredaktoriga, näiteks:
- TinyMCE
- Kiltkivi
- CKE-redaktor
- Quill
TinyMCE on hõlpsasti kasutatav tekstiredaktor, millel on palju vormindamis- ja redigeerimistööriistu, mis võimaldavad kasutajatel kasutajasõbralikus liideses sisu kirjutada ja redigeerida.
TinyMCE redaktori integreerimiseks Reacti rakendusse, kus Grammarly kirjutamisassistent on lubatud, külastage esmalt TinyMCE ja registreerige arendajakonto. Järgmisena sisestage sisseehitamise armatuurlaual oma rakenduse domeeni URL ja klõpsake nuppu Järgmine: liikuge oma armatuurlauale nuppu häälestusprotsessi lõpetamiseks.
Kohaliku arenduse jaoks ei pea te domeeni määrama, kuna kohaliku hosti URL-i määrab vaikimisi, kuid kui saadate oma Reacti rakenduse tootmisse, peate esitama reaalajas rakenduse domeeni URL.
Lõpuks kopeerige oma API võti arendaja armatuurlaualt ja minge tagasi oma projekti juurde koodiredaktoris ning lisage API võti varem loodud ENV-faili:
REACT_APP_TINY_MCE_API_KEY="API võti"Nüüd minge oma faili TextEditor.js ja tehke järgmised muudatused.
- Tehke järgmised impordid:
Lisage konks useRef ja importige installitud paketist TinyMCE Editori komponent.importida Reageerige, { useRef } alates'reageeri';
importida { Toimetaja } alates"@tinymce/tinymce-react"; - Funktsionaalses komponendis lisage allolev kood:
Konks useRef võimaldab teil renderduste vahel säilitada muutuvaid väärtusi. Redaktorisse sisestatud andmete oleku säilitamiseks kasutate muutujat editorRef.konst editorRef = useRef(null); - Lõpuks tagastage redaktori komponent TinyMCE teegist:
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, toimetaja) => editorRef.current = toimetaja}
esialgne väärtus="<lk>See on toimetaja esialgne sisu.lk>"
init={{
kõrgus: 500,
menüüriba: vale,
pluginad: [
'advlist', "automaatne link", 'loendid', 'link', 'pilt', 'charmap', 'eelvaade',
'ankur', 'otsi asendust', "visuaalsed plokid", 'kood', 'Täisekraan',
'insertdatetime', "meedia", 'laud', 'kood', 'abi', 'sõnade arv'
],
tööriistariba: 'võta uuesti tagasi | plokid | ' +
'paks kaldkiri eesvärv | joonda vasakule joonduskeskus ' +
'joonda paremale joondada õigustada | bullist numlist outdent taane | ' +
'removeformat | aita',
content_style: 'body { font-family: Helvetica, Arial, sans-serif; fondi suurus: 14 pikslit }'
}}
/> - Komponent määrab redaktori omadused, st API võtme, algväärtuse, redaktori kõrgusega objekti, pluginad ja tööriistariba atribuudid ning lõpuks meetod editorRef.current, mis määrab parameetri "editor" väärtuse "editorRef"-le muutuv.
- Parameeter "editor" on sündmuse objekt, mis edastatakse sündmuse "onInit" käivitamisel.
Täielik kood peaks välja nägema selline:
importida Reageerige, { useRef } alates'reageeri';
importida { GrammarlyEditorPlugin } alates'@grammarly/editor-sdk-react';
importida { Toimetaja } alates"@tinymce/tinymce-react";
funktsiooniTekstiredaktor() {
konst editorRef = useRef(null);
tagasi (
<divklassi nimi="Rakendus">
<päisklassi nimi="Rakenduse päis">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={
{ aktiveerimine: "kohene" }}
>
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, toimetaja) => editorRef.current = toimetaja}
esialgne väärtus="<lk>See on toimetaja esialgne sisu. lk>"
init={{
kõrgus: 500,
menüüriba: vale,
pluginad: [
'advlist', "automaatne link", 'loendid', 'link', 'pilt', 'charmap', 'eelvaade',
'ankur', 'otsi asendust', "visuaalsed plokid", 'kood', 'Täisekraan',
'insertdatetime', "meedia", 'laud', 'kood', 'abi', 'sõnade arv'
],
tööriistariba: 'võta uuesti tagasi | plokid | ' +
'paks kaldkiri eesvärv | joonda vasakule joonduskeskus ' +
'joonda paremale joondada õigustada | bullist numlist outdent taane | ' +
'removeformat | aita',
content_style: 'body { font-family: Helvetica, Arial, sans-serif; fondi suurus: 14 pikslit }'
}}
/>
GrammarlyEditorPlugin>
päis>
div>
);
}
eksportidavaikimisi tekstiredaktor;
Selles koodis mähite TinyMCE redaktori komponendi GrammarlyEditorPluginiga, et integreerida TinyMCE tekstiredaktorisse Grammarly abifunktsioon. Lõpuks keerake arendusserver üles, et muudatused salvestada ja sinna navigeerida http://localhost: 3000 brauseris tulemuste vaatamiseks.
Grammarly kasutamine kasutajate tootlikkuse parandamiseks
Grammarly SDK pakub võimsat tööriista, mis aitab parandada teie sisu kvaliteeti ja täpsust Reacti tekstiredaktoris.
Seda on lihtne olemasolevate projektidega integreerida ning see pakub terviklikke grammatika- ja õigekirjakontrolli võimalusi, mis võivad kasutaja kirjutamiskogemust parandada.
