Как интегрировать текстовый редактор Grammarly в приложение React

Воспользуйтесь преимуществами функций проверки Grammarly с интеграцией в ваше собственное приложение.

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

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

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

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

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

Теперь вы можете использовать Grammarly для создания встроенной функции редактирования текста в реальном времени в ваше веб-приложение с помощью Grammarly's Software Development Kit (SDK). Это дает вашим пользователям доступ ко всем функциям Grammarly без необходимости загружать расширение для браузера.

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

Настройте новое приложение в консоли разработчика Grammarly, выполнив следующие действия:

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

После входа в систему на панели управления консоли нажмите кнопку «Новое приложение», чтобы создать новое приложение. Введите название своего приложения и нажмите «Создать», чтобы завершить процесс.

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

Скопируйте предоставленный идентификатор клиента. На той же странице обратите внимание на краткое руководство по интеграции Grammarly SDK в веб-клиент.

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

Grammarly Text Editor SDK поддерживает последние версии популярных настольных браузеров: Chrome, Firefox, Safari, Edge, Opera и Brave. В настоящее время нет поддержки мобильных браузеров.

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

Сначала создайте приложение React. Затем в корневом каталоге папки вашего проекта создайте файл ENV для хранения вашей переменной среды: вашего ClientID. Перейдите на страницу веб-настроек вашего приложения в консоли разработчика Grammarly и скопируйте свой ClientID.

REACT_APP_GRAMMARLY_CLIENT_ID= ClientID

1. Установите необходимые пакеты

Запустите эту команду на своем терминале, чтобы установить SDK Grammarly React Text Editor в ваше приложение:

npm install @grammarly/editor-sdk-react

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

После установки SDK текстового редактора Grammarly React создайте новую папку в каталоге /src вашего приложения React и назовите ее компоненты. Внутри этой папки создайте новый файл: TextEditor.js.

В файле TextEditor.js добавьте следующий код:

import React from 'react'

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

function TextEditor () {

return (

);

}

export default TextEditor;

В приведенном выше коде вы импортируете GrammarlyEditorPlugin из Grammarly-React SDK и заключаете входной тег в GrammarlyEditorPlugin.

GrammarlyEditorPlugin принимает два свойства: clientID и свойство конфигурации, которое устанавливает немедленную активацию. Это свойство активирует плагин и делает его доступным для пользователя сразу после загрузки страницы.

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