Je pro vás obtížné dodat práci včas bez překlepů a gramatických chyb? Může to být stresující, zvláště když se chcete ujistit, že je vše perfektní – používání Grammarly může zlepšit vaši produktivitu a zkušenosti s psaním.
Grammarly je cloudová kontrola gramatiky a korektor. Zjišťuje a opravuje gramatické, pravopisné, interpunkční chyby a další chyby v psaní. Nabízí také návrhy na rozšíření slovní zásoby, které vám pomohou zlepšit kvalitu vašeho psaní.
Postupujte dále a zjistěte, jak integrovat Grammarly do textového editoru postaveného s Reactem.
Co je gramatika pro vývojáře?
Grammarly je široce uznávána pro své rozšíření prohlížeče, které můžete použít k opravě gramatických chyb v textovém editoru webových stránek. Grammarly for Developers je funkce na Grammarly, která vám pomáhá integrovat automatické nástroje pro korektury a odhalování plagiátů Grammarly do vašich webových aplikací.
Nyní můžete použít Grammarly k vytvoření vestavěné funkce pro úpravu textu v reálném čase do vaší webové aplikace pomocí sady Grammarly Software Development Kit (SDK). To umožňuje vašim uživatelům přístup ke všem funkcím Grammarly, aniž by si museli stahovat rozšíření prohlížeče.
Vytvořte novou aplikaci v Grammarly Developer Console
Nastavte novou aplikaci na vývojářské konzoli Grammarly podle následujících kroků:
- Zamiřte k Gramatika pro vývojáře konzole a zaregistrujte si účet. Pokud již máte účet Grammarly, můžete jej použít k přihlášení do konzole.
- Po přihlášení klikněte na hlavním panelu konzoly na Nová aplikace tlačítko pro vytvoření nové aplikace. Vyplňte název své aplikace a stiskněte Vytvořit dokončit proces.
- Dále v levém podokně řídicího panelu vaší aplikace vyberte Web zobrazíte přihlašovací údaje vaší aplikace na stránce nastavení webového klienta.
- Zkopírujte poskytnuté ID klienta. Na stejné stránce si všimněte rychlého průvodce, jak integrovat Grammarly SDK do webového klienta. SDK je kompatibilní s klienty React, Vue.js a plain JavaScript. Sadu SDK můžete také integrovat do HTML přidáním sady SDK jako značky skriptu.
Sada Grammarly Text Editor SDK podporuje nejnovější verze oblíbených desktopových prohlížečů: Chrome, Firefox, Safari, Edge, Opera a Brave. V současné době neexistuje žádná podpora pro mobilní prohlížeče.
Integrujte Grammarly's SDK do textového editoru React
První, vytvořit aplikaci React. Dále v kořenovém adresáři složky vašeho projektu vytvořte soubor ENV, který bude obsahovat vaši proměnnou prostředí: vaše ClientID. Přejděte na stránku nastavení webu vaší aplikace ve Vývojářské konzoli Grammarly a zkopírujte své ClientID.
REACT_APP_GRAMMARLY_CLIENT_ID= ClientID1. Nainstalujte požadované balíčky
Spuštěním tohoto příkazu na svém terminálu nainstalujte sadu Grammarly React Text Editor SDK do vaší aplikace:
instalace npm @gramaticky/editor-sdk-react2. Vytvořte textový editor
Po instalaci sady SDK textového editoru Grammarly React vytvořte novou složku v adresáři /src vaší aplikace React a pojmenujte ji jako komponenty. V této složce vytvořte nový soubor: TextEditor.js.
Do souboru TextEditor.js přidejte níže uvedený kód:
import Reagovat z'reagovat'
import { GrammarlyEditorPlugin } z'@grammarly/editor-sdk-react'funkceTextový editor() {
vrátit se (
<divjméno třídy="Aplikace">
<záhlavíjméno třídy="Záhlaví aplikace">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktivace: "bezprostřední" }}
>
<vstupzástupný symbol="Sdílej svoje myšlenky!!" />
GrammarlyEditorPlugin>
záhlaví>
div>
);
}
vývoznívýchozí Textový editor;
Ve výše uvedeném kódu importujete GrammarlyEditorPlugin ze sady Grammarly-React SDK a zabalíte vstupní značku do GrammarlyEditorPlugin.
GrammarlyEditorPlugin má dvě vlastnosti: clientID a vlastnost config, která nastaví aktivaci na okamžitou. Tato vlastnost aktivuje plugin a zpřístupní jej uživateli, jakmile se stránka načte.
Pokud máte rozšíření prohlížeče Grammarly, musíte jej zakázat nebo odinstalovat tutoriál, protože plugin ve vašem projektu vyvolá chybu, jakmile zjistí rozšíření na vašem projektu prohlížeč.
Zásuvný modul editoru Grammarly má další dodatečné konfigurační vlastnosti, které můžete použít k přizpůsobení editoru. Obsahují:
- Autocomplete: Tato vlastnost doplňuje fráze pro vaše uživatele během psaní.
- ToneDetector: Zobrazuje rozhraní tónového detektoru.
3. Vykreslit komponentu textového editoru
Chcete-li vykreslit komponentu textového editoru, přidejte do souboru app.js níže uvedený kód:
import Textový editor z'./components/TextEditor';funkceAplikace() {
vrátit se (
<divjméno třídy="Aplikace">
<záhlavíjméno třídy="Záhlaví aplikace">
<Textový editor />
záhlaví>
div>
);
}
vývoznívýchozí Aplikace;
Nyní spusťte tento příkaz na svém terminálu, abyste roztočili vývojový server a zobrazte výsledky ve svém prohlížeči:
npm StartVáš editor s podporou gramatiky by měl vypadat nějak takto:
Všimněte si, že jste zabalili vstupní značku pomocí GrammarlyEditorPlugin. Můžete také zalomit prvek textarea nebo jakýkoli prvek užitečný atribut contenteditable nastavit na "true".
Použití značky textarea:
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktivace: "bezprostřední" }}
>
<textareazástupný symbol=" Sdílej svoje myšlenky!!" />
GrammarlyEditorPlugin>Chcete-li zobrazit výsledky v prohlížeči, spusťte tento příkaz na svém terminálu:
npm StartPoté byste měli vidět textovou oblast s povolenou gramatikou:
Integrace s editorem formátovaného textu, jako je TinyMCE
Pomocí GrammarlyEditorPlugin můžete také zabalit plnohodnotný textový editor. Sada Grammarly Text Editor SDK je kompatibilní s několika editory formátovaného textu, jako jsou:
- TinyMCE
- Břidlice
- Editor CK
- Brk
TinyMCE je snadno použitelný textový editor se spoustou nástrojů pro formátování a úpravy, které uživatelům umožňují psát a upravovat obsah v uživatelsky přívětivém rozhraní.
Chcete-li integrovat editor TinyMCE do aplikace React s povoleným asistentem psaní gramatiky, nejprve navštivte TinyMCE a zaregistrujte si účet vývojáře. Dále na řídicím panelu Onboarding zadejte adresu URL domény pro vaši aplikaci a klikněte na Další: Pokračujte na hlavní panel dokončete proces nastavení.
Pro místní vývoj nemusíte zadávat doménu, protože adresa URL localhost je nastavena pomocí ve výchozím nastavení však jakmile odešlete aplikaci React do produkce, musíte poskytnout živou verzi URL domény.
Nakonec zkopírujte klíč API z řídicího panelu vývojáře a vraťte se do svého projektu v editoru kódu a přidejte klíč API do souboru ENV, který jste vytvořili dříve:
REACT_APP_TINY_MCE_API_KEY="klíč API"Nyní přejděte do souboru TextEditor.js a proveďte následující změny:
- Proveďte následující importy:
Přidejte háček useRef a importujte komponentu TinyMCE Editor z nainstalovaného balíčku.import Reagovat, { useRef } z'reagovat';
import { Editor } z'@tinymce/tinymce-react'; - Do funkční komponenty přidejte níže uvedený kód:
Hák useRef vám umožňuje zachovat měnitelné hodnoty mezi rendery. Proměnnou editorRef použijete k udržení stavu dat zadaných v editoru.konst editorRef = useRef(nula); - Nakonec vraťte komponentu editoru z knihovny TinyMCE:
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, editor) => editorRef.current = editor}
initialValue="<p>Toto je počáteční obsah editoru.p>"
init={{
výška: 500,
lišta menu: Nepravdivé,
pluginy: [
'advlist', 'autolink', 'seznamy', 'odkaz', 'obraz', 'charmap', 'náhled',
'Kotva', 'hledatnahradit', 'vizuální bloky', 'kód', 'celá obrazovka',
'insertdatetime', 'média', 'stůl', 'kód', 'Pomoc', 'počet slov'
],
Panel nástrojů: 'vrátit zpět | bloky | ' +
'tučná kurzíva popředí | alignleft aligncenter' +
'alignright alignjustify | bullist numlist odsazení odsazení | ' +
'removeformat | Pomoc',
content_style: 'body { rodina písem: Helvetica, Arial, sans-serif; font-size: 14px }'
}}
/> - Komponenta definuje vlastnosti editoru, tj. API klíč, počáteční hodnotu, objekt s výškou editoru, pluginy a vlastnosti panelu nástrojů a nakonec metoda editorRef.current, která přiřadí hodnotu parametru "editor" parametru "editorRef" variabilní.
- Parametr "editor" je objekt události, který je předán při vyvolání události "onInit".
Kompletní kód by měl vypadat takto:
import Reagovat, { useRef } z'reagovat';
import { GrammarlyEditorPlugin } z'@grammarly/editor-sdk-react';
import { Editor } z'@tinymce/tinymce-react';
funkceTextový editor() {
konst editorRef = useRef(nula);
vrátit se (
<divjméno třídy="Aplikace">
<záhlavíjméno třídy="Záhlaví aplikace">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={
{ aktivace: "bezprostřední" }}
>
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, editor) => editorRef.current = editor}
initialValue="<p>Toto je počáteční obsah editoru. p>"
init={{
výška: 500,
lišta menu: Nepravdivé,
pluginy: [
'advlist', 'autolink', 'seznamy', 'odkaz', 'obraz', 'charmap', 'náhled',
'Kotva', 'hledatnahradit', 'vizuální bloky', 'kód', 'celá obrazovka',
'insertdatetime', 'média', 'stůl', 'kód', 'Pomoc', 'počet slov'
],
Panel nástrojů: 'vrátit zpět | bloky | ' +
'tučná kurzíva popředí | alignleft aligncenter' +
'alignright alignjustify | bullist numlist odsazení odsazení | ' +
'removeformat | Pomoc',
content_style: 'body { rodina písem: Helvetica, Arial, sans-serif; font-size: 14px }'
}}
/>
GrammarlyEditorPlugin>
záhlaví>
div>
);
}
vývoznívýchozí Textový editor;
V tomto kódu obalíte komponentu editoru TinyMCE s modulem GrammarlyEditorPlugin, abyste integrovali funkci pomoci Grammarly do textového editoru TinyMCE. Nakonec roztočte vývojový server, abyste uložili změny a přejděte na něj http://localhost: 3000 ve vašem prohlížeči pro zobrazení výsledků.
Použijte gramatiku ke zvýšení produktivity uživatelů
Grammarly's SDK poskytuje výkonný nástroj, který může pomoci zlepšit kvalitu a přesnost vašeho obsahu v textovém editoru React.
Snadno se integruje se stávajícími projekty a poskytuje komplexní možnosti kontroly gramatiky a pravopisu, které mohou zlepšit uživatelskou zkušenost s psaním.
