व्याकरण के टेक्स्ट एडिटर को रिएक्ट एप्लिकेशन में कैसे एकीकृत करें

क्या आपको टाइपो और व्याकरण की त्रुटियों के बिना समय पर काम करने में कठिनाई हो रही है? यह विशेष रूप से तनावपूर्ण हो सकता है जब आप यह सुनिश्चित करना चाहते हैं कि सब कुछ सही है- व्याकरण का उपयोग करने से आपकी उत्पादकता और लेखन अनुभव में सुधार हो सकता है।

व्याकरण एक क्लाउड-आधारित व्याकरण-परीक्षक और प्रूफ़रीडर है। यह व्याकरण, वर्तनी, विराम चिह्न और अन्य लेखन त्रुटियों का पता लगाता है और उन्हें ठीक करता है। यह शब्दावली बढ़ाने के सुझाव भी प्रदान करता है जो आपके लेखन की गुणवत्ता में सुधार करने में आपकी सहायता करते हैं।

व्याकरण को रिएक्ट के साथ बनाए गए टेक्स्ट एडिटर में कैसे एकीकृत किया जाए, यह जानने के लिए आगे बढ़ें।

डेवलपर्स के लिए व्याकरण क्या है?

व्याकरण अपने ब्राउज़र एक्सटेंशन के लिए व्यापक रूप से पहचाना जाता है जिसका उपयोग आप वेबसाइट के टेक्स्ट एडिटर में व्याकरण संबंधी गलतियों को ठीक करने के लिए कर सकते हैं। डेवलपर्स के लिए ग्रामरली ग्रामरली पर एक विशेषता है जो आपको ग्रामरली के स्वचालित प्रूफरीडिंग और साहित्यिक चोरी का पता लगाने वाले उपकरणों को अपने वेब अनुप्रयोगों में एकीकृत करने में मदद करती है।

अब आप ग्रामरली के सॉफ्टवेयर डेवलपमेंट किट (एसडीके) का उपयोग करके अपने वेब एप्लिकेशन में एक अंतर्निहित रीयल-टाइम टेक्स्ट एडिटिंग फीचर बनाने के लिए ग्रामरली का उपयोग कर सकते हैं। यह आपके उपयोगकर्ताओं को ब्राउज़र एक्सटेंशन डाउनलोड करने की आवश्यकता के बिना सभी ग्रामरली सुविधाओं तक पहुंच प्रदान करता है।

ग्रामरली डेवलपर कंसोल पर एक नया एप्लिकेशन बनाएं

इन चरणों का पालन करके ग्रामरली के डेवलपर कंसोल पर एक नया एप्लिकेशन सेट करें:

1. पर जाएँ डेवलपर्स के लिए व्याकरण कंसोल और एक खाते के लिए साइन अप करें। यदि आपके पास पहले से ग्रामरली खाता है, तो आप इसका उपयोग कंसोल में साइन इन करने के लिए कर सकते हैं।
2. साइन इन करने के बाद, कंसोल के डैशबोर्ड पर, पर क्लिक करें नया ऐप नया एप्लिकेशन बनाने के लिए बटन। अपने ऐप का नाम भरें और हिट करें बनाएं प्रक्रिया समाप्त करने के लिए।
3. अगला, अपने एप्लिकेशन के डैशबोर्ड के बाएँ फलक पर, का चयन करें वेब वेब क्लायंट सेटिंग पृष्ठ पर अपने ऐप्लिकेशन के क्रेडेंशियल देखने के लिए टैब.
4. प्रदान की गई क्लाइंट आईडी कॉपी करें। उसी पृष्ठ पर, वेब क्लाइंट पर ग्रामरली एसडीके को कैसे एकीकृत किया जाए, इस पर त्वरित मार्गदर्शिका देखें। SDK रिएक्ट, Vue.js और सादे जावास्क्रिप्ट क्लाइंट के साथ संगत है। आप SDK को स्क्रिप्ट टैग के रूप में जोड़कर SDK को HTML में एकीकृत भी कर सकते हैं।

व्याकरण पाठ संपादक एसडीके लोकप्रिय डेस्कटॉप ब्राउज़रों के नवीनतम संस्करणों का समर्थन करता है: क्रोम, फ़ायरफ़ॉक्स, सफारी, एज, ओपेरा और बहादुर। वर्तमान में मोबाइल ब्राउज़र के लिए कोई समर्थन नहीं है।

ग्रामरली के एसडीके को रिएक्ट टेक्स्ट एडिटर में एकीकृत करें

पहला, एक रिएक्ट एप्लिकेशन बनाएं. अगला, अपने प्रोजेक्ट फ़ोल्डर की रूट डायरेक्टरी में, अपने पर्यावरण चर को रखने के लिए एक ENV फ़ाइल बनाएँ: आपका ClientID। ग्रामरली के डेवलपर कंसोल पर अपने एप्लिकेशन के वेब सेटिंग पेज पर जाएं, और अपनी क्लाइंट आईडी कॉपी करें।

REACT_APP_GRAMMARLY_CLIENT_ID= ClientID

1. आवश्यक पैकेज स्थापित करें

अपने ऐप में ग्रामरली रिएक्ट टेक्स्ट एडिटर SDK को स्थापित करने के लिए अपने टर्मिनल पर इस कमांड को चलाएँ:

एनपीएम इंस्टॉल करें @grammarly/editor-sdk-react

2. एक पाठ संपादक बनाएँ

ग्रामरली रिएक्ट टेक्स्ट एडिटर एसडीके स्थापित करने के बाद, अपने रिएक्ट एप्लिकेशन की /src डायरेक्टरी में एक नया फोल्डर बनाएं और इसे कंपोनेंट्स नाम दें। इस फ़ोल्डर के अंदर, एक नई फ़ाइल बनाएँ: TextEditor.js।

TextEditor.js फ़ाइल में, नीचे दिया गया कोड जोड़ें:

आयात प्रतिक्रिया से'प्रतिक्रिया'
आयात {व्याकरण संपादकप्लगइन} से'@grammarly/editor-sdk-react'
समारोहपाठ संपादक() {
वापस करना (
<डिवकक्षा का नाम="अनुप्रयोग">
<हैडरकक्षा का नाम="ऐप-हेडर">
 क्लाइंटआईड = {प्रोसेस.एनवी। REACT_APP_GRAMMARLY_CLIENT_ID}
 विन्यास = {{ सक्रियण: "तुरंत" }}
 >
<इनपुटप्लेसहोल्डर="अपने विचारों को साझा करें!!" />
व्याकरण संपादकप्लगइन>
हैडर>
डिव>
 );
}
निर्यातगलती करना पाठ संपादक;

उपरोक्त कोड में, आप Grammarly-React SDK से GrammarlyEditorPlugin आयात करते हैं और GrammarlyEditorPlugin के साथ एक इनपुट टैग लपेटते हैं।

GrammarlyEditorPlugin दो गुण लेता है: क्लाइंट आईडी, और एक कॉन्फ़िगरेशन गुण जो सक्रियण को तत्काल पर सेट करता है। यह संपत्ति प्लगइन को सक्रिय करती है और पेज लोड होते ही इसे उपयोगकर्ता के लिए उपलब्ध कराती है।

यदि आपके पास ग्रामरली ब्राउज़र एक्सटेंशन है, तो आपको इसके लिए इसे अक्षम या अनइंस्टॉल करने की आवश्यकता है ट्यूटोरियल क्योंकि आपके प्रोजेक्ट पर प्लगइन एक बार आपके एक्सटेंशन का पता लगाने के बाद एक त्रुटि फेंक देगा ब्राउज़र।

व्याकरण के संपादक प्लगइन में अन्य अतिरिक्त कॉन्फ़िगरेशन गुण हैं जिनका उपयोग आप अपने संपादक को अनुकूलित करने के लिए कर सकते हैं। वे सम्मिलित करते हैं:

• स्वत: पूर्ण: यह संपत्ति आपके उपयोगकर्ताओं के टाइप करते ही वाक्यांशों को पूरा करती है।
• टोन डिटेक्टर: यह टोन डिटेक्टर इंटरफ़ेस दिखाता है।

3. पाठ संपादक घटक प्रस्तुत करें

अपने पाठ संपादक घटक को प्रस्तुत करने के लिए अपनी app.js फ़ाइल में नीचे दिए गए कोड को जोड़ें:

आयात पाठ संपादक से'./components/TextEditor';
समारोहअनुप्रयोग() {
वापस करना (
<डिवकक्षा का नाम="अनुप्रयोग">
<हैडरकक्षा का नाम="ऐप-हेडर">
<पाठ संपादक />
हैडर>
डिव>
 );
}
निर्यातगलती करना अनुप्रयोग;

अब, इस आदेश को विकास सर्वर को स्पिन करने के लिए अपने टर्मिनल पर चलाएं और अपने ब्राउज़र पर परिणाम देखें:

NPM शुरू

आपका ग्रामरली-इनेबल्ड एडिटर कुछ इस तरह दिखना चाहिए:

ध्यान दें, आपने GrammarlyEditorPlugin के साथ एक इनपुट टैग लपेटा है। आप टेक्स्टएरिया तत्व या किसी तत्व को भी लपेट सकते हैं उपयोगी सामग्री संपादन योग्य विशेषता "सत्य" पर सेट करें।

