چگونه ویرایشگر متن Grammarly را در یک برنامه React ادغام کنیم

از ویژگی‌های تصحیح Grammarly با ادغام در برنامه خود استفاده کنید.

آیا انجام به موقع کار بدون اشتباهات تایپی و گرامری برایتان سخت است؟ به خصوص زمانی که می خواهید مطمئن شوید همه چیز عالی است، می تواند استرس زا باشد – استفاده از Grammarly می تواند بهره وری و تجربه نوشتن شما را بهبود بخشد.

Grammarly یک بررسی گر دستور زبان و تصحیح کننده مبتنی بر ابر است. خطاهای گرامری، املایی، نقطه گذاری و سایر خطاهای نوشتاری را شناسایی و تصحیح می کند. همچنین پیشنهاداتی برای تقویت واژگان ارائه می دهد که به شما در بهبود کیفیت نوشتارتان کمک می کند.

برای یادگیری نحوه ادغام Grammarly در ویرایشگر متنی که با React ساخته شده است، همراه باشید.

Grammarly برای توسعه دهندگان چیست؟

Grammarly به طور گسترده ای برای پسوند مرورگر خود شناخته شده است که می توانید از آن برای تصحیح اشتباهات گرامری در ویرایشگر متن یک وب سایت استفاده کنید. Grammarly for Developers یک ویژگی در Grammarly است که به شما کمک می‌کند ابزارهای تصحیح خودکار و تشخیص سرقت ادبی Grammarly را در برنامه‌های وب خود ادغام کنید.

اکنون می توانید از Grammarly برای ایجاد یک ویژگی داخلی ویرایش متن در زمان واقعی در برنامه وب خود با استفاده از کیت توسعه نرم افزار Grammarly (SDK) استفاده کنید. این به کاربران شما امکان می دهد بدون نیاز به دانلود برنامه افزودنی مرورگر به تمام ویژگی های Grammarly دسترسی داشته باشند.

یک برنامه جدید در Grammarly Developer Console ایجاد کنید

با دنبال کردن مراحل زیر، یک برنامه جدید را در کنسول توسعه دهنده Grammarly تنظیم کنید:

به کنسول Grammarly for Developers بروید و برای یک حساب کاربری ثبت نام کنید. اگر از قبل یک حساب Grammarly دارید، می توانید از آن برای ورود به کنسول استفاده کنید.
پس از ورود به سیستم، در داشبورد کنسول، روی دکمه New app کلیک کنید تا یک برنامه جدید ایجاد شود. نام برنامه خود را وارد کرده و Create را بزنید تا فرآیند به پایان برسد.
سپس، در سمت چپ داشبورد برنامه خود، تب Web را انتخاب کنید تا اعتبار برنامه خود را در صفحه تنظیمات سرویس گیرنده وب مشاهده کنید.
شناسه مشتری ارائه شده را کپی کنید. در همان صفحه، به راهنمای سریع نحوه ادغام Grammarly SDK در یک سرویس گیرنده وب توجه کنید. SDK با React، Vue.js و کلاینت های جاوا اسکریپت ساده سازگار است. همچنین می توانید با افزودن SDK به عنوان یک تگ اسکریپت، SDK را در HTML ادغام کنید.

Grammarly Text Editor SDK از آخرین نسخه های مرورگرهای محبوب دسکتاپ پشتیبانی می کند: Chrome، Firefox، Safari، Edge، Opera و Brave. در حال حاضر هیچ پشتیبانی از مرورگرهای تلفن همراه وجود ندارد.

مطلب مرتبط: نحوه ایجاد انیمیشن پیوسته در React Native با استفاده از Animated.loop()

SDK Grammarly را در یک ویرایشگر متن React ادغام کنید

ابتدا یک برنامه React ایجاد کنید. سپس، در پوشه اصلی پوشه پروژه خود، یک فایل ENV ایجاد کنید تا متغیر محیطی شما: ClientID شما را نگه دارد. به صفحه تنظیمات وب برنامه خود در Grammarly’s Developer Console بروید و ClientID خود را کپی کنید.

REACT_APP_GRAMMARLY_CLIENT_ID= ClientID

1. بسته های مورد نیاز را نصب کنید

این دستور را در ترمینال خود اجرا کنید تا Grammarly React Text Editor SDK را در برنامه خود نصب کنید:

npm install @grammarly/editor-sdk-react

2. یک ویرایشگر متن ایجاد کنید

پس از نصب SDK ویرایشگر متن Grammarly React، یک پوشه جدید در پوشه /src برنامه React خود ایجاد کنید و نام آن را اجزاء بگذارید. در داخل این پوشه، یک فایل جدید ایجاد کنید: TextEditor.js.

در فایل TextEditor.js کد زیر را اضافه کنید:

import React from 'react'
import { GrammarlyEditorPlugin } from '@grammarly/editor-sdk-react'

