Как разработчик, наличие инструмента, который может помочь улучшить грамматику и орфографию в вашем приложении, может быть ценным активом.

Grammarly предлагает пакет SDK для текстового редактора, который можно интегрировать в ваше приложение, чтобы улучшить процесс написания для ваших пользователей.

В этом блоге мы рассмотрим, как интегрировать SDK текстового редактора Grammarly в приложение ReactJS.

Что такое Grammarly для разработчиков?

Grammarly для разработчиков — это платформа, которая позволяет разработчикам интегрировать помощника письма Grammarly в свои приложения.

Это могут быть веб-приложения, мобильные приложения и многое другое. Интегрируя Grammarly в свое приложение, вы можете предоставить своим пользователям мощного помощника по письму, который поможет им улучшить свои навыки письма.

Что такое Grammarly Text Editor SDK?

Grammarly Text Editor SDK — это комплект для разработки программного обеспечения, который позволяет разработчикам интегрировать помощника письма Grammarly в свои текстовые редакторы.

Этот SDK предоставляет набор API-интерфейсов, которые позволяют разработчикам получать доступ к функциям помощника по письму Grammarly, таким как проверка орфографии, проверка грамматики и многое другое.

Обратите внимание, что некоторые рекомендации могут быть доступны только пользователям Grammarly, которые оплатили и связали свои аккаунты.

Создать приложение для разработчиков Grammarly

Чтобы начать использовать SDK Grammarly Text Editor, необходимо создать новое приложение Grammarly Developer. Для этого выполните следующие действия.

  • После входа в систему нажмите кнопку Мои приложения, чтобы перейти к панели управления Мои приложения.

  • Затем нажмите кнопку Новое приложение.

  • Назовите новое приложение и нажмите кнопку Создать.

  • После завершения вы будете перенаправлены на панель инструментов вашего приложения, где вы можете найти свой идентификатор клиента приложения.

Вы создали приложение для разработчиков Grammarly. Теперь давайте интегрируем Grammarly SDK в ваш текстовый редактор и посмотрим, как он работает.

Настройте проект React

  • Создайте проект React
yarn create react-app your-writing-assistance 

cd your-writing-assistance
  • Установите Grammarly ReactJs SDK
npm install @grammarly/editor-sdk-react

#OR

yarn add @grammarly/editor-sdk-react

Повтор сеанса для разработчиков

Выявляйте проблемы, выявляйте ошибки и устраняйте замедления работы, как никогда раньше, с помощью OpenReplay — набора для воспроизведения сеансов с открытым исходным кодом для разработчиков. Его можно разместить самостоятельно за несколько минут, что дает вам полный контроль над данными ваших клиентов.

Удачной отладки! Попробуйте использовать OpenReplay сегодня.

Создать текстовый редактор

В этом разделе мы создадим компонент TextEditor с некоторыми базовыми стилями.

import React from "react";

export const TextEditor = () => {
  return (
    <textarea
      placeholder="Write your thoughts..."
      style={{
        width: "800px",
        height: "300px",
        border: "1px solid gray",
        padding: "10px",
        fontSize: "16px",
        fontFamily: "Arial",
      }}
    />
  );
};

Здесь мы создали компонент TextEditor, используя элемент textarea и применив некоторые базовые стили для приятного внешнего вида.

Интегрируйте SDK в текстовый редактор

В этом разделе мы будем использовать GrammarlyEditorPlugin из @grammarly/editor-sdk-react для переноса компонента TextEditor и предоставления идентификатора клиента.

GrammarlyEditorPlugin — это компонент, предоставляемый Grammarly ReactJs SDK, который оборачивает элемент textarea и делает Grammarly Assistant доступным для помощи пользователю с грамматическими ошибками и ошибками.

Чтобы получить clientId, перейдите на панель инструментов Grammarly Developer App и перейдите к разделу clients.

import React from 'react';
import { GrammarlyEditorPlugin } from '@grammarly/editor-sdk-react';

export const TextEditor = () => {
  return (
    <React.Fragment>
      <GrammarlyEditorPlugin
        clientId={process.env.REACT_APP_GRAMMARLY_SDK_CLIENT_ID}
      >
        <textarea
          placeholder="Write your thoughts..."
          style={{
            width: '800px',
            height: '300px',
            border: '1px solid gray',
            padding: '10px',
            fontSize: '16px',
            fontFamily: 'Arial',
          }}
        />
      </GrammarlyEditorPlugin>
    </React.Fragment>
  );
};

Здесь мы используем переменные среды для чтения идентификатора клиента SDK. Не забудьте перезапустить сервер, чтобы загрузить переменные среды.

Протестируйте Помощник по написанию грамматики

После того, как вы интегрировали SDK в свой текстовый редактор, вы можете протестировать Grammarly Writing Assistant, введя текст в текстовый редактор.

Я проверил первый абзац этого раздела с помощью текстового редактора, который мы только что создали, и ниже вы можете увидеть, как он находит и предлагает вам грамматические ошибки, использование заглавных букв и многое другое.

Краткое содержание

В этом сообщении блога мы рассмотрели процесс интеграции SDK текстового редактора Grammarly в приложение ReactJS. Следуя этим шагам, вы можете предоставить своим пользователям мощного помощника по письму, который поможет им улучшить свои навыки письма.

Ресурсы

Первоначально опубликовано на https://blog.openreplay.com.