Vai jums ir grūti veikt darbu savlaicīgi, nepieļaujot drukas un gramatikas kļūdas? Tas var radīt stresu, jo īpaši, ja vēlaties pārliecināties, ka viss ir ideāli — Grammarly lietošana var uzlabot jūsu produktivitāti un rakstīšanas pieredzi.
Grammarly ir uz mākoņiem balstīts gramatikas pārbaudītājs un korektors. Tas nosaka un labo gramatikas, pareizrakstības, pieturzīmju un citas rakstīšanas kļūdas. Tā piedāvā arī vārdu krājuma uzlabošanas ieteikumus, kas palīdz uzlabot rakstīšanas kvalitāti.
Sekojiet līdzi, lai uzzinātu, kā Grammarly integrēt teksta redaktorā, kas izveidots ar React.
Kas ir gramatika izstrādātājiem?
Grammarly ir plaši pazīstams ar pārlūkprogrammas paplašinājumu, ko varat izmantot, lai labotu gramatikas kļūdas vietnes teksta redaktorā. Grammarly for Developers ir Grammarly funkcija, kas palīdz integrēt Grammarly automatizētos korektūru un plaģiāta noteikšanas rīkus jūsu tīmekļa lietojumprogrammās.
Tagad varat izmantot Grammarly, lai izveidotu iebūvētu reāllaika teksta rediģēšanas funkciju savā tīmekļa lietojumprogrammā, izmantojot Grammarly programmatūras izstrādes komplektu (SDK). Tādējādi lietotāji var piekļūt visām Grammarly funkcijām bez nepieciešamības lejupielādēt pārlūkprogrammas paplašinājumu.
Izveidojiet jaunu lietojumprogrammu Grammarly izstrādātāja konsolē
Iestatiet jaunu lietojumprogrammu Grammarly izstrādātāja konsolē, veicot šīs darbības:
- Dodieties uz Gramatika izstrādātājiem konsole un reģistrēties kontam. Ja jums jau ir Grammarly konts, varat to izmantot, lai pierakstītos konsolē.
- Pēc pierakstīšanās konsoles informācijas panelī noklikšķiniet uz Jauna lietotne pogu, lai izveidotu jaunu lietojumprogrammu. Ievadiet savas lietotnes nosaukumu un nospiediet Izveidot lai pabeigtu procesu.
- Pēc tam lietojumprogrammas informācijas paneļa kreisajā rūtī atlasiet Web cilni, lai tīmekļa klienta iestatījumu lapā skatītu savas lietojumprogrammas akreditācijas datus.
- Kopējiet norādīto klienta ID. Tajā pašā lapā skatiet īso ceļvedi par Grammarly SDK integrēšanu tīmekļa klientā. SDK ir saderīgs ar React, Vue.js un vienkāršiem JavaScript klientiem. Varat arī integrēt SDK HTML, pievienojot SDK kā skripta tagu.
Grammarly Text Editor SDK atbalsta jaunākās populāro darbvirsmas pārlūkprogrammu versijas: Chrome, Firefox, Safari, Edge, Opera un Brave. Pašlaik mobilās pārlūkprogrammas netiek atbalstītas.
Integrējiet Grammarly SDK React teksta redaktorā
Pirmkārt, izveidot React lietojumprogrammu. Pēc tam projekta mapes saknes direktorijā izveidojiet ENV failu, kurā būs jūsu vides mainīgais: jūsu klienta ID. Dodieties uz savas lietojumprogrammas tīmekļa iestatījumu lapu programmā Grammarly's Developer Console un nokopējiet savu klienta ID.
REACT_APP_GRAMMARLY_CLIENT_ID= Klienta ID1. Instalējiet nepieciešamās pakotnes
Palaidiet šo komandu savā terminālī, lai savā lietotnē instalētu Grammarly React teksta redaktora SDK:
npm instalēšana @grammarly/editor-sdk-react2. Izveidojiet teksta redaktoru
Pēc Grammarly React teksta redaktora SDK instalēšanas izveidojiet jaunu mapi React lietojumprogrammas direktorijā /src un nosauciet to par komponentiem. Šajā mapē izveidojiet jaunu failu: TextEditor.js.
Failā TextEditor.js pievienojiet tālāk norādīto kodu:
imports Reaģēt no'reaģēt'
imports { GrammarlyEditorPlugin } no'@grammarly/editor-sdk-react'funkcijuTeksta redaktors() {
atgriezties (
<divklasesNosaukums="Lietotne">
<galveneklasesNosaukums="Lietotnes galvene">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktivizēšana: "tūlītēja" }}
>
<ievadevietturis="Padalieties savās domās!!" />
GrammarlyEditorPlugin>
galvene>
div>
);
}
eksportētnoklusējuma Teksta redaktors;
Iepriekš minētajā kodā jūs importējat GrammarlyEditorPlugin no Grammarly-React SDK un aplauziet ievades tagu ar GrammarlyEditorPlugin.
GrammarlyEditorPlugin ietver divus rekvizītus: klienta ID un konfigurācijas rekvizītu, kas aktivizē tūlītēju. Šis rekvizīts aktivizē spraudni un padara to pieejamu lietotājam, tiklīdz lapa tiek ielādēta.
Ja jums ir pārlūkprogrammas Grammarly paplašinājums, jums tas ir jāatspējo vai jāatinstalē apmācība, jo jūsu projekta spraudnis parādīs kļūdu, tiklīdz tas atklās jūsu paplašinājumu pārlūkprogramma.
Grammarly redaktora spraudnim ir citi papildu konfigurācijas rekvizīti, kurus varat izmantot, lai pielāgotu redaktoru. Tajos ietilpst:
- Automātiskā pabeigšana: šis īpašums pabeidz frāzes jūsu lietotājiem, kad viņi raksta.
- ToneDetector: parāda toņu detektora saskarni.
3. Renderējiet teksta redaktora komponentu
Pievienojiet tālāk norādīto kodu savam app.js failam, lai renderētu teksta redaktora komponentu.
imports Teksta redaktors no'./components/TextEditor';funkcijuApp() {
atgriezties (
<divklasesNosaukums="Lietotne">
<galveneklasesNosaukums="Lietotnes galvene">
<Teksta redaktors />
galvene>
div>
);
}
eksportētnoklusējuma Lietotne;
Tagad palaidiet šo komandu savā terminālī, lai atvērtu izstrādes serveri un skatītu rezultātus savā pārlūkprogrammā:
npm sāktJūsu gramatikas redaktoram vajadzētu izskatīties apmēram šādi:
Ņemiet vērā, ka ievades tagu esat iesaiņojis ar GrammarlyEditorPlugin. Varat arī ietīt teksta apgabala elementu vai jebkuru elementu ar noderīgs saturējams atribūts iestatīt uz "true".
Izmantojot teksta apgabala tagu:
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ aktivizēšana: "tūlītēja" }}
>
<teksta apgabalsvietturis="Padalieties savās domās!!" />
GrammarlyEditorPlugin>Palaidiet šo komandu savā terminālī, lai skatītu rezultātus savā pārlūkprogrammā:
npm sāktPēc tam jums vajadzētu redzēt savu gramatikas teksta apgabalu:
Integrējiet ar bagātināta teksta redaktoru, piemēram, TinyMCE
Varat arī ietīt pilnvērtīgu teksta redaktoru, izmantojot GrammarlyEditorPlugin. Grammarly Text Editor SDK ir saderīgs ar vairākiem bagātināta teksta redaktoriem, piemēram:
- TinyMCE
- Šīferis
- CKE redaktors
- Quill
TinyMCE ir ērti lietojams teksta redaktors ar daudziem formatēšanas un rediģēšanas rīkiem, kas ļauj lietotājiem rakstīt un rediģēt saturu lietotājam draudzīgā saskarnē.
Lai integrētu TinyMCE redaktoru React lietojumprogrammā ar iespējotu Grammarly rakstīšanas palīgu, vispirms apmeklējiet TinyMCE un reģistrēties izstrādātāja kontam. Pēc tam Onboarding informācijas panelī norādiet savas lietojumprogrammas domēna URL un noklikšķiniet uz Nākamais: pārejiet uz informācijas paneli pogu, lai pabeigtu iestatīšanas procesu.
Vietējai attīstībai jums nav jānorāda domēns, jo lokālā saimniekdatora URL ir iestatījis pēc noklusējuma, tomēr, tiklīdz esat nosūtījis savu React lietojumprogrammu uz ražošanu, jums ir jānodrošina tiešraide domēna URL.
Visbeidzot nokopējiet savu API atslēgu no izstrādātāja informācijas paneļa un koda redaktorā atgriezieties pie sava projekta un pievienojiet API atslēgu iepriekš izveidotajā ENV failā:
REACT_APP_TINY_MCE_API_KEY="API atslēga"Tagad dodieties uz failu TextEditor.js un veiciet šādas izmaiņas:
- Veiciet šādu importēšanu:
Pievienojiet useRef āķi un importējiet TinyMCE redaktora komponentu no instalētās pakotnes.imports Reaģēt, { useRef } no'reaģēt';
imports { Redaktors } no"@tinymce/tinymce-react"; - Funkcionālajā komponentā pievienojiet tālāk norādīto kodu:
UseRef āķis ļauj saglabāt mainīgas vērtības starp renderēšanu. Jūs izmantosiet mainīgo editorRef, lai uzturētu redaktorā ievadīto datu stāvokli.konst editorRef = useRef(null); - Visbeidzot atgrieziet redaktora komponentu no TinyMCE bibliotēkas:
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, redaktors) => redaktorsRef.current = redaktors}
sākotnējā vērtība="<lpp>Šis ir sākotnējais redaktora saturs.lpp>"
init={{
augstums: 500,
ēdienkarte: viltus,
spraudņi: [
'advlist', "automātiskā saite", 'saraksti', 'saite', 'attēls', 'charmap', 'priekšskatījums',
'enkurs', 'searchplace', "vizuālie bloki", 'kods', "pilnekrāna režīms",
'insertdatetime', "mediji", 'tabula', 'kods', 'palīdzība', 'vārdu skaits'
],
rīkjosla: 'atsaukt pārtaisīšanu | bloki | ' +
'trekns slīpraksts priekškrāsa | izlīdzināt pa kreisi līdzinātājs ' +
'alignright alignjustify | bullist numlist outdent atkāpe | ' +
'removeformat | palīdzēt',
content_style: 'body { font-family: Helvetica, Arial, sans-serif; fonta izmērs: 14 pikseļi }'
}}
/> - Komponents definē redaktora rekvizītus, t.i., API atslēgu, sākotnējo vērtību, objektu ar redaktora augstumu, spraudņus un rīkjoslas rekvizītus, un visbeidzot metodi editorRef.current, kas piešķir parametra "editor" vērtību "editorRef" mainīgs.
- Parametrs "redaktors" ir notikuma objekts, kas tiek nodots, kad tiek aktivizēts notikums "onInit".
Pilnam kodam vajadzētu izskatīties šādi:
imports Reaģēt, { useRef } no'reaģēt';
imports { GrammarlyEditorPlugin } no'@grammarly/editor-sdk-react';
imports { Redaktors } no"@tinymce/tinymce-react";
funkcijuTeksta redaktors() {
konst editorRef = useRef(null);
atgriezties (
<divklasesNosaukums="Lietotne">
<galveneklasesNosaukums="Lietotnes galvene">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={
{ aktivizēšana: "tūlītēja" }}
>
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, redaktors) => redaktorsRef.current = redaktors}
sākotnējā vērtība="<lpp>Šis ir sākotnējais redaktora saturs. lpp>"
init={{
augstums: 500,
ēdienkarte: viltus,
spraudņi: [
'advlist', "automātiskā saite", 'saraksti', 'saite', 'attēls', 'charmap', 'priekšskatījums',
'enkurs', 'searchplace', "vizuālie bloki", 'kods', "pilnekrāna režīms",
'insertdatetime', "mediji", 'tabula', 'kods', 'palīdzība', 'vārdu skaits'
],
rīkjosla: 'atsaukt pārtaisīšanu | bloki | ' +
'trekns slīpraksts priekškrāsa | izlīdzināt pa kreisi līdzinātājs ' +
'alignright alignjustify | bullist numlist outdent atkāpe | ' +
'removeformat | palīdzēt',
content_style: 'body { font-family: Helvetica, Arial, sans-serif; fonta izmērs: 14 pikseļi }'
}}
/>
GrammarlyEditorPlugin>
galvene>
div>
);
}
eksportētnoklusējuma Teksta redaktors;
Šajā kodā TinyMCE redaktora komponents ir jāiekļauj GrammarlyEditorPlugin, lai integrētu Grammarly palīdzības līdzekli TinyMCE teksta redaktorā. Visbeidzot, pagrieziet izstrādes serveri, lai saglabātu izmaiņas un pārietu uz http://localhost: 3000 savā pārlūkprogrammā, lai skatītu rezultātus.
Izmantojiet Grammarly, lai uzlabotu lietotāju produktivitāti
Grammarly SDK nodrošina jaudīgu rīku, kas var palīdzēt uzlabot jūsu satura kvalitāti un precizitāti React teksta redaktorā.
To ir viegli integrēt esošajos projektos, un tas nodrošina visaptverošas gramatikas un pareizrakstības pārbaudes iespējas, kas var uzlabot lietotāja rakstīšanas pieredzi.
