Гид по технологиям

Интеграция Grammarly в текстовый редактор на React

• 8 min read • Frontend • Обновлено 21 Dec 2025
Интеграция Grammarly в React-редактор
Интеграция Grammarly в React-редактор

Код в VSCode на ноутбуке, стоящем на полу

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

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

Ниже пошагово описано, как встроить Grammarly в текстовый редактор на React и что учесть при внедрении в проект.

Что такое Grammarly for Developers

Grammarly известен прежде всего как браузерное расширение, которое помогает исправлять ошибки в веб‑редакторах. Grammarly for Developers — это набор средств и SDK, позволяющий встроить автоматическую вычитку, проверку стиля и поиск плагиата прямо в ваши веб‑приложения.

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

Краткое определение: SDK — библиотека, которая подключается к клиентскому приложению и обеспечивает доступ к проверкам Grammarly в реальном времени.

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

Шаги для создания приложения и получения Client ID:

  1. Перейдите в консоль Grammarly for Developers и зарегистрируйте аккаунт. Если у вас уже есть аккаунт Grammarly, используйте его для входа.

Панель разработчика Grammarly в консоли

  1. После входа на дашборде нажмите кнопку New app для создания нового приложения. Введите имя приложения и нажмите Create.

Окно создания нового приложения на консоли Grammarly

  1. В левой панели настроек приложения выберите вкладку Web, чтобы увидеть настройки web‑клиента и данные для интеграции.

  2. Скопируйте Client ID, он понадобится в переменных окружения вашего проекта. На той же странице есть краткое руководство по интеграции SDK для web‑клиентов.

Учётные данные клиента Grammarly на странице настроек

Поддерживаемые среды: React, Vue.js, plain JavaScript и HTML-страницы через подключаемый тег script. SDK совместим с последними версиями популярных десктоп‑браузеров: Chrome, Firefox, Safari, Edge, Opera и Brave. Мобильные браузеры в настоящее время не поддерживаются.

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

Ниже — пошаговая инструкция с кодом и пояснениями.

Подготовка переменных окружения

В корне проекта создайте файл .env для хранения Client ID и других ключей. Важно: никогда не коммитьте секреты в публичный репозиторий.

Пример содержимого .env:

REACT_APP_GRAMMARLY_CLIENT_ID=ClientID

Замените ClientID на значение из панели разработчика Grammarly.

1. Установка пакета

Установите официальную библиотеку для React:

npm install @grammarly/editor-sdk-react

Или с yarn:

yarn add @grammarly/editor-sdk-react

2. Создание компонента TextEditor

Создайте папку src/components и файл TextEditor.js. Ниже — минимальный пример, который подключает GrammarlyEditorPlugin и оборачивает поле input.

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

function TextEditor() {
  return (
    

      

        
          
        
      

    

  );
}

export default TextEditor;

Пояснения:

  • clientId — строка из конфига Grammarly. Она подключает ваш фронтенд к учётной записи разработчика.
  • config.activation = “immediate” — плагин активируется сразу после загрузки страницы.
  • Вместо input можно использовать textarea или любой элемент с contenteditable=”true”.

Важно: если в браузере установлено расширение Grammarly, его лучше отключить при разработке — плагин проекта и расширение могут конфликтовать и вызывать ошибки в консоли.

Ошибка, вызванная плагином Grammarly в консоли браузера

Дополнительные параметры конфигурации:

  • Autocomplete — автодополнение фраз по мере ввода.
  • ToneDetector — отображение интерфейса обнаружения тона текста.

3. Рендеринг компонента в приложении

В файле src/App.js импортируйте и отрендерьте TextEditor:

import TextEditor from './components/TextEditor';

function App() {
  return (
    

      

        
      

    

  );
}

export default App;

Запустите приложение:

npm start

Откройте http://localhost:3000 и проверьте работу редактора. Ваш редактор с поддержкой Grammarly может выглядеть примерно так:

Поле ввода с подсветкой текста и активированным помощником Grammarly

Если вы используете textarea, просто оберните её тем же плагином: