Как разработчик, наличие инструмента, который может помочь улучшить грамматику и орфографию в вашем приложении, может быть ценным активом.
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 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.