Leitores como você ajudam a apoiar o MUO. Quando você faz uma compra usando links em nosso site, podemos ganhar uma comissão de afiliado. Consulte Mais informação.

Você está achando difícil entregar um trabalho pontual sem cometer erros de digitação e gramática? Pode ser estressante, especialmente quando você deseja garantir que tudo esteja perfeito - usar o Grammarly pode melhorar sua produtividade e experiência de escrita.

Grammarly é um verificador gramatical e revisor baseado em nuvem. Ele detecta e corrige gramática, ortografia, pontuação e outros erros de escrita. Ele também oferece sugestões de aprimoramento de vocabulário que ajudam você a melhorar a qualidade de sua escrita.

Acompanhe para saber como integrar o Grammarly em um editor de texto criado com o React.

O que é Grammarly para desenvolvedores?

Grammarly é amplamente reconhecido por sua extensão de navegador que você pode usar para corrigir erros gramaticais no editor de texto de um site. Grammarly for Developers é um recurso do Grammarly que ajuda você a integrar as ferramentas automatizadas de revisão e detecção de plágio do Grammarly em seus aplicativos da web.

instagram viewer

Agora você pode usar o Grammarly para criar um recurso integrado de edição de texto em tempo real em seu aplicativo da Web usando o Kit de Desenvolvimento de Software (SDK) do Grammarly. Isso dá aos usuários acesso a todos os recursos do Grammarly sem a necessidade de baixar a extensão do navegador.

Crie um novo aplicativo no console do desenvolvedor do Grammarly

Configure um novo aplicativo no console do desenvolvedor do Grammarly seguindo estas etapas:

  1. Dirija-se ao Gramática para desenvolvedores console e inscreva-se em uma conta. Se você já possui uma conta Grammarly, pode usá-la para entrar no console.
  2. Depois de entrar, no painel do console, clique no botão Novo aplicativo botão para criar um novo aplicativo. Preencha o nome do seu aplicativo e clique em Criar para terminar o processo.
  3. Em seguida, no painel esquerdo do painel do seu aplicativo, selecione o Rede guia para visualizar as credenciais do seu aplicativo na página de configurações do cliente web.
  4. Copie o ID do cliente fornecido. Na mesma página, observe o guia rápido sobre como integrar o Grammarly SDK em um cliente web. O SDK é compatível com clientes React, Vue.js e JavaScript simples. Você também pode integrar o SDK ao HTML adicionando o SDK como uma tag de script.

O Grammarly Text Editor SDK oferece suporte às versões mais recentes dos navegadores de desktop populares: Chrome, Firefox, Safari, Edge, Opera e Brave. No momento, não há suporte para navegadores móveis.

Integre o SDK do Grammarly em um editor de texto React

Primeiro, criar um aplicativo React. Em seguida, no diretório raiz da pasta do seu projeto, crie um arquivo ENV para armazenar sua variável de ambiente: seu ClientID. Vá para a página de configurações da web do seu aplicativo no console do desenvolvedor do Grammarly e copie seu ClientID.

REACT_APP_GRAMMARLY_CLIENT_ID= ClientID

1. Instale os pacotes necessários

Execute este comando em seu terminal para instalar o Grammarly React Text Editor SDK em seu aplicativo:

npm instalar @grammarly/editor-sdk-react

2. Crie um editor de texto

Depois de instalar o SDK do editor de texto Grammarly React, crie uma nova pasta no diretório /src do seu aplicativo React e nomeie-a como components. Dentro desta pasta, crie um novo arquivo: TextEditor.js.

No arquivo TextEditor.js, adicione o código abaixo:

importar Reagir de'reagir'
importar { GrammarlyEditorPlugin } de'@grammarly/editor-sdk-react'
funçãoEditor de texto() {
retornar (
<divnome da classe="Aplicativo">
<cabeçalhonome da classe="Cabeçalho do aplicativo">
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 configuração={{ ativação: "imediato" }}
 >
<entradaespaço reservado="Compartilhe seus pensamentos!!" />
Plugin GrammarlyEditor>
cabeçalho>
div>
 );
}
exportarpadrão Editor de texto;

No código acima, você importa o GrammarlyEditorPlugin do Grammarly-React SDK e agrupa uma tag de entrada com o GrammarlyEditorPlugin.

O GrammarlyEditorPlugin aceita duas propriedades: clientID e uma propriedade de configuração que define a ativação como imediata. Essa propriedade ativa o plug-in e o disponibiliza ao usuário assim que a página é carregada.

Se você tiver a extensão do navegador Grammarly, precisará desativá-la ou desinstalá-la para isso tutorial, pois o plug-in em seu projeto gerará um erro assim que detectar a extensão em seu navegador.

O plug-in do editor do Grammarly tem outras propriedades de configuração adicionais que você pode usar para personalizar seu editor. Eles incluem:

  • Preenchimento automático: esta propriedade completa frases para seus usuários conforme eles digitam.
  • ToneDetector: mostra a interface do detector de tom.

3. Renderizar o componente Editor de texto

Adicione o código abaixo em seu arquivo app.js para renderizar seu componente de editor de texto:

importar Editor de texto de'./components/TextEditor';
funçãoAplicativo() {
retornar (
<divnome da classe="Aplicativo">
<cabeçalhonome da classe="Cabeçalho do aplicativo">
<Editor de texto />
cabeçalho>
div>
 );
}
exportarpadrão Aplicativo;

Agora, execute este comando em seu terminal para ativar o servidor de desenvolvimento e visualizar os resultados em seu navegador:

npm começar

Seu editor habilitado para Grammarly deve se parecer com isto:

Observe que você envolveu uma tag de entrada com o GrammarlyEditorPlugin. Você também pode agrupar um elemento textarea ou qualquer elemento com o útil atributo contenteditable definido como "verdadeiro".

Usando uma tag textarea:

 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 configuração={{ ativação: "imediato" }}
>
<área de textoespaço reservado=" Compartilhe seus pensamentos!!" />
Plugin GrammarlyEditor>

Execute este comando em seu terminal para visualizar os resultados em seu navegador:

npm começar

Você deve então ver sua área de texto habilitada para Grammarly:

Integre com um editor de Rich Text como o TinyMCE

Você também pode agrupar um editor de texto completo com o GrammarlyEditorPlugin. O Grammarly Text Editor SDK é compatível com vários editores de rich text, como:

  • TinyMCE
  • Ardósia
  • Editor CK
  • pena

O TinyMCE é um editor de texto fácil de usar com muitas ferramentas de formatação e edição que permitem aos usuários escrever e editar conteúdo em uma interface amigável.

Para integrar o editor do TinyMCE em um aplicativo React com o assistente de escrita Grammarly ativado, primeiro visite TinyMCE e inscreva-se em uma conta de desenvolvedor. Em seguida, no painel Onboarding, forneça uma URL de domínio para seu aplicativo e clique no botão Em seguida: Continue para o seu painel botão para concluir o processo de configuração.

Para desenvolvimento local, você não precisa especificar o domínio, pois a URL do host local é definida por padrão, no entanto, depois de enviar seu aplicativo React para produção, você precisa fornecer o live URL do domínio.

Por fim, copie sua chave de API do painel do desenvolvedor e volte para seu projeto em seu editor de código e adicione a chave de API no arquivo ENV que você criou anteriormente:

REACT_APP_TINY_MCE_API_KEY="Chave API"

Agora, vá para o arquivo TextEditor.js e faça as seguintes alterações:

  • Faça as seguintes importações: 
    importar Reagir, { useRef } de'reagir';
    importar { Editor } de'@tinymce/tinymce-react';
    Adicione o hook useRef e importe o componente TinyMCE Editor do pacote instalado.
  • No componente funcional, adicione o código abaixo: 
    const editorRef = useRef(nulo);
    O gancho useRef permite que você persista valores mutáveis ​​entre as renderizações. Você usará a variável editorRef para manter o estado dos dados digitados no editor.
  • Finalmente, retorne o componente editor da biblioteca TinyMCE: 
     apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editor) => editorRef.current = editor}
     valorinicial="<p>Este é o conteúdo inicial do editor.p>"
     inicial ={{
     altura: 500,
     Barra de menu: falso,
     plug-ins: [
    'lista de anúncios', 'ligação automática', 'listas', 'link', 'imagem', 'charma', 'visualização',
    'âncora', 'pesquisar substituir', 'bloqueios visuais', 'código', 'tela cheia',
    'insertdatetime', 'meios de comunicação', 'mesa', 'código', 'ajuda', 'contagem de palavras'
     ],
     barra de ferramentas: 'desfazer refazer | blocos | ' +
    'preenchimento itálico em negrito | alinhar à esquerda alinhar centro ' +
    'alignright alignjustify | bullist numlist outdent indent | ' +
    'removerformato | ajuda',
     estilo_conteúdo: 'body { font-family: Helvetica, Arial, sans-serif; tamanho da fonte: 14px }'
     }}
    />
  • O componente define as propriedades do editor, ou seja, a chave API, o valor inicial, um objeto com a altura do editor, os plugins e propriedades da barra de ferramentas e, por último, o método editorRef.current que atribui o valor do parâmetro "editor" ao "editorRef" variável.
  • O parâmetro "editor" é um objeto de evento que é passado quando o evento "onInit" é disparado.

O código completo deve ficar assim:

importar Reagir, { useRef } de'reagir';
importar { GrammarlyEditorPlugin } de'@grammarly/editor-sdk-react';
importar { Editor } de'@tinymce/tinymce-react';
funçãoEditor de texto() {
const editorRef = useRef(nulo);
retornar (
<divnome da classe="Aplicativo">
<cabeçalhonome da classe="Cabeçalho do aplicativo">
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 configuração={
 { ativação: "imediato" }}
 >
 apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editor) => editorRef.current = editor}
 valorinicial="<p>Este é o conteúdo inicial do editor. p>"
 inicial ={{
 altura: 500,
 Barra de menu: falso,
 plug-ins: [
'lista de anúncios', 'ligação automática', 'listas', 'link', 'imagem', 'charma', 'visualização',
'âncora', 'pesquisar substituir', 'bloqueios visuais', 'código', 'tela cheia',
'insertdatetime', 'meios de comunicação', 'mesa', 'código', 'ajuda', 'contagem de palavras'
 ],
 barra de ferramentas: 'desfazer refazer | blocos | ' +
'preenchimento itálico em negrito | alinhar à esquerda alinhar centro ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removerformato | ajuda',
 estilo_conteúdo: 'body { font-family: Helvetica, Arial, sans-serif; tamanho da fonte: 14px }'
 }}
 />
Plugin GrammarlyEditor>
cabeçalho>
div>
 );
}
exportarpadrão Editor de texto;

Neste código, você agrupa o componente do editor TinyMCE com o GrammarlyEditorPlugin para integrar o recurso de assistência Grammarly no editor de texto TinyMCE. Por fim, ative o servidor de desenvolvimento para salvar as alterações e navegue até http://localhost: 3000 em seu navegador para ver os resultados.

Use o Grammarly para melhorar a produtividade do usuário

O SDK da Grammarly fornece uma ferramenta poderosa que pode ajudar a melhorar a qualidade e a precisão do seu conteúdo em um editor de texto React.

É fácil de integrar com projetos existentes e fornece recursos abrangentes de gramática e verificação ortográfica que podem melhorar a experiência de escrita do usuário.