Czytelnicy tacy jak ty pomagają wspierać MUO. Kiedy dokonujesz zakupu za pomocą linków na naszej stronie, możemy otrzymać prowizję partnerską. Czytaj więcej.

Czy trudno jest dostarczyć pracę na czas bez literówek i błędów gramatycznych? Może to być stresujące, zwłaszcza gdy chcesz mieć pewność, że wszystko jest idealne — używanie Grammarly może poprawić Twoją produktywność i doświadczenie w pisaniu.

Grammarly to oparte na chmurze narzędzie do sprawdzania gramatyki i korektora. Wykrywa i koryguje błędy gramatyczne, ortograficzne, interpunkcyjne i inne błędy pisarskie. Oferuje również sugestie dotyczące ulepszeń słownictwa, które pomogą Ci poprawić jakość Twojego pisania.

Śledź dalej, aby dowiedzieć się, jak zintegrować Grammarly z edytorem tekstu zbudowanym za pomocą React.

Czym jest gramatyka dla programistów?

Grammarly jest powszechnie znany ze swojego rozszerzenia przeglądarki, którego można używać do poprawiania błędów gramatycznych w edytorze tekstu strony internetowej. Grammarly for Developers to funkcja w Grammarly, która pomaga zintegrować automatyczne narzędzia do sprawdzania i wykrywania plagiatu Grammarly z aplikacjami internetowymi.

instagram viewer

Możesz teraz używać Grammarly do tworzenia wbudowanej funkcji edycji tekstu w czasie rzeczywistym w swojej aplikacji internetowej za pomocą zestawu programistycznego Grammarly (SDK). Daje to użytkownikom dostęp do wszystkich funkcji Grammarly bez konieczności pobierania rozszerzenia przeglądarki.

Utwórz nową aplikację w Grammarly Developer Console

Skonfiguruj nową aplikację w konsoli programisty Grammarly, wykonując następujące kroki:

  1. Udaj się do Gramatyka dla programistów konsoli i założyć konto. Jeśli masz już konto Grammarly, możesz użyć go do zalogowania się do konsoli.
  2. Po zalogowaniu się na pulpicie nawigacyjnym konsoli kliknij na Nowa aplikacja przycisk, aby utworzyć nową aplikację. Wpisz nazwę swojej aplikacji i naciśnij Tworzyć aby zakończyć proces.
  3. Następnie w lewym okienku pulpitu nawigacyjnego aplikacji wybierz plik Sieć kartę, aby wyświetlić poświadczenia aplikacji na stronie ustawień klienta WWW.
  4. Skopiuj podany identyfikator klienta. Na tej samej stronie zwróć uwagę na krótki przewodnik dotyczący integracji Grammarly SDK z klientem WWW. SDK jest kompatybilny z klientami React, Vue.js i zwykłymi klientami JavaScript. Możesz także zintegrować SDK z HTML, dodając SDK jako znacznik skryptu.

Zestaw Grammarly Text Editor SDK obsługuje najnowsze wersje popularnych przeglądarek komputerowych: Chrome, Firefox, Safari, Edge, Opera i Brave. Obecnie nie ma wsparcia dla przeglądarek mobilnych.

Zintegruj SDK Grammarly z React Text Editor

Pierwszy, stworzyć aplikację React. Następnie w katalogu głównym folderu projektu utwórz plik ENV do przechowywania zmiennej środowiskowej: Twój identyfikator klienta. Przejdź do strony ustawień internetowych swojej aplikacji w Konsoli programisty Grammarly i skopiuj swój identyfikator klienta.

REACT_APP_GRAMMARLY_CLIENT_ID=Identyfikator klienta

1. Zainstaluj wymagane pakiety

Uruchom to polecenie na swoim terminalu, aby zainstalować zestaw SDK Grammarly React Text Editor w swojej aplikacji:

instalacja npm @gramatycznie/editor-sdk-react

2. Utwórz edytor tekstu

Po zainstalowaniu zestawu SDK edytora tekstu Grammarly React utwórz nowy folder w katalogu /src aplikacji React i nazwij go komponenty. W tym folderze utwórz nowy plik: TextEditor.js.

W pliku TextEditor.js dodaj poniższy kod:

import Reagować z'reagować'
import { GrammarlyEditorPlugin } z'@grammarly/editor-sdk-react'
funkcjonowaćEdytor tekstu() {
powrót (
<dzNazwa klasy=„Aplikacja”>
<nagłówekNazwa klasy=„Nagłówek aplikacji”>
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 konfiguracja={{ aktywacja: "natychmiastowy" }}
 >
<wejściesymbol zastępczy=„Podziel się swoimi przemyśleniami !!” />
GrammarlyEditorPlugin>
nagłówek>
dz>
 );
}
eksportdomyślny Edytor tekstu;

