Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Трудно ли ви е да изпълнявате навременна работа, без да правите правописни и граматически грешки? Може да бъде стресиращо, особено когато искате да сте сигурни, че всичко е перфектно – използването на Grammarly може да подобри вашата производителност и опит в писането.

Grammarly е базирана в облака програма за граматична проверка и коректор. Той открива и коригира граматически, правописни, пунктуационни и други грешки при писане. Той също така предлага предложения за подобряване на речниковия запас, които ви помагат да подобрите качеството на вашето писане.

Следвайте, за да научите как да интегрирате Grammarly в текстов редактор, създаден с React.

Какво е Grammarly за разработчици?

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

instagram viewer

Вече можете да използвате Grammarly, за да създадете вградена функция за редактиране на текст в реално време във вашето уеб приложение с помощта на комплекта за разработка на софтуер (SDK) на Grammarly. Това дава на вашите потребители достъп до всички функции на Grammarly, без да е необходимо да изтеглят разширението на браузъра.

Създайте ново приложение в Grammarly Developer Console

Настройте ново приложение в конзолата за разработчици на Grammarly, като следвате тези стъпки:

  1. Насочете се към Grammarly за разработчици конзола и се регистрирайте за акаунт. Ако вече имате акаунт в Grammarly, можете да го използвате, за да влезете в конзолата.
  2. След като влезете, на таблото за управление на конзолата щракнете върху Ново приложение бутон за създаване на ново приложение. Попълнете името на вашето приложение и натиснете Създавайте за да завършите процеса.
  3. След това в левия панел на таблото за управление на вашето приложение изберете Мрежа за да видите идентификационните данни на вашето приложение на страницата с настройки на уеб клиента.
  4. Копирайте предоставения клиентски идентификатор. На същата страница забележете краткото ръководство за това как да интегрирате Grammarly SDK в уеб клиент. SDK е съвместим с React, Vue.js и обикновени клиенти на JavaScript. Можете също да интегрирате SDK в HTML, като добавите SDK като таг за скрипт.

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

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

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

REACT_APP_GRAMMARLY_CLIENT_ID= ИД на клиента

1. Инсталирайте необходимите пакети

Изпълнете тази команда на вашия терминал, за да инсталирате Grammarly React Text Editor SDK във вашето приложение:

npm инсталирайте @grammarly/editor-sdk-react

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

След като инсталирате SDK за текстов редактор на Grammarly React, създайте нова папка в директорията /src на вашето приложение React и я наименувайте компоненти. В тази папка създайте нов файл: TextEditor.js.

Във файла TextEditor.js добавете кода по-долу:

импортиране Реагирайте от"реагира"
импортиране {GrammarlyEditorPlugin} от'@grammarly/editor-sdk-react'
функцияТекстов редактор() {
връщане (
<дивclassName="приложение">
<заглавкаclassName=„Заглавка на приложението“>
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ активиране: "незабавен" }}
 >
<входконтейнер="Споделете вашите мисли!!" />
GrammarlyEditorPlugin>
заглавка>
див>
 );
}
износпо подразбиране TextEditor;

В кода по-горе вие ​​импортирате GrammarlyEditorPlugin от Grammarly-React SDK и обвивате таг за въвеждане с GrammarlyEditorPlugin.

GrammarlyEditorPlugin приема две свойства: clientID и свойство config, което задава активирането на незабавно. Това свойство активира приставката и я прави достъпна за потребителя веднага щом страницата се зареди.

Ако имате разширението за браузър Grammarly, трябва да го деактивирате или деинсталирате за това урок, тъй като плъгинът на вашия проект ще изведе грешка, след като открие разширението на вашия браузър.

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

  • Автоматично довършване: Това свойство допълва фрази за вашите потребители, докато пишат.
  • ToneDetector: Това показва интерфейса на детектора на тонове.

3. Изобразете компонента на текстовия редактор

Добавете кода по-долу във вашия файл app.js, за да изобразите компонента на вашия текстов редактор:

импортиране Текстов редактор от'./components/TextEditor';
функцияПриложение() {
връщане (
<дивclassName="приложение">
<заглавкаclassName=„Заглавка на приложението“>
<Текстов редактор />
заглавка>
див>
 );
}
износпо подразбиране Приложение;

Сега изпълнете тази команда на вашия терминал, за да завъртите сървъра за разработка и да видите резултатите в браузъра си:

npm започнете

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

Забележете, че сте обвили таг за въвеждане с GrammarlyEditorPlugin. Можете също така да обвиете елемент на текстово поле или всеки елемент с полезен атрибут contenteditable зададено на "true".

Използване на таг за текстово поле:

 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ активиране: "незабавен" }}
>
<текстово полеконтейнер="Споделете вашите мисли!!" />
GrammarlyEditorPlugin>

Изпълнете тази команда на вашия терминал, за да видите резултатите на вашия браузър:

npm започнете

След това трябва да видите вашето активирано Grammarly текстово поле:

Интегрирайте с редактор с богат текст като TinyMCE

