Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Yazım hataları ve gramer hataları yapmadan işi zamanında teslim etmekte zorlanıyor musunuz? Özellikle her şeyin mükemmel olduğundan emin olmak istediğinizde stresli olabilir; Grammarly kullanmak üretkenliğinizi ve yazma deneyiminizi geliştirebilir.

Grammarly, bulut tabanlı bir gramer denetleyicisi ve düzelticidir. Dilbilgisi, imla, noktalama işaretleri ve diğer yazım hatalarını algılar ve düzeltir. Ayrıca, yazı kalitenizi artırmanıza yardımcı olacak sözcük dağarcığı geliştirme önerileri de sunar.

Grammarly'yi React ile oluşturulmuş bir metin düzenleyiciye nasıl entegre edeceğinizi öğrenmek için takip edin.

Geliştiriciler için Dilbilgisi Nedir?

Dilbilgisi, bir web sitesinin metin düzenleyicisindeki dilbilgisi hatalarını düzeltmek için kullanabileceğiniz tarayıcı uzantısıyla tanınmaktadır. Geliştiriciler için Grammarly, Grammarly'nin otomatik redaksiyon ve intihal tespit araçlarını web uygulamalarınıza entegre etmenize yardımcı olan bir Grammarly özelliğidir.

instagram viewer

Artık Grammarly'nin Yazılım Geliştirme Kitini (SDK) kullanarak web uygulamanızda yerleşik bir gerçek zamanlı metin düzenleme özelliği oluşturmak için Grammarly'yi kullanabilirsiniz. Bu, kullanıcılarınıza tarayıcı uzantısını indirmeye gerek kalmadan tüm Grammarly özelliklerine erişim sağlar.

Grammarly Developer Console'da Yeni Bir Uygulama Oluşturun

Aşağıdaki adımları izleyerek Grammarly'nin geliştirici konsolunda yeni bir uygulama kurun:

  1. şuraya git Geliştiriciler için Dil Bilgisi konsol ve bir hesap için kaydolun. Halihazırda bir Grammarly hesabınız varsa, bunu konsolda oturum açmak için kullanabilirsiniz.
  2. Oturum açtıktan sonra, konsolun kontrol panelinde simgesine tıklayın. Yeni uygulama Yeni bir uygulama oluşturmak için düğmesine basın. Uygulamanızın adını girin ve tıklayın Yaratmak süreci bitirmek için.
  3. Ardından, uygulamanızın panosunun sol bölmesinde ağ web istemcisi ayarları sayfasında uygulamanızın kimlik bilgilerini görüntülemek için sekmesini tıklayın.
  4. Sağlanan İstemci Kimliğini kopyalayın. Aynı sayfada, Grammarly SDK'nın bir web istemcisine nasıl entegre edileceğine ilişkin hızlı kılavuza dikkat edin. SDK, React, Vue.js ve düz JavaScript istemcileriyle uyumludur. SDK'yı bir komut dosyası etiketi olarak ekleyerek SDK'yı HTML'ye de entegre edebilirsiniz.

Grammarly Text Editor SDK, popüler masaüstü tarayıcılarının en son sürümlerini destekler: Chrome, Firefox, Safari, Edge, Opera ve Brave. Şu anda mobil tarayıcılar için destek yoktur.

Grammarly'nin SDK'sını React Metin Düzenleyicisine Entegre Edin

Birinci, bir React uygulaması oluştur. Ardından, proje klasörünüzün kök dizininde, ortam değişkeninizi tutmak için bir ENV dosyası oluşturun: ClientID'niz. Grammarly Developer Console'da uygulamanızın web ayarları sayfasına gidin ve ClientID'nizi kopyalayın.

REACT_APP_GRAMARLY_CLIENT_ID= İstemci Kimliği

1. Gerekli Paketleri Kurun

Uygulamanıza Grammarly React Text Editor SDK'yı yüklemek için terminalinizde bu komutu çalıştırın:

npm kurulum @gramerly/editor-sdk-react

2. Bir Metin Düzenleyici Oluşturun

Grammarly React metin düzenleyici SDK'sını kurduktan sonra, React uygulamanızın /src dizininde yeni bir klasör oluşturun ve onu bileşenler olarak adlandırın. Bu klasörün içinde yeni bir dosya oluşturun: TextEditor.js.

TextEditor.js dosyasına aşağıdaki kodu ekleyin:

içe aktarmak Tepki itibaren'tepki'
içe aktarmak { GrammarlyEditorPlugin } itibaren'@grammarly/editor-sdk-react'
işlevMetin düzeltici() {
geri dönmek (
<divsınıf adı="Uygulama">
<başlıksınıf adı="Uygulama başlığı">
 clientId={process.env. REACT_APP_GRAMARLY_CLIENT_ID}
 yapılandırma={{ aktivasyon: "hemen" }}
 >
<girişYer tutucu="Düşüncelerini paylaş!!" />
GrammarlyEditorPlugin>
başlık>
div>
 );
}
ihracatvarsayılan Metin düzeltici;

