Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

Nehéznek találja, hogy időben végezzen munkát elírási és nyelvtani hibák nélkül? Ez különösen akkor lehet megterhelő, ha meg akar győződni arról, hogy minden tökéletes legyen – a Grammarly használata javíthatja a termelékenységet és az írási élményt.

A Grammarly egy felhő alapú nyelvtani ellenőrző és lektor. Felismeri és kijavítja a nyelvtani, helyesírási, központozási és egyéb írási hibákat. Szókincsbővítési javaslatokat is kínál, amelyek segítenek az írás minőségének javításában.

Kövesse a lépést, hogy megtudja, hogyan integrálhatja a Grammarly-t a React-tal épített szövegszerkesztőbe.

Mi a Grammarly a fejlesztőknek?

A Grammarly széles körben elismert böngészőbővítményéről, amellyel a webhely szövegszerkesztőjében kijavíthatja a nyelvtani hibákat. A Grammarly for Developers a Grammarly szolgáltatása, amely segít integrálni a Grammarly automatikus lektorálási és plágiumészlelő eszközeit a webalkalmazásaiba.

instagram viewer

Mostantól a Grammarly segítségével beépített valós idejű szövegszerkesztő funkciót hozhat létre webalkalmazásában a Grammarly Software Development Kit (SDK) segítségével. Ezzel a felhasználók hozzáférhetnek a Grammarly összes funkciójához anélkül, hogy le kellene tölteniük a böngészőbővítményt.

Hozzon létre egy új alkalmazást a Grammarly Developer Console-on

Állítson be egy új alkalmazást a Grammarly fejlesztői konzolján az alábbi lépések végrehajtásával:

  1. Irány a Nyelvtan fejlesztőknek konzolra, és regisztráljon egy fiókot. Ha már rendelkezik Grammarly-fiókkal, azzal bejelentkezhet a konzolba.
  2. A bejelentkezés után a konzol irányítópultján kattintson a Új alkalmazás gombot egy új alkalmazás létrehozásához. Írja be az alkalmazás nevét, és nyomja meg a gombot Teremt hogy befejezze a folyamatot.
  3. Ezután az alkalmazás irányítópultjának bal oldali ablaktábláján válassza ki a Web lapon megtekintheti az alkalmazás hitelesítő adatait a webkliens beállítási oldalán.
  4. Másolja ki a megadott ügyfél-azonosítót. Ugyanezen az oldalon tekintse meg a Grammarly SDK webes kliensbe történő integrálásának gyors útmutatóját. Az SDK kompatibilis a React, Vue.js és egyszerű JavaScript-ügyfelekkel. Az SDK-t HTML-be is integrálhatja, ha az SDK-t szkriptcímkeként adja hozzá.

A Grammarly Text Editor SDK támogatja a népszerű asztali böngészők legújabb verzióit: Chrome, Firefox, Safari, Edge, Opera és Brave. A mobilböngészők jelenleg nem támogatottak.

Integrálja a Grammarly SDK-t egy React szövegszerkesztőbe

Első, hozzon létre egy React alkalmazást. Ezután a projektmappa gyökérkönyvtárában hozzon létre egy ENV-fájlt a környezeti változó tárolására: a ClientID. Lépjen az alkalmazás webbeállítási oldalára a Grammarly's Developer Console-ban, és másolja ki ügyfélazonosítóját.

REACT_APP_GRAMMARLY_CLIENT_ID= Ügyfélazonosító

1. Telepítse a szükséges csomagokat

Futtassa ezt a parancsot a terminálon, hogy telepítse a Grammarly React szövegszerkesztő SDK-t az alkalmazásba:

npm telepítés @nyelvtanilag/editor-sdk-react

2. Hozzon létre egy szövegszerkesztőt

A Grammarly React szövegszerkesztő SDK telepítése után hozzon létre egy új mappát a React alkalmazás /src könyvtárában, és nevezze el az összetevőknek. Ebben a mappában hozzon létre egy új fájlt: TextEditor.js.

Adja hozzá az alábbi kódot a TextEditor.js fájlhoz:

import Reagál tól től'reagál'
import { GrammarlyEditorPlugin } tól től"@grammarly/editor-sdk-react"
funkcióSzöveg szerkesztő() {
Visszatérés (
<divosztály név="Alkalmazás">
<fejlécosztály név="Alkalmazás fejléc">
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ aktiválás: "azonnali" }}
 >
