Onko sinun vaikea tehdä töitä ajoissa ilman kirjoitus- ja kielioppivirheitä? Se voi olla stressaavaa varsinkin, kun haluat varmistaa, että kaikki on täydellistä – Grammarlyn käyttö voi parantaa tuottavuuttasi ja kirjoituskokemustasi.
Grammarly on pilvipohjainen kieliopintarkistus ja oikolukuohjelma. Se havaitsee ja korjaa kielioppi-, oikeinkirjoitus-, välimerkit ja muut kirjoitusvirheet. Se tarjoaa myös sanaston parannusehdotuksia, jotka auttavat sinua parantamaan kirjoittamasi laatua.
Seuraa ohjeita oppiaksesi integroimaan Grammarlyn Reactin avulla rakennettuun tekstieditoriin.
Mikä on Grammarly kehittäjille?
Grammarly tunnetaan laajalti selainlaajennuksesta, jonka avulla voit korjata kielioppivirheet verkkosivuston tekstieditorissa. Grammarly for Developers on Grammarlyn ominaisuus, jonka avulla voit integroida Grammarlyn automaattiset oikoluku- ja plagioinnin tunnistustyökalut verkkosovelluksiin.
Voit nyt käyttää Grammarlya luodaksesi sisäänrakennetun reaaliaikaisen tekstinmuokkausominaisuuden verkkosovellukseesi käyttämällä Grammarlyn Software Development Kit (SDK) -pakettia. Tämä antaa käyttäjillesi pääsyn kaikkiin Grammarly-ominaisuuksiin ilman, että sinun tarvitsee ladata selainlaajennusta.
Luo uusi sovellus Grammarly Developer Consolessa
Määritä uusi sovellus Grammarlyn kehittäjäkonsoliin seuraavasti:
- Suuntaa kohti Kielioppi kehittäjille konsoli ja rekisteröidy tilille. Jos sinulla on jo Grammarly-tili, voit kirjautua konsoliin sen avulla.
- Kun olet kirjautunut sisään, napsauta konsolin kojelaudassa Uusi sovellus -painiketta luodaksesi uuden sovelluksen. Täytä sovelluksesi nimi ja paina Luoda prosessin loppuun saattamiseksi.
- Valitse seuraavaksi sovelluksesi kojelaudan vasemmasta ruudusta Web -välilehti nähdäksesi sovelluksesi tunnistetiedot verkkoasiakasohjelman asetussivulla.
- Kopioi annettu asiakastunnus. Huomaa samalla sivulla oleva pikaopas Grammarly SDK: n integroimiseksi verkkoasiakkaaseen. SDK on yhteensopiva React-, Vue.js- ja tavallisten JavaScript-asiakkaiden kanssa. Voit myös integroida SDK: n HTML: ään lisäämällä SDK: n komentosarjatunnisteeksi.
Grammarly Text Editor SDK tukee suosittujen työpöytäselaimien uusimpia versioita: Chrome, Firefox, Safari, Edge, Opera ja Brave. Mobiiliselaimille ei tällä hetkellä ole tukea.
Integroi Grammarlyn SDK React-tekstieditoriin
Ensimmäinen, luo React-sovellus. Luo seuraavaksi projektikansiosi juurihakemistoon ENV-tiedosto, joka sisältää ympäristömuuttujan: ClientID. Siirry sovelluksesi Web-asetussivulle Grammarly's Developer Consolessa ja kopioi asiakastunnuksesi.
REACT_APP_GRAMMARLY_CLIENT_ID= Asiakastunnus1. Asenna tarvittavat paketit
Suorita tämä komento päätteessäsi asentaaksesi Grammarly React Text Editor SDK: n sovellukseesi:
npm asennus @kielioppi/editor-sdk-react2. Luo tekstieditori
Kun olet asentanut Grammarly React -tekstieditorin SDK: n, luo uusi kansio React-sovelluksesi /src-hakemistoon ja nimeä se komponenteiksi. Luo tähän kansioon uusi tiedosto: TextEditor.js.
Lisää TextEditor.js-tiedostoon alla oleva koodi:
tuonti Reagoi alkaen'reagoi'
tuonti { GrammarlyEditorPlugin } alkaen'@grammarly/editor-sdk-react'toimintoTekstieditori() {
palata (
<divluokan nimi="Sovellus">
<otsikkoluokan nimi="Sovelluksen otsikko">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktivointi: "välitön" }}
>
<syöttöpaikanpitäjä="Jaa ajatuksesi!!" />
GrammarlyEditorPlugin>
otsikko>
div>
);
}
viedäoletuksena Tekstieditori;
Yllä olevassa koodissa tuot GrammarlyEditorPluginin Grammarly-React SDK: sta ja käärit syöttötunnisteen GrammarlyEditorPluginilla.
GrammarlyEditorPlugin sisältää kaksi ominaisuutta: asiakastunnus ja config-ominaisuus, joka määrittää aktivoinnin välittömäksi. Tämä ominaisuus aktivoi laajennuksen ja asettaa sen käyttäjän saataville heti, kun sivu latautuu.
Jos sinulla on Grammarly-selainlaajennus, sinun on poistettava se käytöstä tai poistettava se tätä varten opetusohjelma, koska projektisi laajennus antaa virheen, kun se havaitsee laajennuksen selain.
Grammarlyn editorilaajennuksella on muita konfigurointiominaisuuksia, joita voit käyttää editorin mukauttamiseen. Ne sisältävät:
- Automaattinen täydennys: Tämä ominaisuus täydentää käyttäjiesi lauseita heidän kirjoittaessaan.
- ToneDetector: Tämä näyttää äänentunnistimen käyttöliittymän.
3. Renderöi tekstieditorikomponentti
Lisää alla oleva koodi app.js-tiedostoosi hahmontaaksesi tekstieditorikomponentin:
tuonti Tekstieditori alkaen'./components/TextEditor';toimintoSovellus() {
palata (
<divluokan nimi="Sovellus">
<otsikkoluokan nimi="Sovelluksen otsikko">
<Tekstieditori />
otsikko>
div>
);
}
viedäoletuksena Sovellus;
Suorita nyt tämä komento päätteessäsi käynnistääksesi kehityspalvelimen ja tarkastellaksesi tuloksia selaimessasi:
npm alkaaGrammarly-yhteensopivan editorin pitäisi näyttää suunnilleen tältä:
Huomaa, että kääritit syöttötunnisteen GrammarlyEditorPluginilla. Voit myös kääriä tekstialueelementin tai minkä tahansa elementin hyödyllinen contenteditable-attribuutti aseta "tosi".
Tekstialuetunnisteen käyttäminen:
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktivointi: "välitön" }}
>
<tekstialuepaikanpitäjä=" Jaa ajatuksesi!!" />
GrammarlyEditorPlugin>Suorita tämä komento päätteessäsi nähdäksesi tulokset selaimessasi:
npm alkaaSinun pitäisi sitten nähdä kielioppia tukeva tekstialue:
Integroi Rich Text -editoriin, kuten TinyMCE
Voit myös kääriä täysimittaisen tekstieditorin GrammarlyEditorPluginilla. Grammarly Text Editor SDK on yhteensopiva useiden RTF-editorien kanssa, kuten:
- TinyMCE
- Liuskekivi
- CKE-editori
- Sulkakynä
TinyMCE on helppokäyttöinen tekstieditori, jossa on paljon muotoilu- ja muokkaustyökaluja, joiden avulla käyttäjät voivat kirjoittaa ja muokata sisältöä käyttäjäystävällisessä käyttöliittymässä.
Integroidaksesi TinyMCE: n editorin React-sovellukseen, jossa Grammarly-kirjoitusavustaja on käytössä, vieraile ensin osoitteessa TinyMCE ja rekisteröidy kehittäjätilille. Anna seuraavaksi Onboarding-hallintapaneelissa verkkotunnuksen URL-osoite sovelluksellesi ja napsauta Seuraavaksi: jatka kojelautaan -painiketta lopettaaksesi asennusprosessin.
Paikallista kehitystä varten sinun ei tarvitse määrittää verkkotunnusta, koska localhost-URL-osoitteen määrittää Oletusarvoisesti kuitenkin, kun lähetät React-sovelluksesi tuotantoon, sinun on toimitettava live verkkotunnuksen URL-osoite.
Lopuksi kopioi API-avain kehittäjän hallintapaneelista ja palaa projektiisi koodieditorillasi ja lisää API-avain aiemmin luomaasi ENV-tiedostoon:
REACT_APP_TINY_MCE_API_KEY="API-avain"Siirry nyt TextEditor.js-tiedostoosi ja tee seuraavat muutokset:
- Tee seuraavat tuonnit:
Lisää useRef-koukku ja tuo TinyMCE Editor -komponentti asennetusta paketista.tuonti Reagoi, { useRef } alkaen'reagoi';
tuonti { Editor } alkaen"@tinymce/tinymce-react"; - Lisää toiminnalliseen komponenttiin alla oleva koodi:
UseRef-koukun avulla voit säilyttää muuttuvia arvoja renderöintien välillä. Käytät editorRef-muuttujaa ylläpitämään editoriin kirjoitettujen tietojen tilaa.konst editorRef = useRef(tyhjä); - Palauta lopuksi editorikomponentti TinyMCE-kirjastosta:
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, editor) => editorRef.current = editor}
aloitusarvo="<s>Tämä on editorin alkuperäinen sisältö.s>"
init={{
Korkeus: 500,
valikkopalkki: väärä,
lisäosat: [
'advlist', "autolink", "listat", 'linkki', 'kuva', 'charmap', "esikatselu",
'ankkuri', "hae korvaa", "visuaaliset lohkot", 'koodi', 'koko näyttö',
'insertdatetime', "media", 'pöytä', 'koodi', 'auta', 'sanamäärä'
],
työkalupalkki: 'kumoa uudelleen | lohkot | ' +
'lihavoitu kursiivi etuväri | alignleft aligncenter +
'alignright alignjustify | bullist numlist outdent luetelmakohta | ' +
'removeformat | auta',
content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 14px }'
}}
/> - Komponentti määrittelee editorin ominaisuudet eli API-avaimen, alkuarvon, objektin editorin korkeudella, laajennukset ja työkalupalkin ominaisuudet ja lopuksi editorRef.current-metodi, joka määrittää "editor"-parametrin arvon "editorRef":lle muuttuja.
- "Editointi"-parametri on tapahtumaobjekti, joka välitetään, kun "onInit"-tapahtuma käynnistetään.
Koko koodin pitäisi näyttää tältä:
tuonti Reagoi, { useRef } alkaen'reagoi';
tuonti { GrammarlyEditorPlugin } alkaen'@grammarly/editor-sdk-react';
tuonti { Editor } alkaen"@tinymce/tinymce-react";
toimintoTekstieditori() {
konst editorRef = useRef(tyhjä);
palata (
<divluokan nimi="Sovellus">
<otsikkoluokan nimi="Sovelluksen otsikko">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={
{ aktivointi: "välitön" }}
>
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, editor) => editorRef.current = editor}
aloitusarvo="<s>Tämä on editorin alkuperäinen sisältö. s>"
init={{
Korkeus: 500,
valikkopalkki: väärä,
lisäosat: [
'advlist', "autolink", "listat", 'linkki', 'kuva', 'charmap', "esikatselu",
'ankkuri', "hae korvaa", "visuaaliset lohkot", 'koodi', 'koko näyttö',
'insertdatetime', "media", 'pöytä', 'koodi', 'auta', 'sanamäärä'
],
työkalupalkki: 'kumoa uudelleen | lohkot | ' +
'lihavoitu kursiivi etuväri | alignleft aligncenter +
'alignright alignjustify | bullist numlist outdent luetelmakohta | ' +
'removeformat | auta',
content_style: 'body { font-family: Helvetica, Arial, sans-serif; font-size: 14px }'
}}
/>
GrammarlyEditorPlugin>
otsikko>
div>
);
}
viedäoletuksena Tekstieditori;
Tässä koodissa kääritään TinyMCE-editorikomponentti GrammarlyEditorPluginiin integroidaksesi Grammarly-apuominaisuuden TinyMCE-tekstieditoriin. Pyöritä lopuksi kehityspalvelin tallentaaksesi muutokset ja siirtyäksesi kohteeseen http://localhost: 3000 selaimessasi nähdäksesi tulokset.
Käytä Grammarlya käyttäjien tuottavuuden parantamiseen
Grammarlyn SDK tarjoaa tehokkaan työkalun, joka voi auttaa parantamaan sisältösi laatua ja tarkkuutta React-tekstieditorissa.
Se on helppo integroida olemassa oleviin projekteihin, ja se tarjoaa kattavat kielioppi- ja oikolukuominaisuudet, jotka voivat parantaa käyttäjän kirjoituskokemusta.
