Lesere som deg er med på å støtte MUO. Når du foretar et kjøp ved å bruke lenker på nettstedet vårt, kan vi tjene en tilknyttet provisjon. Les mer.

Synes du det er vanskelig å levere rettidig arbeid uten å skrive feil og grammatikkfeil? Det kan være stressende, spesielt når du vil sørge for at alt er perfekt – bruk av Grammarly kan forbedre produktiviteten og skriveopplevelsen.

Grammarly er en skybasert grammatikksjekker og korrekturleser. Den oppdager og korrigerer grammatikk, stavefeil, tegnsetting og andre skrivefeil. Den tilbyr også forslag til forbedring av ordforråd som hjelper deg med å forbedre kvaliteten på skrivingen din.

Følg med for å lære hvordan du integrerer Grammarly i et tekstredigeringsprogram bygget med React.

Hva er grammatikk for utviklere?

Grammarly er anerkjent for sin nettleserutvidelse som du kan bruke til å korrigere grammatiske feil i et nettsteds tekstredigerer. Grammarly for Developers er en funksjon på Grammarly som hjelper deg med å integrere Grammarlys automatiserte korrekturlesing og plagieringsdeteksjonsverktøy i nettapplikasjonene dine.

instagram viewer

Du kan nå bruke Grammarly til å lage en innebygd sanntidstekstredigeringsfunksjon i nettapplikasjonen din ved å bruke Grammarlys Software Development Kit (SDK). Dette gir brukerne dine tilgang til alle Grammarly-funksjoner uten å måtte laste ned nettleserutvidelsen.

Opprett en ny applikasjon på Grammarly Developer Console

Sett opp en ny applikasjon på Grammarlys utviklerkonsoll ved å følge disse trinnene:

  1. Gå over til Grammatikk for utviklere konsollen og registrer deg for en konto. Hvis du allerede har en Grammarly-konto, kan du bruke den til å logge på konsollen.
  2. Etter pålogging klikker du på konsollens dashbord Ny app knappen for å opprette en ny applikasjon. Fyll inn navnet på appen din og trykk Skape for å fullføre prosessen.
  3. Deretter velger du i venstre rute på programmets dashbord Web for å se applikasjonens påloggingsinformasjon på nettklientinnstillingssiden.
  4. Kopier oppgitt klient-ID. På samme side kan du legge merke til hurtigveiledningen for hvordan du integrerer Grammarly SDK på en nettklient. SDK-en er kompatibel med React, Vue.js og vanlige JavaScript-klienter. Du kan også integrere SDK-en i HTML ved å legge til SDK-en som en skripttag.

Grammarly Text Editor SDK støtter de nyeste versjonene av populære skrivebordsnettlesere: Chrome, Firefox, Safari, Edge, Opera og Brave. Det er for øyeblikket ingen støtte for mobilnettlesere.

Integrer Grammarlys SDK i en React Text Editor

Først, opprette en React-applikasjon. Deretter, i rotkatalogen til prosjektmappen, oppretter du en ENV-fil som inneholder miljøvariabelen din: klient-ID. Gå over til applikasjonens nettinnstillingsside på Grammarlys utviklerkonsoll, og kopier klient-IDen din.

REACT_APP_GRAMMARLY_CLIENT_ID= Klient-ID

1. Installer de nødvendige pakkene

Kjør denne kommandoen på terminalen din for å installere Grammarly React Text Editor SDK i appen din:

npm installere @grammatisk/editor-sdk-react

2. Lag en tekstredigerer

Etter at du har installert Grammarly React-tekstredigerings-SDK-en, oppretter du en ny mappe i /src-katalogen til React-applikasjonen din, og gir den navnet komponenter. Opprett en ny fil i denne mappen: TextEditor.js.

I TextEditor.js-filen legger du til koden nedenfor:

