Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Apakah Anda merasa sulit untuk mengirimkan pekerjaan tepat waktu tanpa membuat kesalahan ketik dan tata bahasa? Ini bisa membuat stres terutama ketika Anda ingin memastikan semuanya sempurna—menggunakan Grammarly dapat meningkatkan produktivitas dan pengalaman menulis Anda.

Grammarly adalah pemeriksa tata bahasa dan korektor berbasis cloud. Ini mendeteksi dan mengoreksi tata bahasa, ejaan, tanda baca, dan kesalahan penulisan lainnya. Ini juga menawarkan saran peningkatan kosakata yang membantu Anda meningkatkan kualitas tulisan Anda.

Ikuti terus untuk mempelajari cara mengintegrasikan Grammarly ke dalam editor teks yang dibangun dengan React.

Apa Grammarly untuk Pengembang?

Grammarly dikenal luas untuk ekstensi perambannya yang dapat Anda gunakan untuk memperbaiki kesalahan tata bahasa di editor teks situs web. Grammarly for Developers adalah fitur di Grammarly yang membantu Anda mengintegrasikan alat pengoreksi otomatis dan alat deteksi plagiarisme Grammarly ke dalam aplikasi web Anda.

instagram viewer

Anda sekarang dapat menggunakan Grammarly untuk membuat fitur pengeditan teks real-time bawaan ke dalam aplikasi web Anda menggunakan Software Development Kit (SDK) Grammarly. Ini memberi pengguna Anda akses ke semua fitur Grammarly tanpa perlu mengunduh ekstensi browser.

Buat Aplikasi Baru di Grammarly Developer Console

Siapkan aplikasi baru di konsol pengembang Grammarly dengan mengikuti langkah-langkah berikut:

  1. Kepala ke Grammarly untuk Pengembang konsol dan mendaftar untuk sebuah akun. Jika Anda sudah memiliki akun Grammarly, Anda dapat menggunakannya untuk masuk ke konsol.
  2. Setelah masuk, di dasbor konsol, klik pada Aplikasi baru tombol untuk membuat aplikasi baru. Isi nama aplikasi Anda dan tekan Membuat untuk menyelesaikan proses.
  3. Selanjutnya, di panel kiri dasbor aplikasi Anda, pilih Web tab untuk melihat kredensial aplikasi Anda di halaman pengaturan klien web.
  4. Salin ID Klien yang diberikan. Di halaman yang sama, perhatikan panduan cepat tentang cara mengintegrasikan SDK Grammarly di klien web. SDK kompatibel dengan klien React, Vue.js, dan JavaScript biasa. Anda juga dapat mengintegrasikan SDK ke dalam HTML dengan menambahkan SDK sebagai tag skrip.

Grammarly Text Editor SDK mendukung versi terbaru browser desktop populer: Chrome, Firefox, Safari, Edge, Opera, dan Brave. Saat ini tidak ada dukungan untuk browser seluler.

Integrasikan SDK Grammarly dalam React Text Editor

Pertama, membuat aplikasi Bereaksi. Selanjutnya, di direktori root folder proyek Anda, buat file ENV untuk menyimpan variabel lingkungan Anda: ClientID Anda. Buka halaman pengaturan web aplikasi Anda di Konsol Pengembang Grammarly, dan salin ID Klien Anda.

REACT_APP_GRAMMARLY_CLIENT_ID= ID Klien

1. Instal Paket yang Diperlukan

Jalankan perintah ini di terminal Anda untuk menginstal Grammarly React Text Editor SDK di aplikasi Anda:

instal npm @tata bahasa/editor-sdk-react

2. Buat Editor Teks

Setelah menginstal SDK editor teks Grammarly React, buat folder baru di direktori /src aplikasi React Anda, dan beri nama, komponen. Di dalam folder ini, buat file baru: TextEditor.js.

Pada file TextEditor.js, tambahkan kode di bawah ini:

impor Reaksi dari'reaksi'
impor { GrammarlyEditorPlugin } dari'@grammarly/editor-sdk-react'
fungsiEditor Teks() {
kembali (
<divnama kelas="Aplikasi">
<tajuknama kelas="Tajuk-aplikasi">
 clientId={proses.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 konfigurasi={{ pengaktifan: "segera" }}
 >
<memasukkanplaceholder="Bagikan pendapatmu!!" />
GrammarlyEditorPlugin>
tajuk>
div>
 );
}
eksporbawaan Editor Teks;

Pada kode di atas, Anda mengimpor GrammarlyEditorPlugin dari Grammarly-React SDK dan membungkus tag masukan dengan GrammarlyEditorPlugin.

GrammarlyEditorPlugin menggunakan dua properti: clientID, dan properti config yang menyetel aktivasi menjadi segera. Properti ini mengaktifkan plugin dan membuatnya tersedia untuk pengguna segera setelah halaman dimuat.

Jika Anda memiliki ekstensi browser Grammarly, Anda perlu menonaktifkannya atau mencopotnya untuk ini tutorial karena plugin pada proyek Anda akan menimbulkan kesalahan setelah mendeteksi ekstensi pada Anda browser.

Plugin editor Grammarly memiliki properti konfigurasi tambahan lainnya yang dapat Anda gunakan untuk menyesuaikan editor Anda. Mereka termasuk:

  • Pelengkapan otomatis: Properti ini melengkapi frasa untuk pengguna Anda saat mereka mengetik.
  • ToneDetector: Ini menunjukkan antarmuka detektor nada.

3. Render Komponen Editor Teks

Tambahkan kode di bawah ini di file app.js Anda untuk merender komponen editor teks Anda:

impor Editor Teks dari'./components/TextEditor';
fungsiAplikasi() {
kembali (
<divnama kelas="Aplikasi">
<tajuknama kelas="Tajuk-aplikasi">
<Editor Teks />
tajuk>
div>
 );
}
eksporbawaan Aplikasi;

Sekarang, jalankan perintah ini di terminal Anda untuk menjalankan server pengembangan dan lihat hasilnya di browser Anda:

npm awal

Editor Anda yang mengaktifkan Grammarly akan terlihat seperti ini:

Perhatikan, Anda membungkus tag masukan dengan GrammarlyEditorPlugin. Anda juga dapat membungkus elemen textarea atau elemen apa pun dengan atribut contenteditable yang berguna disetel ke "benar".

Menggunakan tag textarea:

 clientId={proses.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 konfigurasi={{ pengaktifan: "segera" }}
>
<textareaplaceholder="Bagikan pemikiran Anda!!" />
GrammarlyEditorPlugin>

Jalankan perintah ini di terminal Anda untuk melihat hasilnya di browser Anda:

npm awal

Anda kemudian akan melihat textarea Anda yang mengaktifkan Grammarly:

Integrasikan Dengan Editor Teks Kaya Seperti TinyMCE

Anda juga dapat membungkus editor teks lengkap dengan GrammarlyEditorPlugin. Grammarly Text Editor SDK kompatibel dengan beberapa editor teks kaya seperti:

  • TinyMCE
  • Batu tulis
  • CKEditor
  • Bulu ayam

TinyMCE adalah editor teks yang mudah digunakan dengan banyak alat pemformatan dan pengeditan yang memungkinkan pengguna untuk menulis dan mengedit konten dalam antarmuka yang ramah pengguna.

Untuk mengintegrasikan editor TinyMCE ke dalam aplikasi React dengan asisten penulisan Grammarly diaktifkan, pertama, kunjungi TinyMCE dan mendaftar untuk akun pengembang. Selanjutnya, di dasbor Onboarding, berikan URL domain untuk aplikasi Anda dan klik Selanjutnya: Lanjutkan ke dasbor Anda tombol untuk menyelesaikan proses penyiapan.

Untuk pengembangan lokal, Anda tidak perlu menentukan domain karena URL localhost ditetapkan oleh default, bagaimanapun, setelah Anda mengirim aplikasi React ke produksi, Anda harus menyediakan live URL domain.

Terakhir, salin kunci API Anda dari dasbor pengembang dan kembali ke proyek Anda di editor kode Anda dan tambahkan kunci API di file ENV yang Anda buat sebelumnya:

REACT_APP_TINY_MCE_API_KEY="Kunci API"

Sekarang, buka file TextEditor.js Anda dan buat perubahan berikut:

  • Lakukan impor berikut: 
    impor Bereaksi, { useRef } dari'reaksi';
    impor { Editor } dari'@tinymce/tinymce-react';
    Tambahkan hook useRef dan impor komponen Editor TinyMCE dari paket yang diinstal.
  • Pada komponen fungsional, tambahkan kode di bawah ini: 
    const editorRef = useRef(batal);
    Kait useRef memungkinkan Anda untuk mempertahankan nilai yang dapat diubah di antara perenderan. Anda akan menggunakan variabel editorRef untuk mempertahankan keadaan data yang diketik pada editor.
  • Terakhir, kembalikan komponen editor dari library TinyMCE: 
     apiKey={proses.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editor) => editorRef.current = editor}
     nilai awal="<P>Ini adalah konten awal editor.P>"
     init={{
     tinggi: 500,
     bilah menu: PALSU,
     plugin: [
    'daftar iklan', 'tautan otomatis', 'daftar', 'tautan', 'gambar', 'pesona', 'pratinjau',
    'jangkar', 'cariganti', 'blok visual', 'kode', 'layar penuh',
    'masukkan tanggalwaktu', 'media', 'meja', 'kode', 'membantu', 'jumlah kata'
     ],
     bilah alat: 'batal ulang | blok | ' +
    'garis depan tebal miring | alignleft aligncenter ' +
    'alignright alignjustify | bullist numlist outdent indent | ' +
    'hapus format | membantu',
     content_style: 'body { font-family: Helvetica, Arial, sans-serif; ukuran font: 14px }'
     }}
    />
  • Komponen mendefinisikan properti editor yaitu kunci API, nilai awal, objek dengan ketinggian editor, plugin dan properti bilah alat, dan terakhir metode editorRef.current yang menetapkan nilai parameter "editor" ke "editorRef" variabel.
  • Parameter "editor" adalah objek kejadian yang diteruskan saat kejadian "onInit" diaktifkan.

Kode lengkap akan terlihat seperti ini:

impor Bereaksi, { useRef } dari'reaksi';
impor { GrammarlyEditorPlugin } dari'@grammarly/editor-sdk-react';
impor { Editor } dari'@tinymce/tinymce-react';
fungsiEditor Teks() {
const editorRef = useRef(batal);
kembali (
<divnama kelas="Aplikasi">
<tajuknama kelas="Tajuk-aplikasi">
 clientId={proses.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 konfigurasi={
 { pengaktifan: "segera" }}
 >
 apiKey={proses.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editor) => editorRef.current = editor}
 nilai awal="<P>Ini adalah konten awal editor. P>"
 init={{
 tinggi: 500,
 bilah menu: PALSU,
 plugin: [
'daftar iklan', 'tautan otomatis', 'daftar', 'tautan', 'gambar', 'pesona', 'pratinjau',
'jangkar', 'cariganti', 'blok visual', 'kode', 'layar penuh',
'masukkan tanggalwaktu', 'media', 'meja', 'kode', 'membantu', 'jumlah kata'
 ],
 bilah alat: 'batal ulang | blok | ' +
'garis depan tebal miring | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'hapus format | membantu',
 content_style: 'body { font-family: Helvetica, Arial, sans-serif; ukuran font: 14px }'
 }}
 />
GrammarlyEditorPlugin>
tajuk>
div>
 );
}
eksporbawaan Editor Teks;

Dalam kode ini, Anda menggabungkan komponen editor TinyMCE dengan GrammarlyEditorPlugin untuk mengintegrasikan fitur bantuan Grammarly pada editor teks TinyMCE. Terakhir, aktifkan server pengembangan untuk menyimpan perubahan dan arahkan ke http://localhost: 3000 di browser Anda untuk melihat hasilnya.

Gunakan Grammarly untuk Meningkatkan Produktivitas Pengguna

SDK Grammarly menyediakan alat canggih yang dapat membantu meningkatkan kualitas dan akurasi konten Anda dalam editor teks Bereaksi.

Sangat mudah untuk diintegrasikan dengan proyek yang sudah ada dan memberikan kemampuan tata bahasa dan pemeriksaan ejaan yang komprehensif yang dapat meningkatkan pengalaman menulis pengguna.