Yukarıdaki kodda, Grammarly-React SDK'dan GrammarlyEditorPlugin'i içe aktarır ve GrammarlyEditorPlugin ile bir giriş etiketini sararsınız.

GrammarlyEditorPlugin iki özellik alır: clientID ve aktivasyonu hemen olarak ayarlayan bir config özelliği. Bu özellik, eklentiyi etkinleştirir ve sayfa yüklenir yüklenmez kullanıcının kullanımına sunar.

Grammarly tarayıcı uzantınız varsa, bunun için devre dışı bırakmanız veya kaldırmanız gerekir. öğretici çünkü projenizdeki eklenti, uzantıyı algıladığında bir hata atar. tarayıcı.

Grammarly'nin düzenleyici eklentisi, düzenleyicinizi özelleştirmek için kullanabileceğiniz başka ek yapılandırma özelliklerine sahiptir. Onlar içerir:

  • Otomatik tamamlama: Bu özellik, kullanıcılarınız yazarken tümceleri tamamlar.
  • ToneDetector: Bu, ton dedektör arayüzünü gösterir.

3. Metin Düzenleyici Bileşenini İşleyin

Metin düzenleyici bileşeninizi oluşturmak için aşağıdaki kodu app.js dosyanıza ekleyin:

içe aktarmak Metin düzeltici itibaren'./bileşenler/Metin Düzenleyici';
işlevUygulama() {
geri dönmek (
<divsınıf adı="Uygulama">
<başlıksınıf adı="Uygulama başlığı">
<Metin düzeltici />
başlık>
div>
 );
}
ihracatvarsayılan Uygulama;

Şimdi, geliştirme sunucusunu döndürmek ve sonuçları tarayıcınızda görüntülemek için terminalinizde bu komutu çalıştırın:

npm başlangıç

Grammarly özellikli düzenleyiciniz şöyle görünmelidir:

Dikkat edin, bir giriş etiketini GrammarlyEditorPlugin ile sardınız. Ayrıca bir textarea öğesini veya herhangi bir öğeyi faydalı içerik düzenlenebilir özelliği "doğru" olarak ayarlayın.

Bir textarea etiketi kullanarak:

 clientId={process.env. REACT_APP_GRAMARLY_CLIENT_ID}
 yapılandırma={{ aktivasyon: "hemen" }}
>
<metin alanıYer tutucu=" Düşüncelerini paylaş!!" />
GrammarlyEditorPlugin>

Sonuçları tarayıcınızda görüntülemek için terminalinizde bu komutu çalıştırın:

npm başlangıç

Daha sonra Grammarly özellikli metin alanınızı görmelisiniz:

TinyMCE Gibi Zengin Metin Düzenleyicisiyle Entegre Edin

Tam teşekküllü bir metin düzenleyiciyi GrammarlyEditorPlugin ile de sarmalayabilirsiniz. Grammarly Text Editor SDK, aşağıdakiler gibi birçok zengin metin düzenleyiciyle uyumludur:

  • minikMCE
  • Arduvaz
  • CKEditör
  • tüy kalem

TinyMCE, kullanıcıların kullanıcı dostu bir arayüzde içerik yazmasına ve düzenlemesine olanak tanıyan birçok biçimlendirme ve düzenleme aracına sahip, kullanımı kolay bir metin düzenleyicisidir.

TinyMCE'nin editörünü Grammarly yazma asistanının etkin olduğu bir React uygulamasına entegre etmek için önce şu adresi ziyaret edin: minikMCE ve bir geliştirici hesabı için kaydolun. Ardından, İlk Katılım kontrol panelinde, uygulamanız için bir etki alanı URL'si sağlayın ve Sonraki: Gösterge tablonuza devam edin kurulum işlemini bitirmek için düğmesine basın.

Yerel geliştirme için, yerel ana bilgisayar URL'si tarafından ayarlandığından etki alanını belirtmeniz gerekmez. varsayılan olarak, ancak React uygulamanızı üretime gönderdikten sonra, canlı etki alanı URL'si.

Son olarak, API anahtarınızı geliştirici kontrol panelinizden kopyalayın ve kod düzenleyicinizdeki projenize geri dönün ve API anahtarını daha önce oluşturduğunuz ENV dosyasına ekleyin:

REACT_APP_TINY_MCE_API_KEY="API anahtarı"

