I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

Hai difficoltà a consegnare un lavoro tempestivo senza commettere errori di battitura ed errori grammaticali? Può essere stressante soprattutto quando vuoi assicurarti che tutto sia perfetto: usare Grammarly può migliorare la tua produttività e la tua esperienza di scrittura.

Grammarly è un correttore grammaticale e correttore di bozze basato su cloud. Rileva e corregge grammatica, ortografia, punteggiatura e altri errori di scrittura. Offre anche suggerimenti per migliorare il vocabolario che ti aiutano a migliorare la qualità della tua scrittura.

Segui per scoprire come integrare Grammarly in un editor di testo creato con React.

Cos'è la grammatica per gli sviluppatori?

Grammarly è ampiamente riconosciuto per la sua estensione del browser che puoi utilizzare per correggere errori grammaticali nell'editor di testo di un sito web. Grammarly for Developers è una funzionalità di Grammarly che ti aiuta a integrare gli strumenti automatici di correzione di bozze e rilevamento del plagio di Grammarly nelle tue applicazioni web.

instagram viewer

Ora puoi utilizzare Grammarly per creare una funzionalità di modifica del testo in tempo reale incorporata nella tua applicazione Web utilizzando il Software Development Kit (SDK) di Grammarly. Ciò consente ai tuoi utenti di accedere a tutte le funzionalità di Grammarly senza dover scaricare l'estensione del browser.

Crea una nuova applicazione su Grammarly Developer Console

Configura una nuova applicazione sulla console per sviluppatori di Grammarly seguendo questi passaggi:

  1. Vai al Grammatica per sviluppatori console e registrati per un account. Se hai già un account Grammarly, puoi usarlo per accedere alla console.
  2. Dopo aver effettuato l'accesso, nella dashboard della console, fare clic su Nuova app pulsante per creare una nuova applicazione. Inserisci il nome della tua app e premi Creare per terminare il processo.
  3. Successivamente, nel riquadro sinistro della dashboard dell'applicazione, seleziona il file ragnatela scheda per visualizzare le credenziali dell'applicazione nella pagina delle impostazioni del client Web.
  4. Copia l'ID cliente fornito. Nella stessa pagina, nota la guida rapida su come integrare Grammarly SDK su un client web. L'SDK è compatibile con React, Vue.js e semplici client JavaScript. Puoi anche integrare l'SDK in HTML aggiungendo l'SDK come tag di script.

L'SDK di Grammarly Text Editor supporta le versioni più recenti dei browser desktop più diffusi: Chrome, Firefox, Safari, Edge, Opera e Brave. Al momento non è disponibile alcun supporto per i browser per dispositivi mobili.

Integra l'SDK di Grammarly in un editor di testo React

Primo, creare un'applicazione React. Successivamente, nella directory principale della cartella del progetto, crea un file ENV per contenere la tua variabile di ambiente: il tuo ClientID. Vai alla pagina delle impostazioni web della tua applicazione sulla Developer Console di Grammarly e copia il tuo ClientID.

REACT_APP_GRAMMARLY_CLIENT_ID=IDCliente

1. Installa i pacchetti richiesti

Esegui questo comando sul tuo terminale per installare l'SDK dell'editor di testo Grammarly React nella tua app:

installazione npm @grammarly/editor-sdk-react

2. Crea un editor di testo

Dopo aver installato l'SDK dell'editor di testo Grammarly React, crea una nuova cartella nella directory /src della tua applicazione React e chiamala componenti. All'interno di questa cartella, crea un nuovo file: TextEditor.js.

Nel file TextEditor.js, aggiungi il codice seguente:

importare Reagire da'reagire'
importare { GrammarlyEditorPlugin } da'@grammarly/editor-sdk-reagire'
funzioneEditor di testo() {
ritorno (
<divnome della classe="App">
<intestazionenome della classe="Intestazione app">
 clientId={processo.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ Attivazione: "immediato" }}
 >
<ingressosegnaposto="Condividi i tuoi pensieri!!" />
GrammarlyEditorPlugin>
intestazione>
div>
 );
}
esportarepredefinito Editor di testo;

