Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Vind je het moeilijk om op tijd werk af te leveren zonder type- en grammaticafouten te maken? Het kan stressvol zijn, vooral als je er zeker van wilt zijn dat alles perfect is. Het gebruik van Grammatica kan je productiviteit en schrijfervaring verbeteren.

Grammarly is een cloudgebaseerde grammaticacontrole en proeflezer. Het detecteert en corrigeert grammatica, spelling, interpunctie en andere schrijffouten. Het biedt ook suggesties voor woordenschatverbetering die u helpen de kwaliteit van uw schrijven te verbeteren.

Volg mee en leer hoe u Grammarly kunt integreren in een teksteditor die is gebouwd met React.

Wat is grammatica voor ontwikkelaars?

Grammatica wordt algemeen erkend vanwege de browserextensie die u kunt gebruiken om grammaticale fouten in de teksteditor van een website te corrigeren. Grammarly voor ontwikkelaars is een functie op Grammarly waarmee u Grammarly's geautomatiseerde proeflees- en plagiaatdetectietools in uw webtoepassingen kunt integreren.

instagram viewer

U kunt nu Grammarly gebruiken om een ​​ingebouwde real-time tekstbewerkingsfunctie in uw webtoepassing te creëren met behulp van Grammarly's Software Development Kit (SDK). Dit geeft uw gebruikers toegang tot alle Grammarly-functies zonder de browserextensie te hoeven downloaden.

Maak een nieuwe applicatie op Grammarly Developer Console

Stel een nieuwe applicatie in op de ontwikkelaarsconsole van Grammarly door deze stappen te volgen:

  1. Ga naar de Grammatica voor ontwikkelaars console en meld u aan voor een account. Als u al een Grammarly-account heeft, kunt u deze gebruiken om u aan te melden bij de console.
  2. Nadat u zich heeft aangemeld, klikt u op het dashboard van de console op de Nieuwe applicatie knop om een ​​nieuwe applicatie te maken. Vul de naam van uw app in en klik op Creëren om het proces af te ronden.
  3. Selecteer vervolgens in het linkerdeelvenster van het dashboard van uw toepassing de Web tabblad om de inloggegevens van uw toepassing te bekijken op de instellingenpagina van de webclient.
  4. Kopieer de verstrekte klant-ID. Bekijk op dezelfde pagina de beknopte handleiding over het integreren van Grammarly SDK in een webclient. De SDK is compatibel met React, Vue.js en eenvoudige JavaScript-clients. U kunt de SDK ook in HTML integreren door de SDK als scripttag toe te voegen.

De Grammarly Text Editor SDK ondersteunt de nieuwste versies van populaire desktopbrowsers: Chrome, Firefox, Safari, Edge, Opera en Brave. Er is momenteel geen ondersteuning voor mobiele browsers.

Integreer de SDK van Grammarly in een React-teksteditor

Eerst, maak een React-applicatie. Maak vervolgens in de hoofdmap van uw projectmap een ENV-bestand om uw omgevingsvariabele te bevatten: uw ClientID. Ga naar de pagina met webinstellingen van uw applicatie op Grammarly's Developer Console en kopieer uw ClientID.

REACT_APP_GRAMMARLY_CLIENT_ID= Cliënt-ID

1. Installeer de vereiste pakketten

Voer deze opdracht uit op uw terminal om de Grammarly React Text Editor SDK in uw app te installeren:

npm installeren @grammatica/editor-sdk-react

2. Maak een teksteditor

Na het installeren van de Grammarly React-teksteditor SDK, maakt u een nieuwe map in de / src-map van uw React-toepassing en noemt u deze componenten. Maak in deze map een nieuw bestand aan: TextEditor.js.

Voeg in het bestand TextEditor.js de onderstaande code toe:

importeren Reageer van'Reageer'
importeren { GrammarlyEditorPlugin } van'@grammatica/editor-sdk-reageren'
functieTeksteditor() {
opbrengst (
<divnaam van de klasse="App">
<koptekstnaam van de klasse="App-header">
 clientId={proces.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 configuratie={{ activering: "onmiddellijk" }}
 >
<invoertijdelijke aanduiding="Deel je gedachten!!" />
GrammaticaEditorPlugin>
koptekst>
div>
 );
}
exporterenstandaard Teksteditor;

In de bovenstaande code importeert u de GrammarlyEditorPlugin uit de Grammarly-React SDK en plaatst u een invoertag in de GrammarlyEditorPlugin.

De GrammarlyEditorPlugin heeft twee eigenschappen: clientID en een config-eigenschap die de activering instelt op onmiddellijk. Deze eigenschap activeert de plug-in en maakt deze beschikbaar voor de gebruiker zodra de pagina wordt geladen.

Als u de browserextensie Grammarly heeft, moet u deze hiervoor uitschakelen of verwijderen tutorial omdat de plug-in op uw project een fout zal genereren zodra het de extensie op uw browser.

De editor-plug-in van Grammarly heeft andere aanvullende configuratie-eigenschappen die u kunt gebruiken om uw editor aan te passen. Ze bevatten:

  • Automatisch aanvullen: deze eigenschap voltooit woordgroepen voor uw gebruikers terwijl ze typen.
  • ToneDetector: Dit toont de toondetectorinterface.

3. Geef de teksteditorcomponent weer

Voeg de onderstaande code toe aan uw app.js-bestand om uw teksteditorcomponent weer te geven:

importeren Teksteditor van'./componenten/Teksteditor';
functieapp() {
opbrengst (
<divnaam van de klasse="App">
<koptekstnaam van de klasse="App-header">
<Teksteditor />
koptekst>
div>
 );
}
exporterenstandaard App;

Voer nu deze opdracht uit op uw terminal om de ontwikkelingsserver te laten draaien en de resultaten in uw browser te bekijken:

npm begin

Uw voor grammatica geschikte editor zou er ongeveer zo uit moeten zien:

Merk op dat je een invoertag hebt ingepakt met de GrammarlyEditorPlugin. U kunt ook een textarea-element of een ander element omwikkelen het nuttige kenmerk contenteditable ingesteld op "waar".

Een textarea-tag gebruiken:

 clientId={proces.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 configuratie={{ activering: "onmiddellijk" }}
>
<tekstgebiedtijdelijke aanduiding=" Deel je gedachten!!" />
GrammaticaEditorPlugin>

Voer deze opdracht uit op uw terminal om de resultaten in uw browser te bekijken:

npm begin

U zou dan uw voor grammatica geschikte tekstgebied moeten zien:

Integreer met een Rich Text-editor zoals TinyMCE

U kunt ook een volwaardige teksteditor inpakken met de GrammarlyEditorPlugin. De SDK voor grammaticale teksteditor is compatibel met verschillende RTF-editors, zoals:

  • TinyMCE
  • Leisteen
  • CKeditor
  • Schacht

TinyMCE is een gebruiksvriendelijke teksteditor met veel opmaak- en bewerkingstools waarmee gebruikers inhoud kunnen schrijven en bewerken binnen een gebruiksvriendelijke interface.

Om de editor van TinyMCE te integreren in een React-toepassing met grammaticale schrijfassistent ingeschakeld, gaat u eerst naar TinyMCE en meld u aan voor een ontwikkelaarsaccount. Geef vervolgens op het Onboarding-dashboard een domein-URL op voor uw toepassing en klik op de Volgende: Ga verder naar uw dashboard knop om het installatieproces te voltooien.

Voor lokale ontwikkeling hoeft u het domein niet op te geven, aangezien de localhost-URL wordt ingesteld door standaard, echter, zodra u uw React-applicatie naar productie verzendt, moet u de live domein-URL.

Kopieer ten slotte uw API-sleutel van uw ontwikkelaarsdashboard en ga terug naar uw project in uw code-editor en voeg de API-sleutel toe aan het ENV-bestand dat u eerder hebt gemaakt:

REACT_APP_TINY_MCE_API_KEY="API sleutel"

Ga nu naar uw TextEditor.js-bestand en breng de volgende wijzigingen aan:

  • Voer de volgende invoer uit: 
    importeren Reageer, { useRef } van'Reageer';
    importeren { Redacteur } van'@tinymce/tinymce-reageren';
    Voeg de useRef-hook toe en importeer de TinyMCE Editor-component uit het geïnstalleerde pakket.
  • Voeg in de functionele component de onderstaande code toe: 
    const editorRef = gebruikRef(nul);
    Met de hook useRef kunt u veranderlijke waarden behouden tussen weergaven. U gebruikt de editorRef-variabele om de status van de gegevens die in de editor zijn ingevoerd te behouden.
  • Retourneer ten slotte de editorcomponent uit de TinyMCE-bibliotheek: 
     apiKey={proces.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editor) => editorRef.current = editor}
     beginwaarde="<P>Dit is de oorspronkelijke inhoud van de editor.P>"
     begin={{
     hoogte: 500,
     menubalk: vals,
     plug-ins: [
    'advlist', 'autolink', 'lijsten', 'koppeling', 'afbeelding', 'charmap', 'voorbeeld',
    'anker', 'zoekenvervangen', 'visueleblokken', 'code', 'volledig scherm',
    'voeg datumtijd in', 'media', 'tafel', 'code', 'hulp', 'Aantal woorden'
     ],
     werkbalk: 'ongedaan maken opnieuw | blokken | ' +
    'vet cursieve voorkleur | uitlijnenlinks uitlijnenmidden ' +
    'uitlijnen uitlijnen | bullist numlist uitspringen inspringen | ' +
    'opmaak verwijderen | hulp',
     inhoud_stijl: 'body { lettertypefamilie: Helvetica, Arial, schreefloos; lettergrootte: 14px }'
     }}
    />
  • De component definieert de eigenschappen van de editor, d.w.z. de API-sleutel, de beginwaarde, een object met de hoogte van de editor, de plug-ins en toolbar-eigenschappen, en tot slot de editorRef.current-methode die de waarde van de parameter "editor" toewijst aan de "editorRef" variabel.
  • De parameter "editor" is een gebeurtenisobject dat wordt doorgegeven wanneer de gebeurtenis "onInit" wordt geactiveerd.

De volledige code zou er als volgt uit moeten zien:

importeren Reageer, { useRef } van'Reageer';
importeren { GrammarlyEditorPlugin } van'@grammatica/editor-sdk-reageren';
importeren { Redacteur } van'@tinymce/tinymce-reageren';
functieTeksteditor() {
const editorRef = gebruikRef(nul);
opbrengst (
<divnaam van de klasse="App">
<koptekstnaam van de klasse="App-header">
 clientId={proces.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 configuratie={
 { activering: "onmiddellijk" }}
 >
 apiKey={proces.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editor) => editorRef.current = editor}
 beginwaarde="<P>Dit is de oorspronkelijke inhoud van de editor. P>"
 begin={{
 hoogte: 500,
 menubalk: vals,
 plug-ins: [
'advlist', 'autolink', 'lijsten', 'koppeling', 'afbeelding', 'charmap', 'voorbeeld',
'anker', 'zoekenvervangen', 'visueleblokken', 'code', 'volledig scherm',
'voeg datumtijd in', 'media', 'tafel', 'code', 'hulp', 'Aantal woorden'
 ],
 werkbalk: 'ongedaan maken opnieuw | blokken | ' +
'vet cursieve voorkleur | uitlijnenlinks uitlijnenmidden ' +
'uitlijnen uitlijnen | bullist numlist uitspringen inspringen | ' +
'opmaak verwijderen | hulp',
 inhoud_stijl: 'body { lettertypefamilie: Helvetica, Arial, schreefloos; lettergrootte: 14px }'
 }}
 />
GrammaticaEditorPlugin>
koptekst>
div>
 );
}
exporterenstandaard Teksteditor;

In deze code verpak je de TinyMCE-editorcomponent met de GrammarlyEditorPlugin om de Grammarly-hulpfunctie in de TinyMCE-teksteditor te integreren. Draai ten slotte de ontwikkelingsserver om de wijzigingen op te slaan en naar toe te navigeren http://localhost: 3000 in uw browser om de resultaten te bekijken.

Gebruik grammatica om de productiviteit van gebruikers te verbeteren

De SDK van Grammarly biedt een krachtige tool die kan helpen de kwaliteit en nauwkeurigheid van uw inhoud in een React-teksteditor te verbeteren.

Het is gemakkelijk te integreren met bestaande projecten en biedt uitgebreide mogelijkheden voor grammatica en spellingcontrole die de schrijfervaring van de gebruiker kunnen verbeteren.