Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Fällt es Ihnen schwer, pünktliche Arbeit zu liefern, ohne Tipp- und Grammatikfehler zu machen? Es kann stressig sein, besonders wenn Sie sicherstellen möchten, dass alles perfekt ist – die Verwendung von Grammarly kann Ihre Produktivität und Ihr Schreiberlebnis verbessern.

Grammarly ist ein Cloud-basierter Grammatikprüfer und Korrekturleser. Es erkennt und korrigiert Grammatik-, Rechtschreib-, Zeichensetzungs- und andere Schreibfehler. Es bietet auch Vorschläge zur Verbesserung des Wortschatzes, die Ihnen helfen, die Qualität Ihres Schreibens zu verbessern.

Folgen Sie den Anweisungen, um zu erfahren, wie Sie Grammarly in einen mit React erstellten Texteditor integrieren.

Was ist Grammarly für Entwickler?

Grammarly ist weithin für seine Browsererweiterung bekannt, mit der Sie grammatikalische Fehler im Texteditor einer Website korrigieren können. Grammarly for Developers ist eine Funktion von Grammarly, mit der Sie die automatisierten Korrekturlese- und Plagiatserkennungstools von Grammarly in Ihre Webanwendungen integrieren können.

instagram viewer

Sie können jetzt Grammarly verwenden, um mit dem Software Development Kit (SDK) von Grammarly eine integrierte Echtzeit-Textbearbeitungsfunktion in Ihrer Webanwendung zu erstellen. Dadurch erhalten Ihre Benutzer Zugriff auf alle Grammarly-Funktionen, ohne die Browsererweiterung herunterladen zu müssen.

Erstellen Sie eine neue Anwendung in der Grammarly Developer Console

Richten Sie eine neue Anwendung in der Entwicklerkonsole von Grammarly ein, indem Sie die folgenden Schritte ausführen:

  1. Gehen Sie zu den Grammatik für Entwickler Konsole und melden Sie sich für ein Konto an. Wenn Sie bereits ein Grammarly-Konto haben, können Sie sich damit bei der Konsole anmelden.
  2. Klicken Sie nach der Anmeldung im Dashboard der Konsole auf die Neue Anwendung Schaltfläche, um eine neue Anwendung zu erstellen. Geben Sie den Namen Ihrer App ein und klicken Sie auf Erstellen um den Vorgang abzuschließen.
  3. Wählen Sie als Nächstes im linken Bereich des Dashboards Ihrer Anwendung die aus Netz Registerkarte, um die Anmeldeinformationen Ihrer Anwendung auf der Seite mit den Webclient-Einstellungen anzuzeigen.
  4. Kopieren Sie die bereitgestellte Client-ID. Beachten Sie auf derselben Seite die Kurzanleitung zur Integration des Grammarly SDK in einen Webclient. Das SDK ist mit React-, Vue.js- und einfachen JavaScript-Clients kompatibel. Sie können das SDK auch in HTML integrieren, indem Sie das SDK als Skript-Tag hinzufügen.

Das Grammarly Text Editor SDK unterstützt die neuesten Versionen gängiger Desktop-Browser: Chrome, Firefox, Safari, Edge, Opera und Brave. Derzeit gibt es keine Unterstützung für mobile Browser.

Integrieren Sie das SDK von Grammarly in einen React-Texteditor

Erste, Erstellen Sie eine React-Anwendung. Erstellen Sie als Nächstes im Stammverzeichnis Ihres Projektordners eine ENV-Datei, die Ihre Umgebungsvariable enthält: Ihre ClientID. Gehen Sie zur Seite mit den Webeinstellungen Ihrer Anwendung in der Grammarly-Entwicklerkonsole und kopieren Sie Ihre ClientID.

REACT_APP_GRAMMARLY_CLIENT_ID= Kunden-ID

1. Installieren Sie die erforderlichen Pakete

Führen Sie diesen Befehl auf Ihrem Terminal aus, um das Grammarly React Text Editor SDK in Ihrer App zu installieren:

npm installieren @Grammatik/editor-sdk-react

2. Erstellen Sie einen Texteditor

Erstellen Sie nach der Installation des Grammarly React-Texteditor-SDK einen neuen Ordner im /src-Verzeichnis Ihrer React-Anwendung und nennen Sie ihn „components“. Erstellen Sie in diesem Ordner eine neue Datei: TextEditor.js.

Fügen Sie in der Datei TextEditor.js den folgenden Code hinzu:

importieren Reagieren aus'reagieren'
importieren { GrammarlyEditorPlugin } aus'@grammatik/editor-sdk-react'
FunktionTexteditor() {
zurückkehren (
<divKlassenname="App">
<HeaderKlassenname="App-Header">
 clientId={prozess.env. REACT_APP_GRAMMERLY_CLIENT_ID}
 config={{ Aktivierung: "sofort" }}
 >
<EingangPlatzhalter="Teile deine Gedanken!!" />
GrammarlyEditorPlugin>
Header>
div>
 );
}
ExportStandard Texteditor;