टेक्स्टरेरा टैग का उपयोग करना:

 क्लाइंटआईड = {प्रोसेस.एनवी। REACT_APP_GRAMMARLY_CLIENT_ID}
 विन्यास = {{ सक्रियण: "तुरंत" }}
>
<पाठ क्षेत्रप्लेसहोल्डर=" अपने विचारों को साझा करें!!" />
व्याकरण संपादकप्लगइन>

अपने ब्राउज़र पर परिणाम देखने के लिए अपने टर्मिनल पर यह कमांड चलाएँ:

NPM शुरू

फिर आपको अपना व्याकरण-सक्षम पाठ क्षेत्र देखना चाहिए:

TinyMCE जैसे रिच टेक्स्ट एडिटर के साथ इंटीग्रेट करें

आप GrammarlyEditorPlugin के साथ एक संपूर्ण टेक्स्ट एडिटर भी रैप कर सकते हैं। व्याकरण पाठ संपादक एसडीके कई समृद्ध पाठ संपादकों के साथ संगत है जैसे:

• TinyMCE
• स्लेट
• सीकेएडिटर
• मोड़ना

TinyMCE बहुत सारे फ़ॉर्मेटिंग और संपादन टूल के साथ उपयोग में आसान टेक्स्ट एडिटर है जो उपयोगकर्ताओं को उपयोगकर्ता के अनुकूल इंटरफ़ेस के भीतर सामग्री लिखने और संपादित करने में सक्षम बनाता है।

TinyMCE के संपादक को एक रिएक्ट एप्लिकेशन में व्याकरणिक लेखन सहायक सक्षम के साथ एकीकृत करने के लिए, पहले देखें TinyMCE और एक डेवलपर खाते के लिए साइन अप करें। अगला, ऑनबोर्डिंग डैशबोर्ड पर, अपने एप्लिकेशन के लिए एक डोमेन URL प्रदान करें और क्लिक करें अगला: अपने डैशबोर्ड पर जारी रखें सेटअप प्रक्रिया समाप्त करने के लिए बटन।

स्थानीय विकास के लिए, आपको डोमेन निर्दिष्ट करने की आवश्यकता नहीं है क्योंकि लोकलहोस्ट URL किसके द्वारा सेट किया गया है डिफ़ॉल्ट रूप से, हालाँकि, एक बार जब आप अपने रिएक्ट एप्लिकेशन को उत्पादन में भेज देते हैं, तो आपको लाइव प्रदान करने की आवश्यकता होती है डोमेन यूआरएल।

अंत में, अपने डेवलपर डैशबोर्ड से अपनी एपीआई कुंजी कॉपी करें और अपने कोड एडिटर पर अपने प्रोजेक्ट पर वापस जाएं और आपके द्वारा पहले बनाई गई ईएनवी फ़ाइल में एपीआई कुंजी जोड़ें:

REACT_APP_TINY_MCE_API_KEY="एपीआई कुंजी"

अब, अपनी TextEditor.js फ़ाइल पर जाएँ और निम्नलिखित परिवर्तन करें:

• निम्नलिखित आयात करें:

  आयात प्रतिक्रिया, {useRef} से'प्रतिक्रिया';
  आयात {संपादक} से'@tinymce/tinymce-react';
  

  useRef हुक जोड़ें और स्थापित पैकेज से TinyMCE संपादक घटक आयात करें।
• कार्यात्मक घटक में, नीचे दिए गए कोड को जोड़ें:

  कॉन्स्ट एडिटररेफ = यूजरेफ (व्यर्थ);

  useRef हुक आपको रेंडरर्स के बीच परिवर्तनशील मूल्यों को बनाए रखने की अनुमति देता है। आप संपादक पर टाइप किए गए डेटा की स्थिति को बनाए रखने के लिए EditorRef चर का उपयोग करेंगे।
• अंत में, TinyMCE लाइब्रेरी से संपादक घटक लौटाएँ:

   apiKey={प्रक्रिया.env. REACT_APP_TINY_MCE_API_KEY}
   onInit = {(ईवीटी, संपादक) => EditorRef.current = संपादक}
   प्रारंभिक मूल्य ="<पी>यह संपादक की प्रारंभिक सामग्री है।पी>"
   init={{
   ऊंचाई: 500,
   मेनू पट्टी: असत्य,
   प्लगइन्स: [
  'विज्ञापन सूची', 'ऑटोलिंक', 'सूचियाँ', 'जोड़ना', 'छवि', 'चार्मैप', 'पूर्व दर्शन',
  'लंगर डालना', 'खोज बदलें', 'विज़ुअलब्लॉक', 'कोड', 'पूर्ण स्क्रीन',
  'डालने का समय', 'मीडिया', 'मेज', 'कोड', 'मदद करना', 'शब्द गणना'
   ],
   टूलबार: 'पूर्ववत करें फिर से करें | ब्लॉक | ' +
  'बोल्ड इटैलिक फोरकलर | अलाइन लेफ्ट अलाइनसेंटर ' +
  'संरेखित करें संरेखित करें | बुलिस्ट न्यूमलिस्ट आउटडेंट इंडेंट | ' +
  'निकालें प्रारूप | मदद करना',
   सामग्री_शैली: 'बॉडी {फ़ॉन्ट-फ़ैमिली: हेल्वेटिका, एरियल, सैंस-सेरिफ़; फ़ॉन्ट-आकार: 14px}'
   }}
  />