import Reagere fra'reagere'
import { GrammarlyEditorPlugin } fra'@grammarly/editor-sdk-react'
funksjonTekstredaktør() {
komme tilbake (
<divklassenavn="App">
<Overskriftklassenavn="App-header">
 clientId={prosess.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ aktivering: "umiddelbar" }}
 >
<inputplassholder="Del dine tanker!!" />
GrammarlyEditorPlugin>
Overskrift>
div>
 );
}
eksportmisligholde Tekstredaktør;

I koden ovenfor importerer du GrammarlyEditorPlugin fra Grammarly-React SDK og pakker inn en input-tag med GrammarlyEditorPlugin.

GrammarlyEditorPlugin tar inn to egenskaper: clientID, og ​​en config-egenskap som setter aktiveringen til umiddelbar. Denne egenskapen aktiverer plugin og gjør den tilgjengelig for brukeren så snart siden laster.

Hvis du har nettleserutvidelsen Grammarly, må du deaktivere den eller avinstallere den for dette veiledning siden plugin-modulen på prosjektet ditt vil gi en feil når den oppdager utvidelsen på din nettleser.

Grammarlys editor-plugin har andre tilleggskonfigurasjonsegenskaper som du kan bruke til å tilpasse editoren. De inkluderer:

  • Autofullfør: Denne egenskapen fullfører setninger for brukerne dine mens de skriver.
  • Tonedetektor: Dette viser tonedetektorgrensesnittet.

3. Gjengi tekstredigeringskomponenten

Legg til koden nedenfor i app.js-filen din for å gjengi tekstredigeringskomponenten din:

import Tekstredaktør fra'./components/TextEditor';
funksjonApp() {
komme tilbake (
<divklassenavn="App">
<Overskriftklassenavn="App-header">
<Tekstredaktør />
Overskrift>
div>
 );
}
eksportmisligholde App;

Kjør nå denne kommandoen på terminalen din for å spinne opp utviklingsserveren og se resultatene i nettleseren din:

npm start

Din Grammarly-aktiverte editor skal se omtrent slik ut:

Legg merke til at du pakket inn en input-tag med GrammarlyEditorPlugin. Du kan også pakke inn et tekstområdeelement eller et hvilket som helst element med den nyttige innholdsredigerbare egenskapen satt til "true".

Bruke en tekstområde-tag:

 clientId={prosess.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ aktivering: "umiddelbar" }}
>
<tekstområdeplassholder=" Del dine tanker!!" />
GrammarlyEditorPlugin>

Kjør denne kommandoen på terminalen for å se resultatene i nettleseren din:

npm start

Du bør da se det Grammarly-aktiverte tekstområdet:

Integrer med en Rich Text-editor som TinyMCE

Du kan også pakke inn en fullverdig tekstredigerer med GrammarlyEditorPlugin. Grammarly Text Editor SDK er kompatibel med flere rik tekstredigerere som:

  • TinyMCE
  • Skifer
  • CKEditor
  • fjærpenn

TinyMCE er en brukervennlig tekstredigerer med mange formaterings- og redigeringsverktøy som gjør det mulig for brukere å skrive og redigere innhold i et brukervennlig grensesnitt.

For å integrere TinyMCEs redaktør i en React-applikasjon med Grammarly-skriveassistent aktivert, gå først til TinyMCE og registrere deg for en utviklerkonto. Deretter, på Onboarding-dashbordet, oppgi en domene-URL for applikasjonen din og klikk på Neste: Fortsett til dashbordet knappen for å fullføre oppsettsprosessen.

For lokal utvikling trenger du ikke spesifisere domenet siden den lokale verts-URLen er satt av standard, men når du sender React-applikasjonen din til produksjon, må du levere live domene-URL.

Til slutt kopierer du API-nøkkelen fra utviklerdashbordet og går tilbake til prosjektet ditt på koderedigeringsprogrammet og legger til API-nøkkelen i ENV-filen du opprettet tidligere:

REACT_APP_TINY_MCE_API_KEY="API-nøkkel"

