Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

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

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

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

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

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

instagram viewer

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

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

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

  1. Направляйтесь к Грамматика для разработчиков консоли и зарегистрируйте учетную запись. Если у вас уже есть учетная запись Grammarly, вы можете использовать ее для входа в консоль.
  2. После входа в систему на приборной панели консоли нажмите кнопку Новое приложение кнопку для создания нового приложения. Введите название вашего приложения и нажмите Создавать чтобы завершить процесс.
  3. Затем на левой панели панели инструментов вашего приложения выберите Интернет вкладку для просмотра учетных данных вашего приложения на странице настроек веб-клиента.
  4. Скопируйте предоставленный идентификатор клиента. На той же странице обратите внимание на краткое руководство по интеграции 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= идентификатор клиента

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

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

установка нпм @грамматика/editor-sdk-react

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

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

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

Импортировать Реагировать от«реагировать»
Импортировать { GrammarlyEditorPlugin } от'@grammarly/editor-sdk-реагировать'
функцияТекстовый редактор() {
возвращаться (
<дивclassName="Приложение">
<заголовокclassName="Заголовок приложения">
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 конфиг={{ активация: "немедленный" }}
 >
<входзаполнитель="Поделитесь своими мыслями!!" />
Плагин GrammarlyEditor>
заголовок>
див>
 );
}
экспортпо умолчанию Текстовый редактор;

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

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

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

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

  • Автозаполнение: это свойство дополняет фразы для ваших пользователей по мере их ввода.
  • ToneDetector: показывает интерфейс детектора тона.

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

Добавьте приведенный ниже код в файл app.js для отображения компонента текстового редактора:

Импортировать Текстовый редактор от'./компоненты/текстовый редактор';
функцияПриложение() {
возвращаться (
<дивclassName="Приложение">
<заголовокclassName="Заголовок приложения">
<Текстовый редактор />
заголовок>
див>
 );
}
экспортпо умолчанию Приложение;

Теперь запустите эту команду на своем терминале, чтобы запустить сервер разработки и просмотреть результаты в браузере:

нпм начинать

Ваш редактор с поддержкой Grammarly должен выглядеть примерно так:

Обратите внимание, что вы обернули входной тег с GrammarlyEditorPlugin. Вы также можете обернуть элемент textarea или любой другой элемент с помощью полезный атрибут contenteditable установите значение «истина».

Использование тега textarea:

 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 конфиг={{ активация: "немедленный" }}
>
<текстовая областьзаполнитель="Поделитесь своими мыслями!!" />
Плагин GrammarlyEditor>

Запустите эту команду на своем терминале, чтобы просмотреть результаты в браузере:

нпм начинать

Затем вы должны увидеть текстовое поле с поддержкой грамматики:

Интеграция с редактором форматированного текста, таким как TinyMCE

Вы также можете обернуть полноценный текстовый редактор с помощью GrammarlyEditorPlugin. SDK Grammarly Text Editor совместим с несколькими текстовыми редакторами, такими как:

  • TinyMCE
  • Сланец
  • CKEditor
  • перо

TinyMCE — это простой в использовании текстовый редактор с множеством инструментов форматирования и редактирования, которые позволяют пользователям писать и редактировать контент в удобном интерфейсе.

Чтобы интегрировать редактор TinyMCE в приложение React с включенным помощником по написанию Grammarly, сначала посетите TinyMCE и зарегистрируйте учетную запись разработчика. Затем на панели Onboarding укажите URL-адрес домена для своего приложения и нажмите кнопку Далее: Перейти к панели управления кнопку, чтобы завершить процесс установки.

Для локальной разработки вам не нужно указывать домен, так как URL-адрес localhost задается по умолчанию, однако, как только вы отправляете свое приложение React в производство, вам необходимо предоставить URL-адрес домена.

Наконец, скопируйте свой ключ API с панели инструментов разработчика, вернитесь к своему проекту в редакторе кода и добавьте ключ API в файл ENV, который вы создали ранее:

REACT_APP_TINY_MCE_API_KEY="API-ключ"