W powyższym kodzie importujesz wtyczkę GrammarlyEditorPlugin z zestawu Grammarly-React SDK i opakowujesz znacznik wejściowy w wtyczkę GrammarlyEditorPlugin.

GrammarlyEditorPlugin przyjmuje dwie właściwości: clientID i właściwość config, która ustawia aktywację na natychmiastową. Ta właściwość aktywuje wtyczkę i udostępnia ją użytkownikowi zaraz po załadowaniu strony.

Jeśli masz rozszerzenie przeglądarki Grammarly, musisz je wyłączyć lub odinstalować w tym celu samouczek, ponieważ wtyczka w twoim projekcie zgłosi błąd po wykryciu rozszerzenia w twoim przeglądarka.

Wtyczka edytora Grammarly ma inne dodatkowe właściwości konfiguracyjne, których możesz użyć do dostosowania edytora. Zawierają:

  • Autouzupełnianie: ta właściwość uzupełnia frazy użytkowników podczas ich wpisywania.
  • ToneDetector: Pokazuje interfejs detektora tonów.

3. Renderuj komponent edytora tekstu

Dodaj poniższy kod do pliku app.js, aby wyrenderować komponent edytora tekstu:

import Edytor tekstu z„./komponenty/Edytor tekstu”;
funkcjonowaćAplikacja() {
powrót (
<dzNazwa klasy=„Aplikacja”>
<nagłówekNazwa klasy=„Nagłówek aplikacji”>
<Edytor tekstu />
nagłówek>
dz>
 );
}
eksportdomyślny Aplikacja;

Teraz uruchom to polecenie na swoim terminalu, aby uruchomić serwer programistyczny i wyświetlić wyniki w przeglądarce:

np początek

Twój edytor obsługujący gramatykę powinien wyglądać mniej więcej tak:

Zauważ, że tag wejściowy został opakowany w GrammarlyEditorPlugin. Możesz także zawinąć element textarea lub dowolny element za pomocą przydatny atrybut contenteditable ustawić na „prawda”.

Używając znacznika textarea:

 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 konfiguracja={{ aktywacja: "natychmiastowy" }}
>
<pole tekstowesymbol zastępczy=„Podziel się swoimi przemyśleniami!!” />
GrammarlyEditorPlugin>

Uruchom to polecenie na swoim terminalu, aby wyświetlić wyniki w przeglądarce:

np początek

Powinieneś zobaczyć obszar tekstowy obsługujący gramatykę:

Zintegruj z edytorem tekstu sformatowanego, takim jak TinyMCE

Możesz także owinąć pełnowartościowy edytor tekstu za pomocą wtyczki GrammarlyEditorPlugin. Zestaw Grammarly Text Editor SDK jest kompatybilny z kilkoma edytorami tekstu sformatowanego, takimi jak:

  • TinyMCE
  • Łupek
  • Edytor CK
  • Lotka

TinyMCE to łatwy w użyciu edytor tekstu z wieloma narzędziami do formatowania i edycji, które umożliwiają użytkownikom pisanie i edytowanie treści w przyjaznym dla użytkownika interfejsie.

Aby zintegrować edytor TinyMCE z aplikacją React z włączonym asystentem pisania Grammarly, najpierw odwiedź stronę TinyMCE i zarejestruj konto programisty. Następnie na pulpicie nawigacyjnym Onboarding podaj adres URL domeny dla swojej aplikacji i kliknij przycisk Dalej: przejdź do pulpitu nawigacyjnego przycisk, aby zakończyć proces konfiguracji.

W przypadku rozwoju lokalnego nie trzeba określać domeny, ponieważ adres URL hosta lokalnego jest ustawiany przez default, jednak po przesłaniu aplikacji React do środowiska produkcyjnego musisz udostępnić ją na żywo URL domeny.

Na koniec skopiuj swój klucz API z pulpitu programisty i wróć do swojego projektu w edytorze kodu i dodaj klucz API do utworzonego wcześniej pliku ENV:

REACT_APP_TINY_MCE_API_KEY="Klucz API"

