Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

¿Le resulta difícil entregar un trabajo oportuno sin cometer errores tipográficos y gramaticales? Puede ser estresante, especialmente cuando quiere asegurarse de que todo sea perfecto: usar Grammarly puede mejorar su productividad y experiencia de escritura.

Grammarly es un corrector de gramática y corrector de pruebas basado en la nube. Detecta y corrige la gramática, la ortografía, la puntuación y otros errores de escritura. También ofrece sugerencias para mejorar el vocabulario que lo ayudan a mejorar la calidad de su escritura.

Siga para aprender cómo integrar Grammarly en un editor de texto creado con React.

¿Qué es Grammarly para desarrolladores?

Grammarly es ampliamente reconocido por su extensión de navegador que puede usar para corregir errores gramaticales en el editor de texto de un sitio web. Grammarly for Developers es una característica de Grammarly que lo ayuda a integrar las herramientas de detección de plagio y revisión automática de Grammarly en sus aplicaciones web.

instagram viewer

Ahora puede usar Grammarly para crear una función de edición de texto en tiempo real integrada en su aplicación web usando el kit de desarrollo de software (SDK) de Grammarly. Esto le da a sus usuarios acceso a todas las funciones de Grammarly sin necesidad de descargar la extensión del navegador.

Crear una nueva aplicación en Grammarly Developer Console

Configure una nueva aplicación en la consola para desarrolladores de Grammarly siguiendo estos pasos:

  1. Dirígete a la Grammarly para desarrolladores consola y regístrese para obtener una cuenta. Si ya tiene una cuenta de Grammarly, puede usarla para iniciar sesión en la consola.
  2. Después de iniciar sesión, en el tablero de la consola, haga clic en el Nueva aplicación botón para crear una nueva aplicación. Complete el nombre de su aplicación y presione Crear para terminar el proceso.
  3. A continuación, en el panel izquierdo del panel de su aplicación, seleccione el Web pestaña para ver las credenciales de su aplicación en la página de configuración del cliente web.
  4. Copie el ID de cliente proporcionado. En la misma página, observe la guía rápida sobre cómo integrar Grammarly SDK en un cliente web. El SDK es compatible con React, Vue.js y clientes de JavaScript sin formato. También puede integrar el SDK en HTML agregando el SDK como una etiqueta de secuencia de comandos.

El SDK de Grammarly Text Editor es compatible con las últimas versiones de los navegadores de escritorio populares: Chrome, Firefox, Safari, Edge, Opera y Brave. Actualmente no hay soporte para navegadores móviles.

Integre el SDK de Grammarly en un editor de texto React

Primero, crear una aplicación React. A continuación, en el directorio raíz de la carpeta de su proyecto, cree un archivo ENV para contener su variable de entorno: su ClientID. Diríjase a la página de configuración web de su aplicación en la Consola de desarrollador de Grammarly y copie su ID de cliente.

REACT_APP_GRAMMARLY_CLIENT_ID= ID de cliente

1. Instale los paquetes necesarios

Ejecute este comando en su terminal para instalar Grammarly React Text Editor SDK en su aplicación:

instalar npm @grammarly/editor-sdk-react

2. Crear un editor de texto

Después de instalar el SDK del editor de texto Grammarly React, cree una nueva carpeta en el directorio /src de su aplicación React y asígnele el nombre components. Dentro de esta carpeta, cree un nuevo archivo: TextEditor.js.

En el archivo TextEditor.js, agregue el siguiente código:

importar Reaccionar de'reaccionar'
importar { Complemento GrammarlyEditor } de'@grammarly/editor-sdk-reaccionar'
funciónEditor de texto() {
devolver (
<divisiónnombre de la clase="Aplicación">
<encabezamientonombre de la clase="Encabezado de la aplicación">
 clientId={proceso.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 configuración={{ activación: "inmediato" }}
 >
<aportemarcador de posición="¡¡Comparte tus pensamientos!!" />
Complemento GrammarlyEditor>
encabezamiento>
división>
 );
}
exportarpor defecto Editor de texto;

En el código anterior, importa GrammarlyEditorPlugin desde Grammarly-React SDK y envuelve una etiqueta de entrada con GrammarlyEditorPlugin.

GrammarlyEditorPlugin toma dos propiedades: clientID y una propiedad de configuración que establece la activación como inmediata. Esta propiedad activa el complemento y lo pone a disposición del usuario tan pronto como se carga la página.

Si tiene la extensión del navegador Grammarly, debe deshabilitarla o desinstalarla para esto tutorial ya que el complemento en su proyecto arrojará un error una vez que detecte la extensión en su navegador.

El complemento del editor de Grammarly tiene otras propiedades de configuración adicionales que puede usar para personalizar su editor. Incluyen:

  • Autocompletar: esta propiedad completa frases para sus usuarios a medida que escriben.
  • ToneDetector: Muestra la interfaz del detector de tonos.

3. Renderizar el componente del editor de texto

Agregue el código a continuación en su archivo app.js para representar su componente de editor de texto:

importar Editor de texto de'./componentes/TextEditor';
funciónaplicación() {
devolver (
<divisiónnombre de la clase="Aplicación">
<encabezamientonombre de la clase="Encabezado de la aplicación">
<Editor de texto />
encabezamiento>
división>
 );
}
exportarpor defecto aplicación;

Ahora, ejecute este comando en su terminal para activar el servidor de desarrollo y ver los resultados en su navegador:

npm comenzar

Su editor habilitado para Grammarly debería verse así:

Tenga en cuenta que envolvió una etiqueta de entrada con GrammarlyEditorPlugin. También puede envolver un elemento de área de texto o cualquier elemento con el atributo útil contenteditable establecido en "verdadero".

Usando una etiqueta de área de texto:

 clientId={proceso.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 configuración={{ activación: "inmediato" }}
>
<área de textomarcador de posición=" ¡¡Comparte tus pensamientos!!" />
Complemento GrammarlyEditor>

Ejecute este comando en su terminal para ver los resultados en su navegador:

npm comenzar

Luego debería ver su área de texto habilitada para Grammarly:

Integrar con un editor de texto enriquecido como TinyMCE

También puede empaquetar un editor de texto completo con GrammarlyEditorPlugin. Grammarly Text Editor SDK es compatible con varios editores de texto enriquecido como:

  • TinyMCE
  • Pizarra
  • CKEditor
  • Pluma

TinyMCE es un editor de texto fácil de usar con muchas herramientas de formato y edición que permiten a los usuarios escribir y editar contenido dentro de una interfaz fácil de usar.

Para integrar el editor de TinyMCE en una aplicación React con el asistente de escritura Grammarly habilitado, primero, visite TinyMCE y regístrese para obtener una cuenta de desarrollador. A continuación, en el panel de Incorporación, proporcione una URL de dominio para su aplicación y haga clic en el Siguiente: Continuar a su tablero botón para finalizar el proceso de configuración.

Para el desarrollo local, no es necesario que especifique el dominio, ya que la URL del host local la establece predeterminado, sin embargo, una vez que envíe su aplicación React a producción, debe proporcionar la versión en vivo URL del dominio.

Por último, copie su clave API desde su panel de desarrollador y regrese a su proyecto en su editor de código y agregue la clave API en el archivo ENV que creó anteriormente:

REACT_APP_TINY_MCE_API_KEY="Clave API"

Ahora, dirígete a tu archivo TextEditor.js y realiza los siguientes cambios:

  • Realiza las siguientes importaciones: 
    importar Reaccionar, {useRef} de'reaccionar';
    importar { Editor } de'@tinymce/tinymce-react';
    Agregue el gancho useRef e importe el componente Editor TinyMCE del paquete instalado.
  • En el componente funcional, agregue el siguiente código: 
    constante editorRef = useRef(nulo);
    El enlace useRef le permite persistir valores mutables entre renderizados. Utilizará la variable editorRef para mantener el estado de los datos escritos en el editor.
  • Finalmente, devuelva el componente del editor de la biblioteca TinyMCE: 
     apiKey={proceso.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editor) => editorRef.current = editor}
     valorinicial="<pag>Este es el contenido inicial del editor.pag>"
     inicializar={{
     altura: 500,
     Barra de menús: FALSO,
     complementos: [
    'asesor', 'enlace automático', 'liza', 'enlace', 'imagen', 'mapa de encanto', 'avance',
    'ancla', 'buscarreemplazar', 'bloques visuales', 'código', 'pantalla completa',
    'insertar fecha y hora', 'medios de comunicación', 'mesa', 'código', 'ayuda', 'el recuento de palabras'
     ],
     barra de herramientas: 'deshacer rehacer | bloques | ' +
    'negrita cursiva primer plano | alinear a la izquierda alinear al centro ' +
    'alinear a la derecha alinear justificar | bullist numlist sangría outdent | ' +
    'eliminar formato | ayuda',
     estilo_de_contenido: 'cuerpo { familia de fuentes: Helvetica, Arial, sans-serif; tamaño de fuente: 14px }'
     }}
    />
  • El componente define las propiedades del editor, es decir, la clave API, el valor inicial, un objeto con la altura del editor, los complementos y las propiedades de la barra de herramientas y, por último, el método editorRef.current que asigna el valor del parámetro "editor" al "editorRef" variable.
  • El parámetro "editor" es un objeto de evento que se pasa cuando se activa el evento "onInit".

El código completo debería verse así:

importar Reaccionar, {useRef} de'reaccionar';
importar { Complemento GrammarlyEditor } de'@grammarly/editor-sdk-reaccionar';
importar { Editor } de'@tinymce/tinymce-react';
funciónEditor de texto() {
constante editorRef = useRef(nulo);
devolver (
<divisiónnombre de la clase="Aplicación">
<encabezamientonombre de la clase="Encabezado de la aplicación">
 clientId={proceso.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 configuración={
 { activación: "inmediato" }}
 >
 apiKey={proceso.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editor) => editorRef.current = editor}
 valorinicial="<pag>Este es el contenido inicial del editor. pag>"
 inicializar={{
 altura: 500,
 Barra de menús: FALSO,
 complementos: [
'asesor', 'enlace automático', 'liza', 'enlace', 'imagen', 'mapa de encanto', 'avance',
'ancla', 'buscarreemplazar', 'bloques visuales', 'código', 'pantalla completa',
'insertar fecha y hora', 'medios de comunicación', 'mesa', 'código', 'ayuda', 'el recuento de palabras'
 ],
 barra de herramientas: 'deshacer rehacer | bloques | ' +
'negrita cursiva primer plano | alinear a la izquierda alinear al centro ' +
'alinear a la derecha alinear justificar | bullist numlist sangría outdent | ' +
'eliminar formato | ayuda',
 estilo_de_contenido: 'cuerpo { familia de fuentes: Helvetica, Arial, sans-serif; tamaño de fuente: 14px }'
 }}
 />
Complemento GrammarlyEditor>
encabezamiento>
división>
 );
}
exportarpor defecto Editor de texto;

En este código, envuelve el componente del editor TinyMCE con GrammarlyEditorPlugin para integrar la función de asistencia Grammarly en el editor de texto TinyMCE. Finalmente, active el servidor de desarrollo para guardar los cambios y navegue hasta http://localhost: 3000 en su navegador para ver los resultados.

Use Grammarly para mejorar la productividad del usuario

El SDK de Grammarly proporciona una poderosa herramienta que puede ayudar a mejorar la calidad y la precisión de su contenido en un editor de texto React.

Es fácil de integrar con proyectos existentes y proporciona funciones integrales de corrección gramatical y ortográfica que pueden mejorar la experiencia de escritura del usuario.