function TextEditor() {
  return (
    <div className="App">
      <header className="App-header">
        <GrammarlyEditorPlugin 
           clientId={process.env.REACT_APP_GRAMMARLY_CLIENT_ID}
           config={{ activation: "immediate" }}
        >
          <input placeholder="Share your thoughts!!" />
        </GrammarlyEditorPlugin>
      </header>
    </div>
  );
}

export default TextEditor;

در کد بالا، پلاگین GrammarlyEditor را از Grammarly-React SDK وارد کرده و یک تگ ورودی را با GrammarlyEditorPlugin بپیچید.

GrammarlyEditorPlugin دارای دو ویژگی است: شناسه مشتری و یک ویژگی پیکربندی که فعال سازی را روی فوری تنظیم می کند. این ویژگی افزونه را فعال می کند و به محض لود شدن صفحه در اختیار کاربر قرار می دهد.

اگر افزونه مرورگر Grammarly را دارید، باید آن را غیرفعال کنید یا برای این آموزش حذف نصب کنید، زیرا افزونه پروژه شما پس از شناسایی برنامه افزودنی در مرورگر شما با خطا مواجه می شود.

افزونه ویرایشگر Grammarly دارای ویژگی های پیکربندی اضافی دیگری است که می توانید از آنها برای سفارشی کردن ویرایشگر خود استفاده کنید. آنها عبارتند از:

تکمیل خودکار: این ویژگی عبارات را برای کاربران شما در حین تایپ کامل می کند.
ToneDetector: این رابط آشکارساز تن را نشان می دهد.

3. مولفه ویرایشگر متن را رندر کنید

کد زیر را در فایل app.js خود اضافه کنید تا جزء ویرایشگر متن خود را رندر کنید:

import TextEditor from './components/TextEditor';

function App() {
  return (
    <div className="App">
      <header className="App-header">
      <TextEditor />
      </header>
    </div>
  );
}

export default App;

اکنون، این دستور را بر روی ترمینال خود اجرا کنید تا سرور توسعه را چرخانده و نتایج را در مرورگر خود مشاهده کنید:

npm start

ویرایشگر Grammarly شما باید چیزی شبیه به این باشد:

مطلب مرتبط: استفاده از پایگاه داده MongoDB در یک برنامه NestJS با Mongoose

توجه داشته باشید، شما یک برچسب ورودی را با GrammarlyEditorPlugin بسته بندی کرده اید. همچنین می توانید یک عنصر textarea یا هر عنصر را با ویژگی مفید contenteditable که روی “true” تنظیم شده است، بپیچید.

استفاده از تگ textarea:

<GrammarlyEditorPlugin 
  clientId={process.env.REACT_APP_GRAMMARLY_CLIENT_ID}
  config={{ activation: "immediate" }}
>
    <textarea placeholder=" Share your thoughts!!" />
</GrammarlyEditorPlugin>

این دستور را در ترمینال خود اجرا کنید تا نتایج را در مرورگر خود مشاهده کنید:

npm start

سپس باید ناحیه متنی با قابلیت Grammarly خود را ببینید:

ادغام با یک ویرایشگر متن غنی مانند TinyMCE

همچنین می توانید یک ویرایشگر متن کامل را با GrammarlyEditorPlugin بپیچید. Grammarly Text Editor SDK با چندین ویرایشگر متن غنی از قبیل:

TinyMCE
سنگ لوح
CKEditor
قلم پر

TinyMCE یک ویرایشگر متن با کاربری آسان با ابزارهای قالب‌بندی و ویرایش زیادی است که کاربران را قادر می‌سازد تا محتوا را در یک رابط کاربر پسند بنویسند و ویرایش کنند.

برای ادغام ویرایشگر TinyMCE در برنامه React با فعال کردن دستیار نوشتن Grammarly، ابتدا از TinyMCE دیدن کنید و برای یک حساب توسعه دهنده ثبت نام کنید. سپس، در داشبورد Onboarding، یک URL دامنه برای برنامه خود ارائه دهید و روی Next: Continue to your dashboard کلیک کنید تا فرآیند راه اندازی به پایان برسد.

برای توسعه محلی، نیازی به تعیین دامنه ندارید زیرا URL لوکال هاست به طور پیش فرض تنظیم شده است، با این حال، هنگامی که برنامه React خود را به تولید ارسال کردید، باید URL دامنه زنده را ارائه دهید.

در نهایت، کلید API خود را از داشبورد توسعه دهنده خود کپی کنید و به پروژه خود در ویرایشگر کد خود برگردید و کلید API را در فایل ENV که قبلا ایجاد کرده اید اضافه کنید:

REACT_APP_TINY_MCE_API_KEY="API key"

اکنون به فایل TextEditor.js خود بروید و تغییرات زیر را اعمال کنید:

موارد زیر را وارد کنید: import React، { useRef } from ‘react’;import { Editor } from ‘@tinymce/tinymce-react’; قلاب useRef را اضافه کنید و جزء TinyMCE Editor را از بسته نصب شده وارد کنید.
در مؤلفه عملکردی، کد زیر را اضافه کنید: const editorRef = useRef(null); قلاب useRef به شما امکان می دهد مقادیر قابل تغییر بین رندرها را حفظ کنید. شما از متغیر editorRef برای حفظ وضعیت داده های تایپ شده در ویرایشگر استفاده خواهید کرد.
در نهایت، مؤلفه ویرایشگر را از کتابخانه TinyMCE برگردانید: editorRef.current = editor} initialValue=”
این محتوای اولیه است ویرایشگر.

” init={{ ارتفاع: 500، نوار منو: نادرست، افزونه‌ها: [ ‘advlist’, ‘autolink’, ‘lists’, ‘link’, ‘image’, ‘charmap’, ‘preview’, ‘anchor’، ‘searchreplace’، ‘visualblocks’، ‘code’، ‘تمام صفحه’، ‘insertdatetime، ‘media’، ‘table’، ‘code’، ‘help’، ‘wordcount’ ]، نوار ابزار: ‘واگرد مجدد | بلوک | ‘ + ‘پیش رنگ مورب پررنگ | alignleft aligncenter ‘ + ‘alignright alignjustify | bullist numlist تورفتگی بیرونی | ‘ + ‘removeformat | help’, content_style: ‘body { font-family:Helvetica,Arial,sans-serif; اندازه قلم: 14 پیکسل }’ }}/>
کامپوننت ویژگی های ویرایشگر را تعریف می کند، یعنی کلید API، مقدار اولیه، یک شی با ارتفاع ویرایشگر، ویژگی های پلاگین ها و نوار ابزار، و در نهایت متد editorRef.current که مقدار پارامتر “ویرایشگر” را به “تخصیص می دهد. متغیر editorRef”.
پارامتر “ویرایشگر” یک شی رویداد است که هنگام فعال شدن رویداد “onInit” ارسال می شود.

import React, { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';

 const editorRef = useRef(null);

<Editor
  apiKey={process.env.REACT_APP_TINY_MCE_API_KEY}
  onInit={(evt, editor) => editorRef.current = editor}
  initialValue="<p>This is the initial content of the editor.</p>"
  init={{
    height: 500,
    menubar: false,
    plugins: [
      'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
      'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
      'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
    ],
    toolbar: 'undo redo | blocks | ' +
      'bold italic forecolor | alignleft aligncenter ' +
      'alignright alignjustify | bullist numlist outdent indent | ' +
      'removeformat | help',
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
  }}
/>

کد کامل باید به شکل زیر باشد:

import React, { useRef } from 'react';
import { GrammarlyEditorPlugin } from '@grammarly/editor-sdk-react';
import { Editor } from '@tinymce/tinymce-react';
function TextEditor() {
  const editorRef = useRef(null);
  return (
    <div className="App">
      <header className="App-header">
      <GrammarlyEditorPlugin 
           clientId={process.env.REACT_APP_GRAMMARLY_CLIENT_ID}
            config={
              { activation: "immediate" }}
      >
        <Editor
          apiKey={process.env.REACT_APP_TINY_MCE_API_KEY}
          onInit={(evt, editor) => editorRef.current = editor}
         initialValue="<p>This is the initial content of the editor. </p>"
          init={{
            height: 500,
            menubar: false,
           plugins: [
              'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
              'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
              'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
           ],
            toolbar: 'undo redo | blocks | ' +
              'bold italic forecolor | alignleft aligncenter ' +
              'alignright alignjustify | bullist numlist outdent indent | ' +
              'removeformat | help',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
          }}
        />
     </GrammarlyEditorPlugin>
      </header>
    </div>
  );
}

export default TextEditor;

در این کد، مولفه ویرایشگر TinyMCE را با GrammarlyEditorPlugin می‌پیچید تا ویژگی کمکی Grammarly را در ویرایشگر متن TinyMCE ادغام کنید. در نهایت، سرور توسعه را برای ذخیره تغییرات بچرخانید و برای مشاهده نتایج به http://localhost:3000 در مرورگر خود بروید.

از Grammarly برای بهبود بهره وری کاربر استفاده کنید

Grammarly’s SDK ابزار قدرتمندی است که می تواند به بهبود کیفیت و دقت محتوای شما در ویرایشگر متن React کمک کند.

ادغام با پروژه های موجود آسان است و گرامر و قابلیت های املای جامعی را ارائه می دهد که می تواند تجربه نوشتن کاربر را بهبود بخشد.

مطلب مرتبط: 9 چالشی که هر توسعه‌دهنده نرم‌افزاری با آن مواجه است و نحوه مقابله با آن‌ها