<bemenethelykitöltő="Oszd meg a gondolataidat!!" />
GrammarlyEditorPlugin>
fejléc>
div>
 );
}
exportalapértelmezett Szöveg szerkesztő;

A fenti kódban importálja a GrammarlyEditorPlugin-t a Grammarly-React SDK-ból, és becsomagolja a bemeneti címkét a GrammarlyEditorPlugin-nel.

A GrammarlyEditorPlugin két tulajdonságot vesz fel: a kliensazonosítót és egy config tulajdonságot, amely az aktiválást azonnalira állítja. Ez a tulajdonság aktiválja a beépülő modult, és az oldal betöltésekor azonnal elérhetővé teszi a felhasználó számára.

Ha rendelkezik a Grammarly böngészőbővítménnyel, akkor ehhez le kell tiltania vagy el kell távolítania oktatóanyag, mivel a projekthez tartozó beépülő modul hibát fog kiütni, amint észleli a bővítményt böngésző.

A Grammarly szerkesztő beépülő modulja további konfigurációs tulajdonságokkal rendelkezik, amelyek segítségével személyre szabhatja a szerkesztőt. Tartalmazzák:

  • Automatikus kiegészítés: Ez a tulajdonság kiegészíti a kifejezéseket a felhasználók számára gépelés közben.
  • ToneDetector: Ez mutatja a hangérzékelő interfészt.

3. Renderje le a Szövegszerkesztő összetevőt

Adja hozzá az alábbi kódot az app.js fájlhoz a szövegszerkesztő összetevő megjelenítéséhez:

import Szöveg szerkesztő tól től'./components/TextEditor';
funkcióApp() {
Visszatérés (
<divosztály név="Alkalmazás">
<fejlécosztály név="Alkalmazás fejléc">
<Szöveg szerkesztő />
fejléc>
div>
 );
}
exportalapértelmezett App;

Most futtassa ezt a parancsot a terminálon a fejlesztői kiszolgáló felpörgetéséhez, és az eredmények megtekintéséhez a böngészőben:

npm Rajt

A Grammarly-kompatibilis szerkesztőnek így kell kinéznie:

Figyeljük meg, egy bemeneti címkét csomagolt a GrammarlyEditorPlugin-nel. Szövegterület-elemet vagy bármilyen elemet becsomagolhat a hasznos contenteditable attribútum állítsa "igazra".

Szövegterület-címke használata:

 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ aktiválás: "azonnali" }}
>
<textareahelykitöltő=" Oszd meg a gondolataidat!!" />
GrammarlyEditorPlugin>

Futtassa ezt a parancsot a terminálon az eredmények megtekintéséhez a böngészőben:

npm Rajt

Ezután látnia kell a Grammarly-kompatibilis szövegterületet:

Integráljon egy Rich Text szerkesztővel, mint például a TinyMCE

A GrammarlyEditorPlugin segítségével egy teljes értékű szövegszerkesztőt is becsomagolhat. A Grammarly Text Editor SDK számos rich text szerkesztővel kompatibilis, mint például:

  • TinyMCE
  • Pala
  • CKE-szerkesztő
  • Írótoll

A TinyMCE egy könnyen használható szövegszerkesztő, számos formázó és szerkesztő eszközzel, amelyek lehetővé teszik a felhasználók számára, hogy egy felhasználóbarát felületen írjanak és szerkesszenek tartalmat.

Ha a TinyMCE szerkesztőjét egy React alkalmazásba szeretné integrálni a Grammarly írássegéddel, először látogasson el TinyMCE és regisztráljon egy fejlesztői fiókot. Ezután a Bevezetési irányítópulton adjon meg egy domain URL-t az alkalmazásához, és kattintson a gombra Következő: Tovább az irányítópultra gombot a beállítási folyamat befejezéséhez.

A helyi fejlesztéshez nem kell megadnia a tartományt, mivel a localhost URL-t a alapértelmezés szerint azonban, miután elküldi a React alkalmazást éles környezetben, meg kell adnia az élőt domain URL.

Végül másolja ki az API-kulcsot a fejlesztői irányítópultjáról, és lépjen vissza a projekthez a kódszerkesztőben, és adja hozzá az API-kulcsot a korábban létrehozott ENV-fájlhoz:

REACT_APP_TINY_MCE_API_KEY="API kulcs"