Şimdi TextEditor.js dosyanıza gidin ve aşağıdaki değişiklikleri yapın:

  • Aşağıdaki içe aktarmaları yapın: 
    içe aktarmak Tepki, { useRef } itibaren'tepki';
    içe aktarmak { Editör } itibaren"@tinymce/tinymce-tepki";
    useRef kancasını ekleyin ve kurulu paketten TinyMCE Editor bileşenini içe aktarın.
  • İşlevsel bileşene aşağıdaki kodu ekleyin: 
    sabit editorRef = useRef(hükümsüz);
    useRef kancası, işlemeler arasında değişken değerleri korumanıza izin verir. Editörde yazılan verilerin durumunu korumak için editorRef değişkenini kullanacaksınız.
  • Son olarak, editör bileşenini TinyMCE kitaplığından döndürün: 
     apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editör) => editorRef.current = editör}
     başlangıçDeğeri="<P>Bu, düzenleyicinin ilk içeriğidir.P>"
     başlangıç={{
     yükseklik: 500,
     Menü çubuğu: YANLIŞ,
     eklentiler: [
    'reklam listesi', "otomatik bağlantı", 'listeler', 'bağlantı', "resim", 'cazibe haritası', 'Ön izleme',
    'Çapa', "arama değiştir", "görsel bloklar", 'kod', 'Tam ekran',
    "tarihi saat ekle", 'medya', 'masa', 'kod', 'yardım', 'sözcük sayısı'
     ],
     araç çubuğu: 'yinelemeyi geri al | bloklar | ' +
    'kalın italik ön renkli | hizalamasol hizalamamerkezi ' +
    'hizalama hizalama hizalama | bulist sayısal liste girintisi | ' +
    'biçimi kaldır | yardım',
     içerik_stil: 'body { yazı tipi ailesi: Helvetica, Arial, sans-serif; yazı tipi boyutu: 14px }'
     }}
    />
  • Bileşen, editör özelliklerini, yani API anahtarını, başlangıç ​​değerini, editörün yüksekliğine sahip bir nesneyi, eklentileri tanımlar. ve araç çubuğu özellikleri ve son olarak "editor" parametresinin değerini "editorRef" parametresine atayan editorRef.current yöntemi değişken.
  • "editor" parametresi, "onInit" olayı başlatıldığında iletilen bir olay nesnesidir.

Tam kod şöyle görünmelidir:

içe aktarmak Tepki, { useRef } itibaren'tepki';
içe aktarmak { GrammarlyEditorPlugin } itibaren'@grammarly/editor-sdk-react';
içe aktarmak { Editör } itibaren"@tinymce/tinymce-tepki";
işlevMetin düzeltici() {
sabit editorRef = useRef(hükümsüz);
geri dönmek (
<divsınıf adı="Uygulama">
<başlıksınıf adı="Uygulama başlığı">
 clientId={process.env. REACT_APP_GRAMARLY_CLIENT_ID}
 yapılandırma={
 { aktivasyon: "hemen" }}
 >
 apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editör) => editorRef.current = editör}
 başlangıçDeğeri="<P>Bu, düzenleyicinin ilk içeriğidir. P>"
 başlangıç={{
 yükseklik: 500,
 Menü çubuğu: YANLIŞ,
 eklentiler: [
'reklam listesi', "otomatik bağlantı", 'listeler', 'bağlantı', "resim", 'cazibe haritası', 'Ön izleme',
'Çapa', "arama değiştir", "görsel bloklar", 'kod', 'Tam ekran',
"tarihi saat ekle", 'medya', 'masa', 'kod', 'yardım', 'sözcük sayısı'
 ],
 araç çubuğu: 'yinelemeyi geri al | bloklar | ' +
'kalın italik ön renkli | hizalamasol hizalamamerkezi ' +
'hizalama hizalama hizalama | bulist sayısal liste girintisi | ' +
'biçimi kaldır | yardım',
 içerik_stil: 'body { yazı tipi ailesi: Helvetica, Arial, sans-serif; yazı tipi boyutu: 14px }'
 }}
 />
GrammarlyEditorPlugin>
başlık>
div>
 );
}
ihracatvarsayılan Metin düzeltici;

Bu kodda, Grammarly yardım özelliğini TinyMCE metin düzenleyicisine entegre etmek için TinyMCE düzenleyici bileşenini GrammarlyEditorPlugin ile sarmalarsınız. Son olarak, değişiklikleri kaydetmek ve şuraya gitmek için geliştirme sunucusunu döndürün: http://localhost: Sonuçları görüntülemek için tarayıcınızda 3000.

Kullanıcı Üretkenliğini Artırmak için Grammarly Kullanın

Grammarly'nin SDK'sı, bir React metin düzenleyicide içeriğinizin kalitesini ve doğruluğunu iyileştirmeye yardımcı olabilecek güçlü bir araç sağlar.

Mevcut projelerle entegrasyonu kolaydır ve kullanıcı yazma deneyimini geliştirebilen kapsamlı dilbilgisi ve yazım denetimi yetenekleri sağlar.