Teraz przejdź do pliku TextEditor.js i wprowadź następujące zmiany:

  • Wykonaj następujące importy: 
    import Reaguj, { useRef } z'reagować';
    import { Redaktor } z'@tinymce/tinymce-reaguj';
    Dodaj hak useRef i zaimportuj komponent TinyMCE Editor z zainstalowanego pakietu.
  • W komponencie funkcjonalnym dodaj poniższy kod: 
    konst edytorRef = użyjRef(zero);
    Hak useRef umożliwia utrzymywanie zmiennych wartości między renderowaniami. Użyjesz zmiennej editorRef do zachowania stanu danych wpisywanych w edytorze.
  • Na koniec zwróć komponent edytora z biblioteki TinyMCE: 
     apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, redaktor) => redaktorRef.bieżący = redaktor}
     wartość początkowa="<P>To jest początkowa zawartość edytora.P>"
     init={{
     wzrost: 500,
     pasek menu: FAŁSZ,
     wtyczki: [
    „lista reklam”, „automatyczne łącze”, „listy”, 'połączyć', 'obraz', „mapa uroku”, 'zapowiedź',
    'kotwica', „szukajzastąp”, „bloki wizualne”, 'kod', 'pełny ekran',
    „wstaw datę i godzinę”, 'głoska bezdźwięczna', 'tabela', 'kod', 'pomoc', 'Liczba słów'
     ],
     pasek narzędzi: 'cofnij ponów | bloki | ' +
    „pogrubiona kursywa pierwszy kolor | wyrównaj do lewej wyrównaj do środka ' +
    'wyrównaj do prawej wyrównaj wyrównaj | bullist numlist out wcięcie wcięcie | ' +
    'usuńformat | pomoc',
     styl_treści: 'body {rodzina czcionek: Helvetica, Arial, bezszeryfowa; rozmiar czcionki: 14px }'
     }}
    />
  • Komponent definiuje właściwości edytora tj. klucz API, wartość początkowa, obiekt o wysokości edytora, wtyczki i właściwości paska narzędzi, a na koniec metoda editorRef.current, która przypisuje wartość parametru „editor” do parametru „editorRef” zmienny.
  • Parametr „editor” jest obiektem zdarzenia, który jest przekazywany po uruchomieniu zdarzenia „onInit”.

Cały kod powinien wyglądać tak:

import Reaguj, { useRef } z'reagować';
import { GrammarlyEditorPlugin } z'@grammarly/editor-sdk-react';
import { Redaktor } z'@tinymce/tinymce-reaguj';
funkcjonowaćEdytor tekstu() {
konst edytorRef = użyjRef(zero);
powrót (
<dzNazwa klasy=„Aplikacja”>
<nagłówekNazwa klasy=„Nagłówek aplikacji”>
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 konfiguracja={
 { aktywacja: "natychmiastowy" }}
 >
 apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, redaktor) => redaktorRef.bieżący = redaktor}
 wartość początkowa="<P>To jest początkowa zawartość edytora. P>"
 init={{
 wzrost: 500,
 pasek menu: FAŁSZ,
 wtyczki: [
„lista reklam”, „automatyczne łącze”, „listy”, 'połączyć', 'obraz', „mapa uroku”, 'zapowiedź',
'kotwica', „szukajzastąp”, „bloki wizualne”, 'kod', 'pełny ekran',
„wstaw datę i godzinę”, 'głoska bezdźwięczna', 'tabela', 'kod', 'pomoc', 'Liczba słów'
 ],
 pasek narzędzi: 'cofnij ponów | bloki | ' +
„pogrubiona kursywa pierwszy kolor | wyrównaj do lewej wyrównaj do środka ' +
'wyrównaj do prawej wyrównaj wyrównaj | bullist numlist out wcięcie wcięcie | ' +
'usuńformat | pomoc',
 styl_treści: 'body {rodzina czcionek: Helvetica, Arial, bezszeryfowa; rozmiar czcionki: 14px }'
 }}
 />
GrammarlyEditorPlugin>
nagłówek>
dz>
 );
}
eksportdomyślny Edytor tekstu;

W tym kodzie opakowujesz komponent edytora TinyMCE z GrammarlyEditorPlugin, aby zintegrować funkcję pomocy Grammarly w edytorze tekstu TinyMCE. Na koniec uruchom serwer programistyczny, aby zapisać zmiany i przejść do http://localhost: 3000 w przeglądarce, aby zobaczyć wyniki.

Użyj gramatyki, aby poprawić produktywność użytkowników

SDK Grammarly zapewnia potężne narzędzie, które może pomóc poprawić jakość i dokładność treści w edytorze tekstu React.

Jest łatwy do zintegrowania z istniejącymi projektami i zapewnia wszechstronne funkcje sprawdzania gramatyki i pisowni, które mogą poprawić komfort pisania użytkownika.