קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף. קרא עוד.

האם אתה מתקשה לספק עבודה בזמן מבלי לעשות שגיאות הקלדה ושגיאות דקדוק? זה יכול להיות מלחיץ במיוחד כשאתה רוצה לוודא שהכל מושלם - שימוש ב- Grammarly יכול לשפר את הפרודוקטיביות ואת חווית הכתיבה שלך.

Grammarly הוא בודק דקדוק ומגיה מבוסס ענן. הוא מזהה ומתקן שגיאות דקדוק, איות, סימני פיסוק ושגיאות כתיבה אחרות. הוא מציע גם הצעות לשיפור אוצר המילים שיעזרו לך לשפר את איכות הכתיבה שלך.

עקוב אחר כך כדי ללמוד כיצד לשלב את Grammarly בעורך טקסט שנבנה עם React.

מהי דקדוק למפתחים?

Grammarly זוכה להכרה נרחבת בזכות סיומת הדפדפן שלה שבה אתה יכול להשתמש כדי לתקן טעויות דקדוקיות בעורך הטקסט של אתר אינטרנט. Grammarly for Developers היא תכונה ב- Grammarly המסייעת לך לשלב את כלי ההגהה האוטומטיים של Grammarly וזיהוי גניבת עין ביישומי האינטרנט שלך.

כעת תוכל להשתמש ב- Grammarly כדי ליצור תכונה מובנית של עריכת טקסט בזמן אמת ביישום האינטרנט שלך באמצעות ערכת פיתוח התוכנה (SDK) של Grammarly. זה נותן למשתמשים שלך גישה לכל תכונות Grammarly מבלי צורך להוריד את תוסף הדפדפן.

instagram viewer

צור אפליקציה חדשה ב- Grammarly Developer Console

הגדר אפליקציה חדשה בקונסולת המפתחים של Grammarly על ידי ביצוע השלבים הבאים:

  1. פנה אל ה דקדוק למפתחים מסוף והירשם לחשבון. אם כבר יש לך חשבון Grammarly, אתה יכול להשתמש בו כדי להיכנס למסוף.
  2. לאחר הכניסה, בלוח המחוונים של המסוף, לחץ על אפליקציה חדשה לחצן כדי ליצור יישום חדש. מלא את שם האפליקציה שלך והקש לִיצוֹר כדי לסיים את התהליך.
  3. לאחר מכן, בחלונית השמאלית של לוח המחוונים של היישום שלך, בחר את אינטרנט לשונית כדי להציג את האישורים של היישום שלך בדף ההגדרות של לקוח האינטרנט.
  4. העתק את זיהוי הלקוח שסופק. באותו עמוד, שימו לב למדריך המהיר כיצד לשלב את Grammarly SDK בלקוח אינטרנט. ה-SDK תואם ל-React, Vue.js ולקוחות JavaScript רגילים. אתה יכול גם לשלב את ה-SDK ב-HTML על ידי הוספת ה-SDK כתג סקריפט.

ה-SDK של Grammarly Text Editor תומך בגרסאות האחרונות של דפדפני שולחן עבודה פופולריים: Chrome, Firefox, Safari, Edge, Opera ו-Brave. כרגע אין תמיכה בדפדפנים ניידים.

שלב את ה-SDK של Grammarly בעורך טקסט React

ראשון, ליצור אפליקציית React. לאחר מכן, בספריית השורש של תיקיית הפרויקט שלך, צור קובץ ENV שיכיל את משתנה הסביבה שלך: זיהוי הלקוח שלך. עבור אל דף הגדרות האינטרנט של האפליקציה שלך במסוף המפתחים של Grammarly, והעתק את מזהה הלקוח שלך.

REACT_APP_GRAMMARLY_CLIENT_ID= מזהה לקוח

1. התקן את החבילות הנדרשות

הפעל את הפקודה הזו בטרמינל שלך כדי להתקין את Grammarly React Text Editor SDK באפליקציה שלך:

npm להתקין @דקדוק/editor-sdk-react

2. צור עורך טקסט

לאחר התקנת ה-SDK של עורך הטקסט Grammarly React, צור תיקיה חדשה בספריית /src של אפליקציית React שלך, ותן שם לרכיבים. בתוך תיקיה זו, צור קובץ חדש: TextEditor.js.

בקובץ TextEditor.js, הוסף את הקוד שלהלן:

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא { GrammarlyEditorPlugin } מ'@grammarly/editor-sdk-react'
פוּנקצִיָהעורך טקסט() {
לַחֲזוֹר (
<divclassName="אפליקציה">
<כּוֹתֶרֶתclassName="כותרת אפליקציה">
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ הַפעָלָה: "מִיָדִי" }}
 >
