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

О чём эта статья

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

Ключевые понятия

• Grammarly Text Editor SDK — клиентский пакет для интеграции функций проверки и подсказок грамматики прямо в веб-редактор.
• Client ID — идентификатор приложения в консоли Grammarly, необходимый для инициализации плагина.
• TinyMCE — пример стороннего rich text-редактора, с которым SDK совместим.

Что нужно подготовить перед интеграцией

• Аккаунт Grammarly (или регистрация в Grammarly for Developers).
• Проект на React (create-react-app или аналог).
• Доступ к файлу окружения (.env) в корне проекта.
• Для TinyMCE: API-ключ от TinyMCE для продакшена.

Important: SDK работает только в десктопных браузерах: Chrome, Firefox, Safari, Edge, Opera и Brave. Мобильные браузеры пока не поддерживаются.

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

1. Перейдите в консоль Grammarly for Developers и создайте учётную запись или войдите в существующую.

2. На дашборде нажмите кнопку New app и заполните поля, затем подтвердите создание.

3. В настройках приложения выберите вкладку Web и скопируйте Client ID. Следуйте подсказкам на странице, чтобы узнать базовый сценарий интеграции SDK.

SDK совместим с React, Vue.js и обычным JavaScript. Его также можно подключить через тег