Har du svært ved at levere rettidigt arbejde uden at lave tastefejl og grammatikfejl? Det kan være stressende, især når du vil sikre dig, at alt er perfekt - ved at bruge Grammarly kan du forbedre din produktivitet og skriveoplevelse.
Grammarly er en cloud-baseret grammatikkontrol og korrekturlæser. Den registrerer og retter grammatik, stave, tegnsætning og andre skrivefejl. Det giver også forslag til forbedring af ordforråd, der hjælper dig med at forbedre kvaliteten af din skrivning.
Følg med for at lære, hvordan du integrerer Grammarly i en teksteditor bygget med React.
Hvad er grammatik for udviklere?
Grammarly er bredt anerkendt for sin browserudvidelse, som du kan bruge til at rette grammatiske fejl i et websteds teksteditor. Grammarly for Developers er en funktion på Grammarly, der hjælper dig med at integrere Grammarlys automatiserede korrekturlæsning og plagiatregistreringsværktøjer i dine webapplikationer.
Du kan nu bruge Grammarly til at skabe en indbygget tekstredigeringsfunktion i realtid i din webapplikation ved hjælp af Grammarlys Software Development Kit (SDK). Dette giver dine brugere adgang til alle Grammarly-funktioner uden at skulle downloade browserudvidelsen.
Opret en ny applikation på Grammarly Developer Console
Konfigurer en ny applikation på Grammarlys udviklerkonsol ved at følge disse trin:
- Gå over til Grammarly for udviklere konsollen og tilmeld dig en konto. Hvis du allerede har en Grammarly-konto, kan du bruge den til at logge ind på konsollen.
- Når du har logget ind, skal du på konsollens dashboard klikke på Ny app knappen for at oprette en ny applikation. Udfyld navnet på din app og tryk skab for at afslutte processen.
- Vælg derefter i venstre rude på din applikations dashboard Web fanen for at se din applikations legitimationsoplysninger på siden med webklientindstillinger.
- Kopiér det angivne klient-id. På samme side kan du se den hurtige guide til, hvordan du integrerer Grammarly SDK på en webklient. SDK'et er kompatibelt med React, Vue.js og almindelige JavaScript-klienter. Du kan også integrere SDK'et i HTML ved at tilføje SDK'et som et script-tag.
Grammarly Text Editor SDK understøtter de nyeste versioner af populære desktopbrowsere: Chrome, Firefox, Safari, Edge, Opera og Brave. Der er i øjeblikket ingen understøttelse af mobile browsere.
Integrer Grammarlys SDK i en React Text Editor
Først, oprette en React-applikation. Dernæst, i rodmappen i din projektmappe, skal du oprette en ENV-fil til at indeholde din miljøvariabel: dit ClientID. Gå over til din applikations side med webindstillinger på Grammarlys Developer Console, og kopier dit ClientID.
REACT_APP_GRAMMARLY_CLIENT_ID= Klient-ID1. Installer de nødvendige pakker
Kør denne kommando på din terminal for at installere Grammarly React Text Editor SDK i din app:
npm installere @grammatisk/editor-sdk-react2. Opret en teksteditor
Efter installation af Grammarly React teksteditor SDK, skal du oprette en ny mappe i mappen /src i din React-applikation, og navngive den, komponenter. Opret en ny fil i denne mappe: TextEditor.js.
Tilføj koden nedenfor i filen TextEditor.js:
importere Reagere fra'reagere'
importere { GrammarlyEditorPlugin } fra'@grammarly/editor-sdk-react'fungereTekstredaktør() {
Vend tilbage (
<divklassenavn="App">
<headerklassenavn="App-header">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktivering: "umiddelbar" }}
>
<inputpladsholder="Del dine tanker!!" />
GrammarlyEditorPlugin>
header>
div>
);
}
eksportStandard Tekstredaktør;
I koden ovenfor importerer du GrammarlyEditorPlugin fra Grammarly-React SDK og pakker et inputtag med GrammarlyEditorPlugin.
GrammarlyEditorPlugin'et har to egenskaber: clientID og en config-egenskab, som indstiller aktiveringen til øjeblikkelig. Denne egenskab aktiverer plugin'et og gør det tilgængeligt for brugeren, så snart siden indlæses.
Hvis du har Grammarly-browserudvidelsen, skal du deaktivere den eller afinstallere den for dette tutorial, da plugin'et på dit projekt vil give en fejl, når det opdager udvidelsen på din browser.
Grammarlys editor-plugin har andre yderligere konfigurationsegenskaber, som du kan bruge til at tilpasse din editor. De omfatter:
- Autofuldførelse: Denne egenskab fuldender sætninger for dine brugere, mens de skriver.
- Tonedetektor: Dette viser tonedetektorgrænsefladen.
3. Gengiv tekstredigeringskomponenten
Tilføj koden nedenfor i din app.js-fil for at gengive din tekstredigeringskomponent:
importere Tekstredaktør fra'./components/TextEditor';fungereApp() {
Vend tilbage (
<divklassenavn="App">
<headerklassenavn="App-header">
<Tekstredaktør />
header>
div>
);
}
eksportStandard App;
Kør nu denne kommando på din terminal for at skrue udviklingsserveren op og se resultaterne på din browser:
npm StartDin Grammarly-aktiverede editor skulle se sådan ud:
Bemærk, du har pakket et input-tag med GrammarlyEditorPlugin. Du kan også pakke et tekstområdeelement eller et hvilket som helst element med den nyttige indholdsredigerbare egenskab sat til "sand".
Brug af et tekstområde-tag:
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktivering: "umiddelbar" }}
>
<tekstområdepladsholder="Del dine tanker!!" />
GrammarlyEditorPlugin>Kør denne kommando på din terminal for at se resultaterne i din browser:
npm StartDu bør derefter se dit grammatik-aktiverede tekstområde:
Integrer med en Rich Text-editor som TinyMCE
Du kan også indpakke en fuldgyldig teksteditor med GrammarlyEditorPlugin. Grammarly Text Editor SDK er kompatibel med flere rich text-editorer, såsom:
- TinyMCE
- Skifer
- CKEditor
- Fjeldpenn
TinyMCE er en letanvendelig teksteditor med en masse formaterings- og redigeringsværktøjer, der gør det muligt for brugere at skrive og redigere indhold i en brugervenlig grænseflade.
For at integrere TinyMCE's editor i en React-applikation med Grammarly-skriveassistent aktiveret, skal du først besøge TinyMCE og tilmeld dig en udviklerkonto. Angiv derefter en domæne-URL for din applikation på Onboarding-dashboardet og klik på Næste: Fortsæt til dit dashboard knappen for at afslutte opsætningsprocessen.
For lokal udvikling behøver du ikke angive domænet, da den lokale værts URL er angivet af standard, men når du sender din React-applikation til produktion, skal du levere live domænets URL.
Til sidst skal du kopiere din API-nøgle fra dit udvikler-dashboard og gå tilbage til dit projekt på din kodeeditor og tilføje API-nøglen i ENV-filen, du oprettede tidligere:
REACT_APP_TINY_MCE_API_KEY="API nøgle"Gå nu over til din TextEditor.js-fil og foretag følgende ændringer:
- Foretag følgende importer:
Tilføj useRef hook og importer TinyMCE Editor-komponenten fra den installerede pakke.importere Reager, { useRef } fra'reagere';
importere { Editor } fra'@tinymce/tinymce-react'; - Tilføj koden nedenfor i den funktionelle komponent:
UseRef-krogen giver dig mulighed for at bevare mutable værdier mellem gengivelser. Du skal bruge editorRef-variablen til at vedligeholde tilstanden for de data, der er skrevet på editoren.konst editorRef = useRef(nul); - Til sidst returnerer du editor-komponenten fra TinyMCE-biblioteket:
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, editor) => editorRef.current = editor}
initialValue="<s>Dette er redaktørens indledende indhold.s>"
init={{
højde: 500,
menu linje: falsk,
plugins: [
'advlist', 'autolink', 'lister', 'link', 'billede', 'charmap', 'forhåndsvisning',
'anker', 'søgerstat', 'visuelle blokeringer', 'kode', 'Fuld skærm',
'indsæt datotid', 'medier', 'bord', 'kode', 'Hjælp', 'ordtælling'
],
værktøjslinje: 'fortryd fortryd | blokke | ' +
'fed kursiv forfarve | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist udspring indrykning | ' +
'fjernformat | Hjælp',
content_style: 'body { font-family: Helvetica, Arial, sans-serif; skriftstørrelse: 14px }'
}}
/> - Komponenten definerer editorens egenskaber, dvs. API-nøglen, startværdien, et objekt med editorens højde, plugins og værktøjslinjeegenskaber, og til sidst metoden editorRef.current, som tildeler værdien af "editor"-parameteren til "editorRef" variabel.
- Parameteren "editor" er et hændelsesobjekt, der sendes ind, når hændelsen "onInit" udløses.
Den komplette kode skal se sådan ud:
importere Reager, { useRef } fra'reagere';
importere { GrammarlyEditorPlugin } fra'@grammarly/editor-sdk-react';
importere { Editor } fra'@tinymce/tinymce-react';
fungereTekstredaktør() {
konst editorRef = useRef(nul);
Vend tilbage (
<divklassenavn="App">
<headerklassenavn="App-header">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={
{ aktivering: "umiddelbar" }}
>
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, editor) => editorRef.current = editor}
initialValue="<s>Dette er redaktørens indledende indhold. s>"
init={{
højde: 500,
menu linje: falsk,
plugins: [
'advlist', 'autolink', 'lister', 'link', 'billede', 'charmap', 'forhåndsvisning',
'anker', 'søgerstat', 'visuelle blokeringer', 'kode', 'Fuld skærm',
'indsæt datotid', 'medier', 'bord', 'kode', 'Hjælp', 'ordtælling'
],
værktøjslinje: 'fortryd fortryd | blokke | ' +
'fed kursiv forfarve | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist udspring indrykning | ' +
'fjernformat | Hjælp',
content_style: 'body { font-family: Helvetica, Arial, sans-serif; skriftstørrelse: 14px }'
}}
/>
GrammarlyEditorPlugin>
header>
div>
);
}
eksportStandard Tekstredaktør;
I denne kode indpakker du TinyMCE-editor-komponenten med GrammarlyEditorPlugin for at integrere Grammarly-hjælpefunktionen på TinyMCE-teksteditor. Drej endelig udviklingsserveren op for at gemme ændringerne og navigere til http://localhost: 3000 i din browser for at se resultaterne.
Brug grammatik til at forbedre brugerproduktiviteten
Grammarlys SDK giver et kraftfuldt værktøj, der kan hjælpe med at forbedre kvaliteten og nøjagtigheden af dit indhold i en React-teksteditor.
Det er nemt at integrere med eksisterende projekter og giver omfattende grammatik- og stavekontrolfunktioner, der kan forbedre brugerens skriveoplevelse.