Most lépjen a TextEditor.js fájlba, és hajtsa végre a következő módosításokat:

  • Végezze el a következő importálást: 
    import Reakció, { useRef } tól től'reagál';
    import { Szerkesztő } tól től"@tinymce/tinymce-react";
    Adja hozzá a useRef hook-ot, és importálja a TinyMCE Editor összetevőt a telepített csomagból.
  • A funkcionális komponensben adja hozzá az alábbi kódot: 
    const editorRef = useRef(nulla);
    A useRef hook lehetővé teszi, hogy változtatható értékeket tartson fenn a megjelenítések között. Az editorRef változót fogja használni a szerkesztőbe beírt adatok állapotának fenntartására.
  • Végül adja vissza a szerkesztő összetevőt a TinyMCE könyvtárból: 
     apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editor) => editorRef.current = szerkesztő}
     kezdetiérték="<p>Ez a szerkesztő kezdeti tartalma.p>"
     init={{
     magasság: 500,
     menüsor: hamis,
     bővítmények: [
    'advlist', "autolink", 'listák', 'link', 'kép', 'charmap', 'előnézet',
    'horgony', 'searchreplace', "vizuális blokkok", 'kód', 'Teljes képernyő',
    'insertdatetime', 'média', 'asztal', 'kód', 'Segítség', 'szavak száma'
     ],
     eszköztár: 'visszavonás | blokkok | ' +
    'félkövér dőlt előszín | alignleft aligncenter ' +
    'alignright alignjustify | bullist numlist outdent indent | ' +
    'removeformat | Segítség',
     content_style: 'body { font-family: Helvetica, Arial, sans-serif; betűméret: 14 képpont }'
     }}
    />
  • A komponens határozza meg a szerkesztő tulajdonságait, azaz az API kulcsot, a kezdeti értéket, egy objektumot a szerkesztő magasságával, a beépülő modulokat és az eszköztár tulajdonságait, és végül az editorRef.current metódust, amely az "editor" paraméter értékét az "editorRef"-hez rendeli. változó.
  • Az "editor" paraméter egy eseményobjektum, amely az "onInit" esemény aktiválásakor kerül átadásra.

A teljes kódnak így kell kinéznie:

import Reakció, { useRef } tól től'reagál';
import { GrammarlyEditorPlugin } tól től"@grammarly/editor-sdk-react";
import { Szerkesztő } tól től"@tinymce/tinymce-react";
funkcióSzöveg szerkesztő() {
const editorRef = useRef(nulla);
Visszatérés (
<divosztály név="Alkalmazás">
<fejlécosztály név="Alkalmazás fejléc">
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={
 { aktiválás: "azonnali" }}
 >
 apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editor) => editorRef.current = szerkesztő}
 kezdetiérték="<p>Ez a szerkesztő kezdeti tartalma. p>"
 init={{
 magasság: 500,
 menüsor: hamis,
 bővítmények: [
'advlist', "autolink", 'listák', 'link', 'kép', 'charmap', 'előnézet',
'horgony', 'searchreplace', "vizuális blokkok", 'kód', 'Teljes képernyő',
'insertdatetime', 'média', 'asztal', 'kód', 'Segítség', 'szavak száma'
 ],
 eszköztár: 'visszavonás | blokkok | ' +
'félkövér dőlt előszín | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | Segítség',
 content_style: 'body { font-family: Helvetica, Arial, sans-serif; betűméret: 14 képpont }'
 }}
 />
GrammarlyEditorPlugin>
fejléc>
div>
 );
}
exportalapértelmezett Szöveg szerkesztő;

Ebben a kódban a TinyMCE szerkesztő összetevőt becsomagolja a GrammarlyEditorPlugin-nel, hogy integrálja a Grammarly segédfunkciót a TinyMCE szövegszerkesztőbe. Végül pörgesse fel a fejlesztői kiszolgálót a módosítások mentéséhez, és navigáljon ide http://localhost: 3000 a böngészőjében az eredmények megtekintéséhez.

Használja a Grammarly-t a felhasználói termelékenység javítására

A Grammarly SDK egy hatékony eszköz, amely segíthet javítani a tartalmad minőségét és pontosságát a React szövegszerkesztőben.

Könnyen integrálható a meglévő projektekkel, és átfogó nyelvtani és helyesírás-ellenőrző funkciókat kínál, amelyek javíthatják a felhasználói írási élményt.