Можете също така да опаковате пълноценен текстов редактор с GrammarlyEditorPlugin. SDK на Grammarly Text Editor е съвместим с няколко редактора на форматиран текст като:

  • TinyMCE
  • шисти
  • CKEditor
  • Куил

TinyMCE е лесен за използване текстов редактор с много инструменти за форматиране и редактиране, които позволяват на потребителите да пишат и редактират съдържание в рамките на удобен за потребителя интерфейс.

За да интегрирате редактора на TinyMCE в приложение React с активиран асистент за писане Grammarly, първо посетете TinyMCE и се регистрирайте за акаунт на програмист. След това на таблото за управление на Onboarding предоставете URL адрес на домейн за вашето приложение и щракнете върху Следващ: Продължете към таблото си за управление бутон, за да завършите процеса на настройка.

За локална разработка не е необходимо да указвате домейна, тъй като URL адресът localhost се задава от по подразбиране, обаче, след като изпратите вашето React приложение до производство, трябва да предоставите live URL адрес на домейн.

И накрая, копирайте вашия API ключ от таблото за управление на разработчиците и се върнете към вашия проект в редактора на код и добавете API ключа в ENV файла, който сте създали по-рано:

REACT_APP_TINY_MCE_API_KEY="API ключ"

Сега преминете към вашия файл TextEditor.js и направете следните промени:

  • Направете следните импорти: 
    импортиране Реагирайте, {useRef} от"реагира";
    импортиране { Редактор } от„@tinymce/tinymce-react“;
    Добавете куката useRef и импортирайте компонента TinyMCE Editor от инсталирания пакет.
  • Във функционалния компонент добавете кода по-долу: 
    конст editorRef = useRef(нула);
    Куката useRef ви позволява да запазвате променливи стойности между изобразяванията. Ще използвате променливата editorRef, за да поддържате състоянието на данните, въведени в редактора.
  • И накрая, върнете компонента на редактора от библиотеката TinyMCE: 
     apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editor) => editorRef.current = editor}
     първоначална стойност="<стр>Това е първоначалното съдържание на редактора.стр>"
     init={{
     височина: 500,
     лента с менюта: невярно,
     добавки: [
    'advlist', "автоматична връзка", "списъци", "връзка", 'изображение', "charmap", "предварителен преглед",
    "котва", 'търсене замени', 'visualblocks', "код", 'цял екран',
    "вмъкване на дата и час", "медия", "маса", "код", 'помогне', 'брой думи'
     ],
     лента с инструменти: 'отмени повтори | блокове | ' +
    'удебелен курсив преден цвят | alignleft aligncenter ' +
    'подравняване надясно подравняване | bullist numlist отстъп отстъп | ' +
    'премахване на формат | помогне',
     content_style: 'body { font-family: Helvetica, Arial, sans-serif; размер на шрифта: 14px }'
     }}
    />
  • Компонентът дефинира свойствата на редактора, т.е. API ключа, началната стойност, обект с височината на редактора, добавките и свойства на лентата с инструменти и накрая метода editorRef.current, който присвоява стойността на параметъра "editor" на "editorRef" променлива.
  • Параметърът "editor" е обект на събитие, който се предава, когато се задейства събитието "onInit".

Пълният код трябва да изглежда така:

импортиране Реагирайте, {useRef} от"реагира";
импортиране {GrammarlyEditorPlugin} от'@grammarly/editor-sdk-react';
импортиране { Редактор } от„@tinymce/tinymce-react“;
функцияТекстов редактор() {
конст editorRef = useRef(нула);
връщане (
<дивclassName="приложение">
<заглавкаclassName=„Заглавка на приложението“>
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={
 { активиране: "незабавен" }}
 >
 apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editor) => editorRef.current = editor}
 първоначална стойност="<стр>Това е първоначалното съдържание на редактора. стр>"
 init={{
 височина: 500,
 лента с менюта: невярно,
 добавки: [
'advlist', "автоматична връзка", "списъци", "връзка", 'изображение', "charmap", "предварителен преглед",
"котва", 'търсене замени', 'visualblocks', "код", 'цял екран',
"вмъкване на дата и час", "медия", "маса", "код", 'помогне', 'брой думи'
 ],
 лента с инструменти: 'отмени повтори | блокове | ' +
'удебелен курсив преден цвят | alignleft aligncenter ' +
'подравняване надясно подравняване | bullist numlist отстъп отстъп | ' +
'премахване на формат | помогне',
 content_style: 'body { font-family: Helvetica, Arial, sans-serif; размер на шрифта: 14px }'
 }}
 />
GrammarlyEditorPlugin>
заглавка>
див>
 );
}
износпо подразбиране TextEditor;

В този код обгръщате компонента на редактора TinyMCE с GrammarlyEditorPlugin, за да интегрирате функцията за помощ на Grammarly в текстовия редактор на TinyMCE. Накрая завъртете сървъра за разработка, за да запазите промените и отидете до него http://localhost: 3000 във вашия браузър, за да видите резултатите.

Използвайте Grammarly, за да подобрите производителността на потребителите

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

Лесно се интегрира със съществуващи проекти и предоставя изчерпателни възможности за граматика и проверка на правописа, които могат да подобрят изживяването на потребителя при писане.