Im obigen Code importieren Sie das GrammarlyEditorPlugin aus dem Grammarly-React SDK und umschließen ein Eingabe-Tag mit dem GrammarlyEditorPlugin.

Das GrammarlyEditorPlugin übernimmt zwei Eigenschaften: clientID und eine Konfigurationseigenschaft, die die Aktivierung auf sofort festlegt. Diese Eigenschaft aktiviert das Plugin und stellt es dem Benutzer zur Verfügung, sobald die Seite geladen wird.

Wenn Sie die Grammarly-Browsererweiterung haben, müssen Sie sie dafür deaktivieren oder deinstallieren Tutorial, da das Plugin in Ihrem Projekt einen Fehler auslöst, sobald es die Erweiterung auf Ihrer erkennt Browser.

Das Editor-Plugin von Grammarly verfügt über weitere zusätzliche Konfigurationseigenschaften, mit denen Sie Ihren Editor anpassen können. Sie beinhalten:

  • Automatische Vervollständigung: Diese Eigenschaft vervollständigt Sätze für Ihre Benutzer während der Eingabe.
  • ToneDetector: Dies zeigt die Tondetektor-Schnittstelle.

3. Rendern Sie die Text-Editor-Komponente

Fügen Sie den folgenden Code in Ihre app.js-Datei ein, um Ihre Texteditor-Komponente zu rendern:

importieren Texteditor aus'./components/TextEditor';
FunktionApp() {
zurückkehren (
<divKlassenname="App">
<HeaderKlassenname="App-Header">
<Texteditor />
Header>
div>
 );
}
ExportStandard Anwendung;

Führen Sie nun diesen Befehl auf Ihrem Terminal aus, um den Entwicklungsserver hochzufahren und die Ergebnisse in Ihrem Browser anzuzeigen:

npm Start

Ihr Grammarly-fähiger Editor sollte etwa so aussehen:

Beachten Sie, dass Sie ein Eingabe-Tag mit dem GrammarlyEditorPlugin umschlossen haben. Sie können auch ein Textarea-Element oder ein beliebiges Element mit umschließen das nützliche contenteditable-Attribut auf „wahr“ setzen.

Verwenden eines Textarea-Tags:

 clientId={prozess.env. REACT_APP_GRAMMERLY_CLIENT_ID}
 config={{ Aktivierung: "sofort" }}
>
<TextbereichPlatzhalter=" Teile deine Gedanken!!" />
GrammarlyEditorPlugin>

Führen Sie diesen Befehl auf Ihrem Terminal aus, um die Ergebnisse in Ihrem Browser anzuzeigen:

npm Start

Sie sollten dann Ihren grammatikalisch aktivierten Textbereich sehen:

Integration mit einem Rich-Text-Editor wie TinyMCE

Sie können auch einen vollwertigen Texteditor mit dem GrammarlyEditorPlugin verpacken. Das Grammarly Text Editor SDK ist mit mehreren Rich-Text-Editoren kompatibel, darunter:

  • TinyMCE
  • Schiefer
  • CKEditor
  • Feder

TinyMCE ist ein einfach zu bedienender Texteditor mit vielen Formatierungs- und Bearbeitungswerkzeugen, mit denen Benutzer Inhalte innerhalb einer benutzerfreundlichen Oberfläche schreiben und bearbeiten können.

Um den Editor von TinyMCE in eine React-Anwendung mit aktiviertem Grammatik-Schreibassistenten zu integrieren, besuchen Sie zuerst TinyMCE und melden Sie sich für ein Entwicklerkonto an. Geben Sie als Nächstes im Onboarding-Dashboard eine Domänen-URL für Ihre Anwendung an und klicken Sie auf Weiter: Fahren Sie mit Ihrem Dashboard fort Schaltfläche, um den Einrichtungsvorgang abzuschließen.

Für die lokale Entwicklung müssen Sie die Domäne nicht angeben, da die localhost-URL von festgelegt wird Standardmäßig müssen Sie jedoch, sobald Sie Ihre React-Anwendung an die Produktion senden, die Live bereitstellen Domain-URL.

Kopieren Sie zuletzt Ihren API-Schlüssel von Ihrem Entwickler-Dashboard und gehen Sie zurück zu Ihrem Projekt in Ihrem Code-Editor und fügen Sie den API-Schlüssel in die zuvor erstellte ENV-Datei ein:

REACT_APP_TINY_MCE_API_KEY="API-Schlüssel"

