Да ли вам је тешко да испоручите посао на време без куцања и граматичких грешака? То може бити стресно, посебно када желите да будете сигурни да је све савршено — коришћење Граммарли-а може побољшати вашу продуктивност и искуство писања.
Граммарли је програм за проверу граматике и лектор у облаку. Открива и исправља граматичке, правописне, интерпункцијске и друге грешке у писању. Такође нуди предлоге за побољшање речника који вам помажу да побољшате квалитет свог писања.
Пратите даље да бисте научили како да интегришете Граммарли у уређивач текста направљен помоћу Реацт-а.
Шта је Граммарли за програмере?
Граммарли је широко познат по свом проширењу претраживача које можете користити за исправљање граматичких грешака у уређивачу текста веб странице. Граммарли за програмере је функција на Граммарли-у која вам помаже да интегришете Граммарли-јеве аутоматизоване алате за лектуру и откривање плагијата у ваше веб апликације.
Сада можете да користите Граммарли да креирате уграђену функцију за уређивање текста у реалном времену у вашој веб апликацији користећи Граммарли софтверски развојни комплет (СДК). Ово омогућава вашим корисницима приступ свим Граммарли функцијама без потребе за преузимањем екстензије прегледача.
Направите нову апликацију на Граммарли Девелопер Цонсоле
Подесите нову апликацију на Граммарли-овој конзоли за програмере пратећи ове кораке:
- Пређите на Граматика за програмере конзоле и пријавите се за налог. Ако већ имате Граммарли налог, можете га користити за пријаву на конзолу.
- Након што се пријавите, на контролној табли конзоле кликните на Нова апликација дугме за креирање нове апликације. Унесите назив своје апликације и притисните Креирај да заврши процес.
- Затим, у левом окну контролне табле ваше апликације, изаберите Веб картицу да бисте видели акредитиве своје апликације на страници подешавања веб клијента.
- Копирајте наведени ИД клијента. На истој страници приметите брзи водич о томе како да интегришете Граммарли СДК у веб клијент. СДК је компатибилан са Реацт, Вуе.јс и обичним ЈаваСцрипт клијентима. Такође можете да интегришете СДК у ХТМЛ тако што ћете додати СДК као ознаку скрипте.
Граммарли Тект Едитор СДК подржава најновије верзије популарних десктоп претраживача: Цхроме, Фирефок, Сафари, Едге, Опера и Браве. Тренутно не постоји подршка за мобилне претраживаче.
Интегришите Граммарли-јев СДК у Реацт Тект Едитор
Први, креирајте Реацт апликацију. Затим, у основном директоријуму фасцикле вашег пројекта, креирајте ЕНВ датотеку која ће задржати вашу променљиву окружења: ваш ЦлиентИД. Идите на страницу са веб подешавањима ваше апликације на Граммарли-овој Девелопер Цонсоле и копирајте свој ЦлиентИД.
РЕАЦТ_АПП_ГРАММАРЛИ_ЦЛИЕНТ_ИД= ИД клијента1. Инсталирајте потребне пакете
Покрените ову команду на свом терминалу да бисте инсталирали Граммарли Реацт Тект Едитор СДК у своју апликацију:
нпм инсталл @граммарли/editor-sdk-react2. Направите уређивач текста
Након што инсталирате СДК за уређивач текста Граммарли Реацт, креирајте нову фасциклу у /срц директоријуму ваше Реацт апликације и назовите је компоненте. Унутар ове фасцикле направите нову датотеку: ТектЕдитор.јс.
У датотеку ТектЕдитор.јс додајте код у наставку:
увоз Реаговати из'реаговати'
увоз { ГраммарлиЕдиторПлугин } из'@граммарли/едитор-сдк-реацт'функцијаТекст едитор() {
повратак (
<дивНазив класе="Апликација">
<заглављеНазив класе=„Заглавље апликације“>
цлиентИд={процесс.енв. РЕАЦТ_АПП_ГРАММАРЛИ_ЦЛИЕНТ_ИД}
цонфиг={{ активирање: "непосредан" }}
>
<улазничувар места="Поделите своје мисли!!" />
ГраммарлиЕдиторПлугин>
заглавље>
див>
);
}
извозУобичајено Текст едитор;
У горњем коду увозите ГраммарлиЕдиторПлугин из Граммарли-Реацт СДК-а и омотате улазну ознаку са ГраммарлиЕдиторПлугин-ом.
ГраммарлиЕдиторПлугин има два својства: цлиентИД и својство цонфиг које поставља активацију на тренутну. Ово својство активира додатак и чини га доступним кориснику чим се страница учита.
Ако имате екстензију прегледача Граммарли, морате да је онемогућите или деинсталирате за ово водич јер ће додатак на вашем пројекту испоставити грешку када открије проширење на вашем прегледач.
Граммарли-јев додатак за уређивач има друга додатна својства конфигурације која можете користити да прилагодите свој уређивач. То укључује:
- Аутоматско довршавање: Ово својство довршава фразе за ваше кориснике док куцају.
- ТонеДетецтор: Ово показује интерфејс детектора тона.
3. Рендерирајте компоненту уређивача текста
Додајте код испод у датотеку апп.јс да бисте приказали компоненту уређивача текста:
увоз Текст едитор из'./цомпонентс/ТектЕдитор';функцијаАпликација() {
повратак (
<дивНазив класе="Апликација">
<заглављеНазив класе=„Заглавље апликације“>
<Текст едитор />
заглавље>
див>
);
}
извозУобичајено Апликација;
Сада покрените ову команду на свом терминалу да бисте покренули развојни сервер и видели резултате у вашем претраживачу:
нпм почетакВаш уређивач који подржава Граммарли би требао изгледати отприлике овако:
Приметите, умотали сте ознаку за унос са ГраммарлиЕдиторПлугин-ом. Такође можете умотати елемент тектареа или било који елемент са корисни атрибут цонтентедитабле постављено на "тачно".
Коришћење ознаке текстуалног подручја:
цлиентИд={процесс.енв. РЕАЦТ_АПП_ГРАММАРЛИ_ЦЛИЕНТ_ИД}
цонфиг={{ активирање: "непосредан" }}
>
<тектареачувар места=" Поделите своје мисли!!" />
ГраммарлиЕдиторПлугин>Покрените ову команду на свом терминалу да бисте видели резултате у свом претраживачу:
нпм почетакТада би требало да видите своје текстуално подручје које је омогућено за Граммарли:
Интегришите се са уређивачем богатог текста као што је ТиниМЦЕ
Такође можете умотати пуноправни уређивач текста са ГраммарлиЕдиторПлугин-ом. СДК Граммарли Тект Едитор је компатибилан са неколико уређивача обогаћеног текста као што су:
- ТиниМЦЕ
- Шкриљац
- ЦКЕдитор
- Куилл
ТиниМЦЕ је уређивач текста који се лако користи са много алата за форматирање и уређивање који омогућавају корисницима да пишу и уређују садржај унутар корисничког интерфејса.
Да бисте интегрисали ТиниМЦЕ уређивач у Реацт апликацију са омогућеним помоћником за писање Граммарли, прво посетите ТиниМЦЕ и пријавите се за налог програмера. Затим, на контролној табли за укључење, наведите УРЛ домена за своју апликацију и кликните на Следеће: Наставите до контролне табле дугме да бисте завршили процес подешавања.
За локални развој, не морате да наведете домен пошто је УРЛ локалног хоста постављен од стране подразумевано, међутим, када пошаљете своју Реацт апликацију у продукцију, морате да обезбедите уживо УРЛ домена.
На крају, копирајте свој АПИ кључ са контролне табле за програмере и вратите се на свој пројекат у уређивачу кода и додајте АПИ кључ у ЕНВ датотеку коју сте раније креирали:
РЕАЦТ_АПП_ТИНИ_МЦЕ_АПИ_КЕИ=„АПИ кључ“Сада идите на датотеку ТектЕдитор.јс и направите следеће промене:
- Направите следеће увозе:
Додајте усеРеф куку и увезите компоненту ТиниМЦЕ Едитор из инсталираног пакета.увоз Реагуј, { усеРеф } из'реаговати';
увоз { Уредник } из'@тинимце/тинимце-реацт'; - У функционалну компоненту додајте код испод:
УсеРеф кука вам омогућава да задржите променљиве вредности између рендеровања. Користићете променљиву едиторРеф за одржавање стања података унетих у уређивачу.конст едиторРеф = усеРеф(нула); - На крају, вратите компоненту уређивача из библиотеке ТиниМЦЕ:
апиКеи={процесс.енв. РЕАЦТ_АПП_ТИНИ_МЦЕ_АПИ_КЕИ}
онИнит={(евт, едитор) => едиторРеф.цуррент = едитор}
инитиалВалуе="<стр>Ово је почетни садржај уредника.стр>"
инит={{
висина: 500,
Мени бар: лажно,
додаци: [
'адвлист', 'аутолинк', 'листе', 'линк', 'слика', 'цхармап', 'преглед',
'сидро', 'сеарцхреплаце', 'визуелни блокови', 'шифра', 'цео екран',
'инсертдатетиме', 'медији', 'сто', 'шифра', 'помоћ', 'вордцоунт'
],
трака са алаткама: 'поништи редо | блокови | ' +
'болд италиц форецолор | алигнлефт алигнцентер ' +
'алигнригхт алигњустифи | буллист нумлист оутдент индент | ' +
'ремовеформат | помоћ',
цонтент_стиле: 'боди { фонт-фамили: Хелветица, Ариал, санс-сериф; величина фонта: 14пк }'
}}
/> - Компонента дефинише својства уређивача, тј. АПИ кључ, почетну вредност, објекат са висином уређивача, додатке и својства траке са алаткама, и на крају, едиторРеф.цуррент метод који додељује вредност параметра "едитор" "едиторРеф" променљива.
- Параметар "едитор" је објекат догађаја који се прослеђује када се покрене догађај "онИнит".
Комплетан код би требао изгледати овако:
увоз Реагуј, { усеРеф } из'реаговати';
увоз { ГраммарлиЕдиторПлугин } из'@граммарли/едитор-сдк-реацт';
увоз { Уредник } из'@тинимце/тинимце-реацт';
функцијаТекст едитор() {
конст едиторРеф = усеРеф(нула);
повратак (
<дивНазив класе="Апликација">
<заглављеНазив класе=„Заглавље апликације“>
цлиентИд={процесс.енв. РЕАЦТ_АПП_ГРАММАРЛИ_ЦЛИЕНТ_ИД}
цонфиг={
{ активирање: "непосредан" }}
>
апиКеи={процесс.енв. РЕАЦТ_АПП_ТИНИ_МЦЕ_АПИ_КЕИ}
онИнит={(евт, едитор) => едиторРеф.цуррент = едитор}
инитиалВалуе="<стр>Ово је почетни садржај уредника. стр>"
инит={{
висина: 500,
Мени бар: лажно,
додаци: [
'адвлист', 'аутолинк', 'листе', 'линк', 'слика', 'цхармап', 'преглед',
'сидро', 'сеарцхреплаце', 'визуелни блокови', 'шифра', 'цео екран',
'инсертдатетиме', 'медији', 'сто', 'шифра', 'помоћ', 'вордцоунт'
],
трака са алаткама: 'поништи редо | блокови | ' +
'болд италиц форецолор | алигнлефт алигнцентер ' +
'алигнригхт алигњустифи | буллист нумлист оутдент индент | ' +
'ремовеформат | помоћ',
цонтент_стиле: 'боди { фонт-фамили: Хелветица, Ариал, санс-сериф; величина фонта: 14пк }'
}}
/>
ГраммарлиЕдиторПлугин>
заглавље>
див>
);
}
извозУобичајено Текст едитор;
У овом коду омотате ТиниМЦЕ компоненту уређивача са ГраммарлиЕдиторПлугин-ом да бисте интегрисали Граммарли помоћну функцију у ТиниМЦЕ уређивач текста. Коначно, покрените развојни сервер да бисте сачували промене и дошли до њега http://localhost: 3000 у вашем претраживачу да бисте видели резултате.
Користите Граммарли да побољшате продуктивност корисника
Граммарли-јев СДК пружа моћан алат који може помоћи у побољшању квалитета и тачности вашег садржаја у Реацт уређивачу текста.
Лако се интегрише са постојећим пројектима и пружа свеобухватне могућности граматике и провере правописа које могу побољшати корисничко искуство писања.