Har du svårt att leverera i rätt tid utan att göra stavfel och grammatikfel? Det kan vara stressigt, särskilt när du vill se till att allt är perfekt – att använda Grammarly kan förbättra din produktivitet och skrivupplevelse.
Grammarly är en molnbaserad grammatikkontroll och korrekturläsare. Den upptäcker och korrigerar grammatik, stavning, skiljetecken och andra skrivfel. Den erbjuder också förslag på ordförrådsförbättringar som hjälper dig att förbättra kvaliteten på ditt skrivande.
Följ med för att lära dig hur du integrerar Grammarly i en textredigerare byggd med React.
Vad är grammatik för utvecklare?
Grammarly är allmänt känt för sin webbläsartillägg som du kan använda för att korrigera grammatiska misstag i en webbplatss textredigerare. Grammarly for Developers är en funktion på Grammarly som hjälper dig att integrera Grammarlys automatiserade korrekturläsnings- och plagieringsverktyg i dina webbapplikationer.
Du kan nu använda Grammarly för att skapa en inbyggd textredigeringsfunktion i realtid i din webbapplikation med Grammarlys Software Development Kit (SDK). Detta ger dina användare tillgång till alla Grammarly-funktioner utan att behöva ladda ner webbläsartillägget.
Skapa en ny applikation på Grammarly Developer Console
Konfigurera en ny applikation på Grammarlys utvecklarkonsol genom att följa dessa steg:
- Gå över till Grammatik för utvecklare konsolen och registrera dig för ett konto. Om du redan har ett Grammarly-konto kan du använda det för att logga in på konsolen.
- När du har loggat in klickar du på konsolens instrumentpanel Ny app för att skapa en ny applikation. Fyll i namnet på din app och tryck Skapa för att avsluta processen.
- Välj sedan i den vänstra rutan i programmets instrumentpanel webb fliken för att visa din applikations autentiseringsuppgifter på webbklientens inställningssida.
- Kopiera det angivna klient-ID. På samma sida, lägg märke till snabbguiden om hur man integrerar Grammarly SDK på en webbklient. SDK: n är kompatibel med React, Vue.js och vanliga JavaScript-klienter. Du kan också integrera SDK i HTML genom att lägga till SDK som en skripttagg.
Grammarly Text Editor SDK stöder de senaste versionerna av populära stationära webbläsare: Chrome, Firefox, Safari, Edge, Opera och Brave. Det finns för närvarande inget stöd för mobila webbläsare.
Integrera Grammarlys SDK i en React Text Editor
Först, skapa en React-applikation. Därefter skapar du en ENV-fil i rotkatalogen i din projektmapp som innehåller din miljövariabel: ditt ClientID. Gå över till din applikations sida med webbinställningar på Grammarlys utvecklarkonsol och kopiera ditt klient-ID.
REACT_APP_GRAMMARLY_CLIENT_ID= Klient-ID1. Installera de nödvändiga paketen
Kör det här kommandot på din terminal för att installera Grammarly React Text Editor SDK i din app:
npm installera @grammatiskt/editor-sdk-react2. Skapa en textredigerare
Efter att ha installerat Grammarly React-textredigeraren SDK, skapa en ny mapp i /src-katalogen i din React-applikation och namnge den, komponenter. Skapa en ny fil i den här mappen: TextEditor.js.
Lägg till koden nedan i filen TextEditor.js:
importera Reagera från'reagera'
importera { GrammarlyEditorPlugin } från'@grammarly/editor-sdk-react'fungeraTextredigerare() {
lämna tillbaka (
<divklassnamn="App">
<rubrikklassnamn="App-header">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktivering: "omedelbar" }}
>
<inmatningPlatshållare="Dela dina tankar!!" />
GrammarlyEditorPlugin>
rubrik>
div>
);
}
exporterastandard Textredigerare;
I koden ovan importerar du GrammarlyEditorPlugin från Grammarly-React SDK och lindar en input-tagg med GrammarlyEditorPlugin.
GrammarlyEditorPlugin tar in två egenskaper: clientID och en config-egenskap som ställer in aktiveringen till omedelbar. Den här egenskapen aktiverar plugin-programmet och gör det tillgängligt för användaren så snart sidan laddas.
Om du har webbläsartillägget Grammarly måste du inaktivera det eller avinstallera det för detta handledning eftersom plugin-programmet på ditt projekt kommer att ge ett fel när det upptäcker tillägget på din webbläsare.
Grammarlys editor-plugin har andra ytterligare konfigurationsegenskaper som du kan använda för att anpassa din editor. De inkluderar:
- Autoslutförande: Den här egenskapen kompletterar fraser för dina användare när de skriver.
- Tondetektor: Detta visar tondetektorns gränssnitt.
3. Rendera textredigeringskomponenten
Lägg till koden nedan i din app.js-fil för att återge din textredigeringskomponent:
importera Textredigerare från'./components/TextEditor';fungeraApp() {
lämna tillbaka (
<divklassnamn="App">
<rubrikklassnamn="App-header">
<Textredigerare />
rubrik>
div>
);
}
exporterastandard App;
Kör nu det här kommandot på din terminal för att snurra upp utvecklingsservern och se resultaten i din webbläsare:
npm StartDin Grammarly-aktiverade redigerare bör se ut ungefär så här:
Observera att du slog in en indatatagg med GrammarlyEditorPlugin. Du kan också slå in ett textområdeselement eller vilket element som helst med det användbara contenteditable-attributet inställd på "sant".
Använda en textarea-tagg:
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktivering: "omedelbar" }}
>
<textområdePlatshållare=" Dela dina tankar!!" />
GrammarlyEditorPlugin>Kör det här kommandot på din terminal för att se resultaten i din webbläsare:
npm StartDu bör då se ditt grammatikaktiverade textområde:
Integrera med en Rich Text-redigerare som TinyMCE
Du kan också slå in en fullfjädrad textredigerare med GrammarlyEditorPlugin. Grammarly Text Editor SDK är kompatibel med flera rich text-redigerare som:
- TinyMCE
- Skiffer
- CKEditor
- Gåspenna
TinyMCE är en lättanvänd textredigerare med många formaterings- och redigeringsverktyg som gör det möjligt för användare att skriva och redigera innehåll i ett användarvänligt gränssnitt.
För att integrera TinyMCE: s editor i en React-applikation med Grammarly skrivassistent aktiverad, besök först TinyMCE och registrera dig för ett utvecklarkonto. Ange sedan en domän-URL för din applikation på Onboarding-instrumentpanelen och klicka på Nästa: Fortsätt till din instrumentpanel för att avsluta installationsprocessen.
För lokal utveckling behöver du inte ange domänen eftersom den lokala värdadressen ställs in av standard, men när du skickar din React-applikation till produktion måste du tillhandahålla live domän-URL.
Slutligen, kopiera din API-nyckel från din utvecklarinstrumentpanel och gå tillbaka till ditt projekt i din kodredigerare och lägg till API-nyckeln i ENV-filen du skapade tidigare:
REACT_APP_TINY_MCE_API_KEY="API-nyckel"Gå nu över till din TextEditor.js-fil och gör följande ändringar:
- Gör följande importer:
Lägg till useRef-kroken och importera TinyMCE Editor-komponenten från det installerade paketet.importera Reagera, { useRef } från'reagera';
importera { Redaktör } från'@tinymce/tinymce-react'; - Lägg till koden nedan i den funktionella komponenten:
UseRef-kroken låter dig bevara föränderliga värden mellan renderingar. Du kommer att använda variabeln editorRef för att upprätthålla tillståndet för data som skrivits i editorn.konst editorRef = useRef(null); - Till sist, returnera redigeringskomponenten från TinyMCE-biblioteket:
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, editor) => editorRef.current = editor}
initialValue="<sid>Detta är redaktörens initiala innehåll.sid>"
init={{
höjd: 500,
menyfältet: falsk,
plugins: [
"advlist", "autolänk", "listor", 'länk', 'bild', "charmap", 'förhandsvisning',
'ankare', "sök ersätt", "visuella blockeringar", 'koda', 'fullskärm',
'insertdatetime', 'media', 'tabell', 'koda', 'hjälp', 'antal ord'
],
verktygsfält: 'ångra göra om | block | ' +
'fet kursiv förfärg | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indrag | ' +
'removeformat | hjälp',
content_style: 'kropp { font-family: Helvetica, Arial, sans-serif; teckenstorlek: 14px }'
}}
/> - Komponenten definierar editorns egenskaper, dvs API-nyckeln, initialvärdet, ett objekt med höjden på editorn, plugins och verktygsfältsegenskaper, och slutligen metoden editorRef.current som tilldelar värdet på parametern "editor" till "editorRef" variabel.
- Parametern "editor" är ett händelseobjekt som skickas in när händelsen "onInit" aktiveras.
Hela koden ska se ut så här:
importera Reagera, { useRef } från'reagera';
importera { GrammarlyEditorPlugin } från'@grammarly/editor-sdk-react';
importera { Redaktör } från'@tinymce/tinymce-react';
fungeraTextredigerare() {
konst editorRef = useRef(null);
lämna tillbaka (
<divklassnamn="App">
<rubrikklassnamn="App-header">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={
{ aktivering: "omedelbar" }}
>
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, editor) => editorRef.current = editor}
initialValue="<sid>Detta är redaktörens initiala innehåll. sid>"
init={{
höjd: 500,
menyfältet: falsk,
plugins: [
"advlist", "autolänk", "listor", 'länk', 'bild', "charmap", 'förhandsvisning',
'ankare', "sök ersätt", "visuella blockeringar", 'koda', 'fullskärm',
'insertdatetime', 'media', 'tabell', 'koda', 'hjälp', 'antal ord'
],
verktygsfält: 'ångra göra om | block | ' +
'fet kursiv förfärg | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indrag | ' +
'removeformat | hjälp',
content_style: 'kropp { font-family: Helvetica, Arial, sans-serif; teckenstorlek: 14px }'
}}
/>
GrammarlyEditorPlugin>
rubrik>
div>
);
}
exporterastandard Textredigerare;
I den här koden lindar du TinyMCE-redigeringskomponenten med GrammarlyEditorPlugin för att integrera Grammarly-hjälpfunktionen i TinyMCE-textredigeraren. Slutligen, snurra upp utvecklingsservern för att spara ändringarna och navigera till http://localhost: 3000 i din webbläsare för att se resultaten.
Använd grammatik för att förbättra användarproduktiviteten
Grammarlys SDK tillhandahåller ett kraftfullt verktyg som kan hjälpa till att förbättra kvaliteten och noggrannheten på ditt innehåll i en React-textredigerare.
Det är lätt att integrera med befintliga projekt och ger omfattande grammatik- och stavningskontrollfunktioner som kan förbättra användarens skrivupplevelse.