Gå nå over til TextEditor.js-filen din og gjør følgende endringer:

  • Gjør følgende importer: 
    import Reager, { useRef } fra'reagere';
    import { Redaktør } fra'@tinymce/tinymce-react';
    Legg til useRef-kroken og importer TinyMCE Editor-komponenten fra den installerte pakken.
  • I den funksjonelle komponenten legger du til koden nedenfor: 
    konst editorRef = brukRef(null);
    UseRef-kroken lar deg opprettholde mutable verdier mellom gjengivelser. Du vil bruke editorRef-variabelen for å opprettholde tilstanden til dataene som er skrevet inn i editoren.
  • Til slutt, returner editor-komponenten fra TinyMCE-biblioteket: 
     apiKey={prosess.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editor) => editorRef.current = editor}
     initialValue="<s>Dette er det første innholdet til redaktøren.s>"
     init={{
     høyde: 500,
     menyfelt: falsk,
     plugins: [
    'advlist', 'autolink', 'lister', 'link', 'bilde', 'charmap', 'forhåndsvisning',
    'anker', 'søkerstatt', 'visuelle blokker', 'kode', 'full skjerm',
    'insertdatetime', 'media', 'bord', 'kode', 'hjelp', 'ordtelling'
     ],
     verktøylinje: 'angre gjøre om | blokker | ' +
    'fet kursiv forfarge | alignleft aligncenter ' +
    'alignright alignjustify | bullist numlist utrykk innrykk | ' +
    'fjernformat | hjelp',
     innholdsstil: 'body { font-family: Helvetica, Arial, sans-serif; skriftstørrelse: 14px }'
     }}
    />
  • Komponenten definerer editoregenskapene, dvs. API-nøkkelen, startverdien, et objekt med høyden på editoren, plugins og verktøylinjeegenskaper, og til slutt editorRef.current-metoden som tildeler verdien av "editor"-parameteren til "editorRef" variabel.
  • "editor"-parameteren er et hendelsesobjekt som sendes inn når "onInit"-hendelsen utløses.

Den komplette koden skal se slik ut:

import Reager, { useRef } fra'reagere';
import { GrammarlyEditorPlugin } fra'@grammarly/editor-sdk-react';
import { Redaktør } fra'@tinymce/tinymce-react';
funksjonTekstredaktør() {
konst editorRef = brukRef(null);
komme tilbake (
<divklassenavn="App">
<Overskriftklassenavn="App-header">
 clientId={prosess.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={
 { aktivering: "umiddelbar" }}
 >
 apiKey={prosess.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editor) => editorRef.current = editor}
 initialValue="<s>Dette er det første innholdet til redaktøren. s>"
 init={{
 høyde: 500,
 menyfelt: falsk,
 plugins: [
'advlist', 'autolink', 'lister', 'link', 'bilde', 'charmap', 'forhåndsvisning',
'anker', 'søkerstatt', 'visuelle blokker', 'kode', 'full skjerm',
'insertdatetime', 'media', 'bord', 'kode', 'hjelp', 'ordtelling'
 ],
 verktøylinje: 'angre gjøre om | blokker | ' +
'fet kursiv forfarge | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist utrykk innrykk | ' +
'fjernformat | hjelp',
 innholdsstil: 'body { font-family: Helvetica, Arial, sans-serif; skriftstørrelse: 14px }'
 }}
 />
GrammarlyEditorPlugin>
Overskrift>
div>
 );
}
eksportmisligholde Tekstredaktør;

I denne koden pakker du inn TinyMCE-redigeringskomponenten med GrammarlyEditorPlugin for å integrere Grammarly-hjelpefunksjonen i TinyMCE-tekstredigereren. Til slutt snurr du opp utviklingsserveren for å lagre endringene og navigere til http://localhost: 3000 i nettleseren din for å se resultatene.

Bruk grammatikk for å forbedre brukerproduktiviteten

Grammarlys SDK gir et kraftig verktøy som kan bidra til å forbedre kvaliteten og nøyaktigheten til innholdet ditt i en React-tekstredigerer.

Det er enkelt å integrere med eksisterende prosjekter og gir omfattende grammatikk- og stavekontrollfunksjoner som kan forbedre brukerens skriveopplevelse.