• घटक संपादक गुणों यानी एपीआई कुंजी, प्रारंभिक मूल्य, संपादक की ऊंचाई के साथ एक वस्तु, प्लगइन्स को परिभाषित करता है और टूलबार गुण, और अंत में EditorRef.current विधि जो "editorRef" को "editor" पैरामीटर का मान निर्दिष्ट करती है चर।
• "संपादक" पैरामीटर एक ईवेंट ऑब्जेक्ट है जो "ऑनइनिट" ईवेंट को निकाल दिए जाने पर पारित किया जाता है।

पूरा कोड इस तरह दिखना चाहिए:

आयात प्रतिक्रिया, {useRef} से'प्रतिक्रिया';
आयात {व्याकरण संपादकप्लगइन} से'@grammarly/editor-sdk-react';
आयात {संपादक} से'@tinymce/tinymce-react';
समारोहपाठ संपादक() {
कॉन्स्ट एडिटररेफ = यूजरेफ (व्यर्थ);
वापस करना (
<डिवकक्षा का नाम="अनुप्रयोग">
<हैडरकक्षा का नाम="ऐप-हेडर">
 क्लाइंटआईड = {प्रोसेस.एनवी। REACT_APP_GRAMMARLY_CLIENT_ID}
 विन्यास = {
 { सक्रियण: "तुरंत" }}
 >
 apiKey={प्रक्रिया.env. REACT_APP_TINY_MCE_API_KEY}
 onInit = {(ईवीटी, संपादक) => EditorRef.current = संपादक}
 प्रारंभिक मूल्य ="<पी>यह संपादक की प्रारंभिक सामग्री है। पी>"
 init={{
 ऊंचाई: 500,
 मेनू पट्टी: असत्य,
 प्लगइन्स: [
'विज्ञापन सूची', 'ऑटोलिंक', 'सूचियाँ', 'जोड़ना', 'छवि', 'चार्मैप', 'पूर्व दर्शन',
'लंगर डालना', 'खोज बदलें', 'विज़ुअलब्लॉक', 'कोड', 'पूर्ण स्क्रीन',
'डालने का समय', 'मीडिया', 'मेज', 'कोड', 'मदद करना', 'शब्द गणना'
 ],
 टूलबार: 'पूर्ववत करें फिर से करें | ब्लॉक | ' +
'बोल्ड इटैलिक फोरकलर | अलाइन लेफ्ट अलाइनसेंटर ' +
'संरेखित करें संरेखित करें | बुलिस्ट न्यूमलिस्ट आउटडेंट इंडेंट | ' +
'निकालें प्रारूप | मदद करना',
 सामग्री_शैली: 'बॉडी {फ़ॉन्ट-फ़ैमिली: हेल्वेटिका, एरियल, सैंस-सेरिफ़; फ़ॉन्ट-आकार: 14px}'
 }}
 />
व्याकरण संपादकप्लगइन>
हैडर>
डिव>
 );
}
निर्यातगलती करना पाठ संपादक;

इस कोड में, आप TinyMCE टेक्स्ट एडिटर पर ग्रामरली सहायता सुविधा को एकीकृत करने के लिए TinyMCE संपादक घटक को GrammarlyEditorPlugin के साथ लपेटते हैं। अंत में, परिवर्तनों को सहेजने और नेविगेट करने के लिए विकास सर्वर को स्पिन करें http://localhost: परिणाम देखने के लिए आपके ब्राउज़र में 3000।

उपयोगकर्ता उत्पादकता में सुधार के लिए व्याकरण का प्रयोग करें

ग्रामरली का एसडीके एक शक्तिशाली उपकरण प्रदान करता है जो रिएक्ट टेक्स्ट एडिटर में आपकी सामग्री की गुणवत्ता और सटीकता को बेहतर बनाने में मदद कर सकता है।

मौजूदा परियोजनाओं के साथ एकीकृत करना आसान है और व्यापक व्याकरण और वर्तनी जांच क्षमताएं प्रदान करता है जो उपयोगकर्ता के लेखन अनुभव को बेहतर बना सकता है।