<קֶלֶטמציין מיקום="שתף את המחשבות שלך!!" />
Plugin GrammarlyEditor>
כּוֹתֶרֶת>
div>
 );
}
יְצוּאבְּרִירַת מֶחדָל עורך טקסט;

בקוד למעלה, אתה מייבא את ה- GrammarlyEditorPlugin מה- Grammarly-React SDK ועוטף תג קלט עם ה- GrammarlyEditorPlugin.

ה- GrammarlyEditorPlugin תופס שני מאפיינים: מזהה לקוח ומאפיין תצורה שמגדיר את ההפעלה למיידית. מאפיין זה מפעיל את הפלאגין והופך אותו לזמין למשתמש ברגע שהדף נטען.

אם יש לך את סיומת הדפדפן Grammarly, עליך להשבית אותה או להסיר אותה לשם כך מדריך מכיוון שהתוסף בפרויקט שלך יזרוק שגיאה ברגע שהוא יזהה את התוסף שלך דפדפן.

לפלאגין העורך של Grammarly יש מאפייני תצורה נוספים שבהם אתה יכול להשתמש כדי להתאים אישית את העורך שלך. הם כוללים:

  • השלמה אוטומטית: מאפיין זה משלים ביטויים עבור המשתמשים שלך בזמן שהם מקלידים.
  • Detector Tone: זה מציג את ממשק גלאי הטון.

3. עבד את רכיב עורך הטקסט

הוסף את הקוד למטה בקובץ app.js שלך כדי להציג את רכיב עורך הטקסט שלך:

יְבוּא עורך טקסט מ'./components/TextEditor';
פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
<divclassName="אפליקציה">
<כּוֹתֶרֶתclassName="כותרת אפליקציה">
<עורך טקסט />
כּוֹתֶרֶת>
div>
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

כעת, הפעל את הפקודה הזו בטרמינל שלך כדי לסובב את שרת הפיתוח ולצפות בתוצאות בדפדפן שלך:

npm הַתחָלָה

העורך התומך ב- Grammarly אמור להיראות בערך כך:

שימו לב, עטפתם תג קלט עם ה- GrammarlyEditorPlugin. אתה יכול גם לעטוף אלמנט של אזור טקסט או כל אלמנט איתו התכונה השימושית שניתן לערוך בתוכן מוגדר ל"נכון".

שימוש בתג textarea:

 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={{ הַפעָלָה: "מִיָדִי" }}
>
<אזור טקסטמציין מיקום=" שתף את המחשבות שלך!!" />
Plugin GrammarlyEditor>

הפעל את הפקודה הזו בטרמינל שלך כדי לראות את התוצאות בדפדפן שלך:

npm הַתחָלָה

לאחר מכן, אתה אמור לראות את אזור הטקסט התומך ב- Grammarly:

השתלב עם עורך טקסט עשיר כמו TinyMCE

אתה יכול גם לעטוף עורך טקסט מלא עם GrammarlyEditorPlugin. ה-SDK של Grammarly Text Editor תואם למספר עורכי טקסט עשירים כגון:

  • TinyMCE
  • צִפחָה
  • CKEeditor
  • נוֹצָה

TinyMCE הוא עורך טקסט קל לשימוש עם הרבה כלי עיצוב ועריכה המאפשרים למשתמשים לכתוב ולערוך תוכן בממשק ידידותי למשתמש.

כדי לשלב את העורך של TinyMCE באפליקציית React עם עוזר הכתיבה Grammarly מופעל, ראשית, בקר ב TinyMCE ולהירשם לחשבון מפתח. לאחר מכן, בלוח המחוונים של Onboarding, ספק כתובת אתר של דומיין עבור היישום שלך ולחץ על הבא: המשך ללוח המחוונים שלך לחצן כדי לסיים את תהליך ההגדרה.

לפיתוח מקומי, אינך צריך לציין את הדומיין מכיוון שכתובת האתר של המארח המקומי מוגדרת על ידי ברירת מחדל, עם זאת, ברגע שאתה שולח את אפליקציית React שלך לייצור, אתה צריך לספק את החי כתובת האתר של הדומיין.

לבסוף, העתק את מפתח ה-API שלך מלוח המחוונים למפתחים וחזור לפרויקט שלך בעורך הקוד והוסף את מפתח ה-API בקובץ ה-ENV שיצרת קודם לכן:

REACT_APP_TINY_MCE_API_KEY="מפתח API"