Теперь перейдите к файлу TextEditor.js и внесите следующие изменения:

  • Сделайте следующий импорт: 
    Импортировать Реагируйте, {useRef} от«реагировать»;
    Импортировать { Редактор } от'@tinymce/tinymce-реагировать';
    Добавьте хук useRef и импортируйте компонент TinyMCE Editor из установленного пакета.
  • В функциональный компонент добавьте код ниже: 
    константа EditorRef = использоватьRef(нулевой);
    Хук useRef позволяет сохранять изменяемые значения между рендерингами. Вы будете использовать переменную editorRef для сохранения состояния данных, введенных в редакторе.
  • Наконец, верните компонент редактора из библиотеки TinyMCE: 
     apiKey={процесс.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editor) => editorRef.current = editor}
     начальное значение = "<п>Это исходное содержимое редактора.п>"
     инициализация={{
     высота: 500,
     строка меню: ЛОЖЬ,
     плагины: [
    'advlist', 'автоссылка', 'списки', 'связь', 'изображение', 'чармап', «предварительный просмотр»,
    'якорь', 'поиск заменить', «визуальные блоки», 'код', 'полноэкранный',
    'вставить дату и время', 'СМИ', 'стол', 'код', 'помощь', 'количество слов'
     ],
     панель инструментов: 'отменить повторить | блоки | ' +
    жирный курсив передний цвет | выравнивание по левому краю выравнивание по центру ' +
    'выравнивание по вертикали | Bullist numlist выступающий отступ | ' +
    'удалитьформат | помощь',
     content_style: 'тело { семейство шрифтов: Helvetica, Arial, без засечек; размер шрифта: 14 пикселей }'
     }}
    />
  • Компонент определяет свойства редактора, т.е. ключ API, начальное значение, объект с высотой редактора, плагины и свойства панели инструментов, и, наконец, метод editorRef.current, который присваивает значение параметра «editor» «editorRef». переменная.
  • Параметр «редактор» — это объект события, который передается при запуске события «onInit».

Полный код должен выглядеть так:

Импортировать Реагируйте, {useRef} от«реагировать»;
Импортировать { GrammarlyEditorPlugin } от'@grammarly/editor-sdk-реагировать';
Импортировать { Редактор } от'@tinymce/tinymce-реагировать';
функцияТекстовый редактор() {
константа EditorRef = использоватьRef(нулевой);
возвращаться (
<дивclassName="Приложение">
<заголовокclassName="Заголовок приложения">
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 конфигурация={
 { активация: "немедленный" }}
 >
 apiKey={процесс.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editor) => editorRef.current = editor}
 начальное значение = "<п>Это исходное содержимое редактора. п>"
 инициализация={{
 высота: 500,
 строка меню: ЛОЖЬ,
 плагины: [
'advlist', 'автоссылка', 'списки', 'связь', 'изображение', 'чармап', «предварительный просмотр»,
'якорь', 'поиск заменить', «визуальные блоки», 'код', 'полноэкранный',
'вставить дату и время', 'СМИ', 'стол', 'код', 'помощь', 'количество слов'
 ],
 панель инструментов: 'отменить повторить | блоки | ' +
жирный курсив передний цвет | выравнивание по левому краю выравнивание по центру ' +
'выравнивание по вертикали | Bullist numlist выступающий отступ | ' +
'удалитьформат | помощь',
 content_style: 'тело { семейство шрифтов: Helvetica, Arial, без засечек; размер шрифта: 14 пикселей }'
 }}
 />
Плагин GrammarlyEditor>
заголовок>
див>
 );
}
экспортпо умолчанию Текстовый редактор;

В этом коде вы заключаете компонент редактора TinyMCE в GrammarlyEditorPlugin, чтобы интегрировать функцию поддержки грамматики в текстовый редактор TinyMCE. Наконец, запустите сервер разработки, чтобы сохранить изменения и перейти к http://localhost: 3000 в браузере для просмотра результатов.

Используйте Grammarly для повышения производительности пользователей

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

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