Nel codice precedente, importi GrammarlyEditorPlugin dall'SDK Grammarly-React e racchiudi un tag di input con GrammarlyEditorPlugin.

GrammarlyEditorPlugin accetta due proprietà: clientID e una proprietà config che imposta l'attivazione su immediate. Questa proprietà attiva il plugin e lo rende disponibile all'utente non appena la pagina viene caricata.

Se hai l'estensione del browser Grammarly, devi disabilitarla o disinstallarla per questo tutorial poiché il plug-in sul tuo progetto genererà un errore una volta che rileva l'estensione sul tuo navigatore.

Il plug-in dell'editor di Grammarly ha altre proprietà di configurazione aggiuntive che puoi utilizzare per personalizzare il tuo editor. Loro includono:

  • Completamento automatico: questa proprietà completa le frasi per i tuoi utenti durante la digitazione.
  • ToneDetector: mostra l'interfaccia del rilevatore di toni.

3. Renderizza il componente dell'editor di testo

Aggiungi il codice seguente nel tuo file app.js per eseguire il rendering del componente dell'editor di testo:

importare Editor di testo da'./componenti/Editor di testo';
funzioneApp() {
ritorno (
<divnome della classe="App">
<intestazionenome della classe="Intestazione app">
<Editor di testo />
intestazione>
div>
 );
}
esportarepredefinito Applicazione;

Ora, esegui questo comando sul tuo terminale per avviare il server di sviluppo e visualizzare i risultati sul tuo browser:

npm inizio

Il tuo editor abilitato per Grammarly dovrebbe essere simile a questo:

Si noti che è stato eseguito il wrapping di un tag di input con GrammarlyEditorPlugin. Puoi anche avvolgere un elemento textarea o qualsiasi elemento con l'utile attributo contenteditable impostato su "vero".

Utilizzando un tag textarea:

 clientId={processo.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ Attivazione: "immediato" }}
>
<area di testosegnaposto=" Condividi i tuoi pensieri!!" />
GrammarlyEditorPlugin>

Esegui questo comando sul tuo terminale per visualizzare i risultati sul tuo browser:

npm inizio

Dovresti quindi vedere la tua area di testo abilitata per Grammarly:

Integrazione con un editor Rich Text come TinyMCE

Puoi anche eseguire il wrapping di un editor di testo completo con GrammarlyEditorPlugin. Grammarly Text Editor SDK è compatibile con diversi editor di testo RTF come:

  • TinyMCE
  • Ardesia
  • CK Editor
  • Penna

TinyMCE è un editor di testo facile da usare con molti strumenti di formattazione e modifica che consentono agli utenti di scrivere e modificare i contenuti all'interno di un'interfaccia intuitiva.

Per integrare l'editor di TinyMCE in un'applicazione React con l'assistente di scrittura Grammarly abilitato, prima visita TinyMCE e registrati per un account sviluppatore. Successivamente, nella dashboard Onboarding, fornisci un URL di dominio per la tua applicazione e fai clic su Avanti: vai alla tua dashboard pulsante per terminare il processo di configurazione.

Per lo sviluppo locale, non è necessario specificare il dominio poiché l'URL localhost è impostato da default, tuttavia, una volta spedita la tua applicazione React alla produzione, devi fornire il file live URL del dominio.

Infine, copia la tua chiave API dalla dashboard dello sviluppatore e torna al tuo progetto sul tuo editor di codice e aggiungi la chiave API nel file ENV che hai creato in precedenza:

REACT_APP_TINY_MCE_API_KEY="Chiave API"