כעת, עבור לקובץ TextEditor.js שלך ובצע את השינויים הבאים:

  • בצע את הייבוא ​​הבא: 
    יְבוּא הגיבו, { useRef } מ'לְהָגִיב';
    יְבוּא { עורך } מ'@tinymce/tinymce-react';
    הוסף את ה-useRef hook וייבא את רכיב TinyMCE Editor מהחבילה המותקנת.
  • ברכיב הפונקציונלי, הוסף את הקוד שלהלן: 
    const editorRef = useRef(ריק);
    ה-useRef Hook מאפשר לך להתמיד בערכים הניתנים לשינוי בין עיבודים. אתה תשתמש במשתנה editorRef כדי לשמור על מצב הנתונים שהוקלדו בעורך.
  • לבסוף, החזר את רכיב העורך מספריית TinyMCE: 
     apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
     onInit={(evt, editor) => editorRef.current = עורך}
     initialValue="<ע>זהו התוכן הראשוני של העורך.ע>"
     init={{
     גובה: 500,
     תפריט הבר: שֶׁקֶר,
     תוספים: [
    'advlist', 'קישור אוטומטי', 'רשימות', 'קישור', 'תמונה', 'charmap', 'תצוגה מקדימה',
    'לְעַגֵן', 'חפש להחליף', 'בלוקים חזותיים', 'קוד', 'מסך מלא',
    'insertdatetime', 'כְּלֵי תִקְשׁוֹרֶת', 'שולחן', 'קוד', 'עֶזרָה', 'ספירת מילים'
     ],
     סרגל כלים: 'בטל מחדש | בלוקים | ' +
    צבע קדמי נטוי מודגש | alignleft aligncenter ' +
    'alignright alignjustify | כניסת שקע בוליסט numlist | ' +
    'הסר פורמט | עֶזרָה',
     content_style: 'גוף { font-family: Helvetica, Arial, sans-serif; גודל גופן: 14px }'
     }}
    />
  • הרכיב מגדיר את מאפייני העורך כלומר מפתח API, הערך ההתחלתי, אובייקט עם גובה העורך, התוספים ומאפייני סרגל הכלים, ולבסוף השיטה editorRef.current אשר מקצה את הערך של הפרמטר "עורך" ל-"editorRef" מִשְׁתַנֶה.
  • הפרמטר "עורך" הוא אובייקט אירוע שמועבר כאשר האירוע "onInit" מופעל.

הקוד המלא אמור להיראות כך:

יְבוּא הגיבו, { useRef } מ'לְהָגִיב';
יְבוּא { GrammarlyEditorPlugin } מ'@grammarly/editor-sdk-react';
יְבוּא { עורך } מ'@tinymce/tinymce-react';
פוּנקצִיָהעורך טקסט() {
const editorRef = useRef(ריק);
לַחֲזוֹר (
<divclassName="אפליקציה">
<כּוֹתֶרֶתclassName="כותרת אפליקציה">
 clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
 config={
 { הַפעָלָה: "מִיָדִי" }}
 >
 apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
 onInit={(evt, editor) => editorRef.current = עורך}
 initialValue="<ע>זהו התוכן הראשוני של העורך. ע>"
 init={{
 גובה: 500,
 תפריט הבר: שֶׁקֶר,
 תוספים: [
'advlist', 'קישור אוטומטי', 'רשימות', 'קישור', 'תמונה', 'charmap', 'תצוגה מקדימה',
'לְעַגֵן', 'חפש להחליף', 'בלוקים חזותיים', 'קוד', 'מסך מלא',
'insertdatetime', 'כְּלֵי תִקְשׁוֹרֶת', 'שולחן', 'קוד', 'עֶזרָה', 'ספירת מילים'
 ],
 סרגל כלים: 'בטל מחדש | בלוקים | ' +
צבע קדמי נטוי מודגש | alignleft aligncenter ' +
'alignright alignjustify | כניסת שקע בוליסט numlist | ' +
'הסר פורמט | עֶזרָה',
 content_style: 'גוף { font-family: Helvetica, Arial, sans-serif; גודל גופן: 14px }'
 }}
 />
Plugin GrammarlyEditor>
כּוֹתֶרֶת>
div>
 );
}
יְצוּאבְּרִירַת מֶחדָל עורך טקסט;

בקוד זה, אתה עוטף את רכיב עורך TinyMCE עם GrammarlyEditorPlugin כדי לשלב את תכונת העזרה Grammarly בעורך הטקסט של TinyMCE. לבסוף, הפוך את שרת הפיתוח כדי לשמור את השינויים ולנווט אליו http://localhost: 3000 בדפדפן שלך כדי לראות את התוצאות.

השתמש בדקדוק כדי לשפר את פרודוקטיביות המשתמש

ה-SDK של Grammarly מספק כלי רב עוצמה שיכול לעזור לשפר את האיכות והדיוק של התוכן שלך בעורך טקסט של React.

קל להשתלב בפרויקטים קיימים ומספק יכולות דקדוק ובדיקת איות מקיפות שיכולות לשפר את חווית הכתיבה של המשתמש.