Gehen Sie nun zu Ihrer TextEditor.js-Datei und nehmen Sie die folgenden Änderungen vor:

  • Führen Sie die folgenden Importe durch: 
    importieren Reagieren, { useRef } aus'reagieren';
    importieren { Editor } aus'@tinymce/tinymce-reagieren';
    Fügen Sie den useRef-Hook hinzu und importieren Sie die TinyMCE-Editor-Komponente aus dem installierten Paket.
  • Fügen Sie in der funktionalen Komponente den folgenden Code hinzu: 
    konst editorRef = useRef(Null);
    Der useRef-Hook ermöglicht es Ihnen, veränderliche Werte zwischen Renderings beizubehalten. Sie verwenden die Variable „editorRef“, um den Zustand der im Editor eingegebenen Daten beizubehalten.
  • Geben Sie schließlich die Editor-Komponente aus der TinyMCE-Bibliothek zurück: 
     apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editor) => editorRef.current = editor}
     initialValue="<P>Dies ist der anfängliche Inhalt des Editors.P>"
     init={{
     Höhe: 500,
     Menüleiste: FALSCH,
     Plugins: [
    'advlist', 'autolink', 'Listen', 'Verknüpfung', 'Bild', 'Charmap', 'Vorschau',
    'Anker', 'SucheErsetzen', 'visuelle Blöcke', 'Code', 'Vollbild',
    'DatumUhrzeit einfügen', 'Medien', 'Tisch', 'Code', 'Hilfe', 'Wortzahl'
     ],
     Symbolleiste: 'rückgängig machen wiederholen | Blöcke | ' +
    'fett kursiv Vorfarbe | alignleft aligncenter ' +
    'alignright alignjustify | bullist numlist ausrücken einrücken | ' +
    'Format entfernen | Hilfe',
     Inhaltsstil: 'body { Schriftfamilie: Helvetica, Arial, serifenlos; Schriftgröße: 14px }'
     }}
    />
  • Die Komponente definiert die Editoreigenschaften, also den API-Key, den Initialwert, ein Objekt mit der Höhe des Editors, die Plugins und Toolbar-Eigenschaften und schließlich die Methode editorRef.current, die den Wert des Parameters „editor“ der „editorRef“ zuweist Variable.
  • Der „editor“-Parameter ist ein Ereignisobjekt, das übergeben wird, wenn das „onInit“-Ereignis ausgelöst wird.

Der vollständige Code sollte wie folgt aussehen:

importieren Reagieren, { useRef } aus'reagieren';
importieren { GrammarlyEditorPlugin } aus'@grammatik/editor-sdk-react';
importieren { Editor } aus'@tinymce/tinymce-reagieren';
FunktionTexteditor() {
konst editorRef = useRef(Null);
zurückkehren (
<divKlassenname="App">
<HeaderKlassenname="App-Header">
 clientId={prozess.env. REACT_APP_GRAMMERLY_CLIENT_ID}
 config={
 { Aktivierung: "sofort" }}
 >
 apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editor) => editorRef.current = editor}
 initialValue="<P>Dies ist der anfängliche Inhalt des Editors. P>"
 init={{
 Höhe: 500,
 Menüleiste: FALSCH,
 Plugins: [
'advlist', 'autolink', 'Listen', 'Verknüpfung', 'Bild', 'Charmap', 'Vorschau',
'Anker', 'SucheErsetzen', 'visuelle Blöcke', 'Code', 'Vollbild',
'DatumUhrzeit einfügen', 'Medien', 'Tisch', 'Code', 'Hilfe', 'Wortzahl'
 ],
 Symbolleiste: 'rückgängig machen wiederholen | Blöcke | ' +
'fett kursiv Vorfarbe | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist ausrücken einrücken | ' +
'Format entfernen | Hilfe',
 Inhaltsstil: 'body { Schriftfamilie: Helvetica, Arial, serifenlos; Schriftgröße: 14px }'
 }}
 />
GrammarlyEditorPlugin>
Header>
div>
 );
}
ExportStandard Texteditor;

In diesem Code umschließen Sie die TinyMCE-Editor-Komponente mit dem GrammarlyEditorPlugin, um die Grammarly Assistance-Funktion in den TinyMCE-Texteditor zu integrieren. Drehen Sie abschließend den Entwicklungsserver hoch, um die Änderungen zu speichern und zu navigieren http://localhost: 3000 in Ihrem Browser, um die Ergebnisse anzuzeigen.

Verwenden Sie Grammarly, um die Benutzerproduktivität zu verbessern

Das SDK von Grammarly bietet ein leistungsstarkes Tool, mit dem Sie die Qualität und Genauigkeit Ihrer Inhalte in einem React-Texteditor verbessern können.

Es lässt sich einfach in bestehende Projekte integrieren und bietet umfassende Grammatik- und Rechtschreibprüfungsfunktionen, die das Schreiberlebnis der Benutzer verbessern können.