Ora vai al tuo file TextEditor.js e apporta le seguenti modifiche:

  • Effettua le seguenti importazioni: 
    importare Reagisci, { useRef } da'reagire';
    importare { Editore } da'@tinymce/tinymce-reagisce';
    Aggiungere l'hook useRef e importare il componente TinyMCE Editor dal pacchetto installato.
  • Nel componente funzionale, aggiungi il codice seguente: 
    cost editorRef = useRef(nullo);
    L'hook useRef consente di rendere persistenti i valori mutabili tra i rendering. Utilizzerai la variabile editorRef per mantenere lo stato dei dati digitati nell'editor.
  • Infine, restituisci il componente dell'editor dalla libreria TinyMCE: 
     apiKey={processo.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editor) => editorRef.current = editor}
     valoreiniziale="<P>Questo è il contenuto iniziale dell'editor.P>"
     inizia={{
     altezza: 500,
     barra dei menu: falso,
     plugin: [
    'elenco annunci', 'collegamento automatico', 'elenchi', 'collegamento', 'Immagine', 'mappa di fascino', 'anteprima',
    'ancora', 'ricercasostituisci', 'blocchi visivi', 'codice', 'a schermo intero',
    'inseriredataora', 'media', 'tavolo', 'codice', 'aiuto', 'conteggio parole'
     ],
     barra degli strumenti: 'annulla rifai | blocchi | ' +
    'grassetto corsivo primo piano | alignleft aligncenter ' +
    'alignright alignjustify | bullist numlist outdent indent | ' +
    'rimuoviformato | aiuto',
     contenuto_stile: 'corpo { famiglia di caratteri: Helvetica, Arial, sans-serif; dimensione carattere: 14px }'
     }}
    />
  • Il componente definisce le proprietà dell'editor, ovvero la chiave API, il valore iniziale, un oggetto con l'altezza dell'editor, i plugin e toolbar, ed infine il metodo editorRef.current che assegna il valore del parametro "editor" al parametro "editorRef" variabile.
  • Il parametro "editor" è un oggetto evento che viene passato quando viene attivato l'evento "onInit".

Il codice completo dovrebbe assomigliare a questo:

importare Reagisci, { useRef } da'reagire';
importare { GrammarlyEditorPlugin } da'@grammarly/editor-sdk-reagire';
importare { Editore } da'@tinymce/tinymce-reagisce';
funzioneEditor di testo() {
cost editorRef = useRef(nullo);
ritorno (
<divnome della classe="App">
<intestazionenome della classe="Intestazione app">
 clientId={processo.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={
 { Attivazione: "immediato" }}
 >
 apiKey={processo.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editor) => editorRef.current = editor}
 valoreiniziale="<P>Questo è il contenuto iniziale dell'editor. P>"
 inizia={{
 altezza: 500,
 barra dei menu: falso,
 plugin: [
'elenco annunci', 'collegamento automatico', 'elenchi', 'collegamento', 'Immagine', 'mappa di fascino', 'anteprima',
'ancora', 'ricercasostituisci', 'blocchi visivi', 'codice', 'a schermo intero',
'inseriredataora', 'media', 'tavolo', 'codice', 'aiuto', 'conteggio parole'
 ],
 barra degli strumenti: 'annulla rifai | blocchi | ' +
'grassetto corsivo primo piano | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'rimuoviformato | aiuto',
 contenuto_stile: 'corpo { famiglia di caratteri: Helvetica, Arial, sans-serif; dimensione carattere: 14px }'
 }}
 />
GrammarlyEditorPlugin>
intestazione>
div>
 );
}
esportarepredefinito Editor di testo;

In questo codice, esegui il wrapping del componente dell'editor TinyMCE con GrammarlyEditorPlugin per integrare la funzione di assistenza Grammarly nell'editor di testo TinyMCE. Infine, avvia il server di sviluppo per salvare le modifiche e passare a http://localhost: 3000 nel browser per visualizzare i risultati.

Usa la grammatica per migliorare la produttività degli utenti

L'SDK di Grammarly fornisce un potente strumento che può aiutare a migliorare la qualità e l'accuratezza dei tuoi contenuti in un editor di testo React.

È facile da integrare con i progetti esistenti e fornisce funzionalità complete di grammatica e controllo ortografico che possono migliorare l'esperienza di scrittura dell'utente.