Δυσκολεύεστε να παραδώσετε έγκαιρα εργασία χωρίς να κάνετε τυπογραφικά και γραμματικά λάθη; Μπορεί να είναι αγχωτικό ειδικά όταν θέλετε να βεβαιωθείτε ότι όλα είναι τέλεια—η χρήση του Grammarly μπορεί να βελτιώσει την παραγωγικότητά σας και την εμπειρία γραφής.
Το Grammarly είναι ένα πρόγραμμα ελέγχου γραμματικής και διορθωτή που βασίζεται σε σύννεφο. Εντοπίζει και διορθώνει γραμματικά, ορθογραφικά, σημεία στίξης και άλλα λάθη γραφής. Προσφέρει επίσης προτάσεις βελτίωσης λεξιλογίου που σας βοηθούν να βελτιώσετε την ποιότητα της γραφής σας.
Ακολουθήστε για να μάθετε πώς να ενσωματώνετε το Grammarly σε ένα πρόγραμμα επεξεργασίας κειμένου που έχει δημιουργηθεί με το React.
Τι είναι το Grammarly για προγραμματιστές;
Το Grammarly είναι ευρέως αναγνωρισμένο για την επέκταση του προγράμματος περιήγησης που μπορείτε να χρησιμοποιήσετε για να διορθώσετε γραμματικά λάθη στο πρόγραμμα επεξεργασίας κειμένου ενός ιστότοπου. Το Grammarly for Developers είναι μια δυνατότητα στο Grammarly που σας βοηθά να ενσωματώσετε τα εργαλεία αυτόματης διόρθωσης και ανίχνευσης λογοκλοπής της Grammarly στις εφαρμογές ιστού σας.
Τώρα μπορείτε να χρησιμοποιήσετε το Grammarly για να δημιουργήσετε μια ενσωματωμένη δυνατότητα επεξεργασίας κειμένου σε πραγματικό χρόνο στην εφαρμογή web σας χρησιμοποιώντας το κιτ ανάπτυξης λογισμικού (SDK) της Grammarly. Αυτό δίνει στους χρήστες σας πρόσβαση σε όλες τις λειτουργίες Grammarly χωρίς να χρειάζεται να κατεβάσουν την επέκταση του προγράμματος περιήγησης.
Δημιουργήστε μια νέα εφαρμογή στο Grammarly Developer Console
Ρυθμίστε μια νέα εφαρμογή στην κονσόλα προγραμματιστή του Grammarly ακολουθώντας τα εξής βήματα:
- Κατευθυνθείτε προς το Grammarly for Developers κονσόλα και εγγραφείτε για λογαριασμό. Εάν έχετε ήδη λογαριασμό Grammarly, μπορείτε να τον χρησιμοποιήσετε για να συνδεθείτε στην κονσόλα.
- Αφού συνδεθείτε, στον πίνακα ελέγχου της κονσόλας, κάντε κλικ στο Νέα εφαρμογή κουμπί για να δημιουργήσετε μια νέα εφαρμογή. Συμπληρώστε το όνομα της εφαρμογής σας και πατήστε Δημιουργώ για να τελειώσει η διαδικασία.
- Στη συνέχεια, στο αριστερό παράθυρο του πίνακα ελέγχου της εφαρμογής σας, επιλέξτε το Ιστός καρτέλα για να προβάλετε τα διαπιστευτήρια της εφαρμογής σας στη σελίδα ρυθμίσεων προγράμματος-πελάτη ιστού.
- Αντιγράψτε το αναγνωριστικό πελάτη που παρέχεται. Στην ίδια σελίδα, παρατηρήστε τον γρήγορο οδηγό σχετικά με τον τρόπο ενσωμάτωσης του Grammarly SDK σε ένα πρόγραμμα-πελάτη ιστού. Το SDK είναι συμβατό με προγράμματα-πελάτες React, Vue.js και απλής JavaScript. Μπορείτε επίσης να ενσωματώσετε το SDK σε HTML προσθέτοντας το SDK ως ετικέτα σεναρίου.
Το Grammarly Text Editor SDK υποστηρίζει τις πιο πρόσφατες εκδόσεις δημοφιλών προγραμμάτων περιήγησης για επιτραπέζιους υπολογιστές: Chrome, Firefox, Safari, Edge, Opera και Brave. Προς το παρόν δεν υπάρχει υποστήριξη για προγράμματα περιήγησης για κινητά.
Ενσωματώστε το SDK της Grammarly σε έναν επεξεργαστή κειμένου React
Πρώτα, δημιουργήστε μια εφαρμογή React. Στη συνέχεια, στον ριζικό κατάλογο του φακέλου του έργου σας, δημιουργήστε ένα αρχείο ENV για να κρατήσετε τη μεταβλητή περιβάλλοντος: το ClientID σας. Μεταβείτε στη σελίδα ρυθμίσεων ιστού της εφαρμογής σας στην Κονσόλα προγραμματιστή του Grammarly και αντιγράψτε το αναγνωριστικό πελάτη σας.
REACT_APP_GRAMMARLY_CLIENT_ID= Αναγνωριστικό πελάτη1. Εγκαταστήστε τα απαιτούμενα πακέτα
Εκτελέστε αυτήν την εντολή στο τερματικό σας για να εγκαταστήσετε το Grammarly React Text Editor SDK στην εφαρμογή σας:
npm εγκατάσταση @γραμματικά/editor-sdk-react2. Δημιουργήστε ένα πρόγραμμα επεξεργασίας κειμένου
Αφού εγκαταστήσετε το SDK του προγράμματος επεξεργασίας κειμένου Grammarly React, δημιουργήστε έναν νέο φάκελο στον κατάλογο /src της εφαρμογής React και ονομάστε τα στοιχεία. Μέσα σε αυτόν τον φάκελο, δημιουργήστε ένα νέο αρχείο: TextEditor.js.
Στο αρχείο TextEditor.js, προσθέστε τον παρακάτω κώδικα:
εισαγωγή Αντιδρώ από'αντιδρώ'
εισαγωγή { GrammarlyEditorPlugin } από'@grammarly/editor-sdk-react'λειτουργίαΕπεξεργαστής κειμένου() {
ΕΠΙΣΤΡΟΦΗ (
<divόνομα τάξης="Εφαρμογή">
<επί κεφαλήςόνομα τάξης="Επικεφαλίδα εφαρμογής">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ δραστηριοποίηση: "άμεσος" }}
>
<εισαγωγήκράτησης θέσης="Μοιράσου τις σκέψεις σου!!" />
GrammarlyEditorPlugin>
επί κεφαλής>
div>
);
}
εξαγωγήΠροκαθορισμένο Επεξεργαστής κειμένου;
Στον παραπάνω κώδικα, εισάγετε το GrammarlyEditorPlugin από το Grammarly-React SDK και τυλίγετε μια ετικέτα εισόδου με το GrammarlyEditorPlugin.
Το GrammarlyEditorPlugin έχει δύο ιδιότητες: clientID και μια ιδιότητα config που ορίζει την ενεργοποίηση σε άμεση. Αυτή η ιδιότητα ενεργοποιεί το πρόσθετο και το καθιστά διαθέσιμο στον χρήστη μόλις φορτώσει η σελίδα.
Εάν έχετε την επέκταση προγράμματος περιήγησης Grammarly, πρέπει να την απενεργοποιήσετε ή να την απεγκαταστήσετε για αυτό φροντιστήριο, καθώς το πρόσθετο στο έργο σας θα εμφανίσει ένα σφάλμα μόλις εντοπίσει την επέκταση στο δικό σας πρόγραμμα περιήγησης.
Το πρόσθετο επεξεργασίας του Grammarly έχει άλλες πρόσθετες ιδιότητες διαμόρφωσης που μπορείτε να χρησιμοποιήσετε για να προσαρμόσετε τον επεξεργαστή σας. Περιλαμβάνουν:
- Αυτόματη συμπλήρωση: Αυτή η ιδιότητα συμπληρώνει φράσεις για τους χρήστες σας καθώς πληκτρολογούν.
- ToneDetector: Εμφανίζει τη διεπαφή του ανιχνευτή τόνου.
3. Απόδοση του στοιχείου επεξεργασίας κειμένου
Προσθέστε τον παρακάτω κώδικα στο αρχείο app.js για να αποδώσετε το στοιχείο του προγράμματος επεξεργασίας κειμένου:
εισαγωγή Επεξεργαστής κειμένου από'./components/TextEditor';λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
<divόνομα τάξης="Εφαρμογή">
<επί κεφαλήςόνομα τάξης="Επικεφαλίδα εφαρμογής">
<Επεξεργαστής κειμένου />
επί κεφαλής>
div>
);
}
εξαγωγήΠροκαθορισμένο Εφαρμογή?
Τώρα, εκτελέστε αυτήν την εντολή στο τερματικό σας για να περιστρέψετε τον διακομιστή ανάπτυξης και να δείτε τα αποτελέσματα στο πρόγραμμα περιήγησής σας:
npm αρχήΟ επεξεργαστής σας με δυνατότητα γραμματικής θα πρέπει να μοιάζει κάπως έτσι:
Σημειώστε ότι έχετε τυλίξει μια ετικέτα εισαγωγής με το GrammarlyEditorPlugin. Μπορείτε επίσης να τυλίξετε ένα στοιχείο textarea ή οποιοδήποτε στοιχείο με το χρήσιμο χαρακτηριστικό contenteditable οριστεί σε "αληθές".
Χρησιμοποιώντας μια ετικέτα textarea:
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ δραστηριοποίηση: "άμεσος" }}
>
<textareaκράτησης θέσης=" Μοιράσου τις σκέψεις σου!!" />
GrammarlyEditorPlugin>Εκτελέστε αυτήν την εντολή στο τερματικό σας για να δείτε τα αποτελέσματα στο πρόγραμμα περιήγησής σας:
npm αρχήΣτη συνέχεια, θα πρέπει να δείτε την περιοχή κειμένου με δυνατότητα γραμματικής:
Ενσωμάτωση με ένα πρόγραμμα επεξεργασίας εμπλουτισμένου κειμένου όπως το TinyMCE
Μπορείτε επίσης να τυλίξετε ένα πλήρες πρόγραμμα επεξεργασίας κειμένου με το GrammarlyEditorPlugin. Το Grammarly Text Editor SDK είναι συμβατό με πολλούς επεξεργαστές εμπλουτισμένου κειμένου όπως:
- TinyMCE
- Σχιστόλιθος
- Συντάκτης CKE
- Πέννα
Το TinyMCE είναι ένα εύχρηστο πρόγραμμα επεξεργασίας κειμένου με πολλά εργαλεία μορφοποίησης και επεξεργασίας που επιτρέπουν στους χρήστες να γράφουν και να επεξεργάζονται περιεχόμενο μέσα σε μια φιλική προς το χρήστη διεπαφή.
Για να ενσωματώσετε το πρόγραμμα επεξεργασίας του TinyMCE σε μια εφαρμογή React με ενεργοποιημένο τον βοηθό γραφής Grammarly, επισκεφθείτε πρώτα TinyMCE και εγγραφείτε για λογαριασμό προγραμματιστή. Στη συνέχεια, στον πίνακα ελέγχου Ενσωμάτωσης, καταχωρίστε μια διεύθυνση URL τομέα για την αίτησή σας και κάντε κλικ στο Επόμενο: Συνεχίστε στον πίνακα ελέγχου σας κουμπί για να ολοκληρώσετε τη διαδικασία εγκατάστασης.
Για τοπική ανάπτυξη, δεν χρειάζεται να καθορίσετε τον τομέα, καθώς η διεύθυνση URL του localhost έχει οριστεί από από προεπιλογή, ωστόσο, μόλις στείλετε την εφαρμογή React στην παραγωγή, πρέπει να παρέχετε το live διεύθυνση URL τομέα.
Τέλος, αντιγράψτε το κλειδί API από τον πίνακα ελέγχου προγραμματιστή και επιστρέψτε στο έργο σας στον επεξεργαστή κώδικα και προσθέστε το κλειδί API στο αρχείο ENV που δημιουργήσατε νωρίτερα:
REACT_APP_TINY_MCE_API_KEY="Κλειδί API"Τώρα, μεταβείτε στο αρχείο TextEditor.js και κάντε τις ακόλουθες αλλαγές:
- Κάντε τις ακόλουθες εισαγωγές:
Προσθέστε το άγκιστρο useRef και εισαγάγετε το στοιχείο TinyMCE Editor από το εγκατεστημένο πακέτο.εισαγωγή React, { useRef } από'αντιδρώ';
εισαγωγή { Συντάκτης } από'@tinymce/tinymce-react'; - Στο λειτουργικό στοιχείο, προσθέστε τον παρακάτω κώδικα:
Το άγκιστρο useRef σάς επιτρέπει να διατηρείτε μεταβλητές τιμές μεταξύ των αποδόσεων. Θα χρησιμοποιήσετε τη μεταβλητή editorRef για να διατηρήσετε την κατάσταση των δεδομένων που πληκτρολογούνται στον επεξεργαστή.συνθ editorRef = useRef(μηδενικό); - Τέλος, επιστρέψτε το στοιχείο επεξεργασίας από τη βιβλιοθήκη TinyMCE:
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, editor) => editorRef.current = editor}
αρχικήΤιμή="<Π>Αυτό είναι το αρχικό περιεχόμενο του συντάκτη.Π>"
init={{
ύψος: 500,
γραμμή μενού: ψευδής,
πρόσθετα: [
"advlist", "αυτόματος σύνδεσμος", 'κονίστρα', 'Σύνδεσμος', 'εικόνα', 'γοητευτικός', 'προεπισκόπηση',
'άγκυρα', 'αντικατάσταση αναζήτησης', "οπτικά μπλοκ", 'κώδικας', 'ΠΛΗΡΗΣ ΟΘΟΝΗ',
"insertdatetime", 'μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ', 'τραπέζι', 'κώδικας', 'βοήθεια', 'καταμέτρηση λέξεων'
],
γραμμή εργαλείων: «αναίρεση επανάληψης | μπλοκ | ' +
«τολμηρός πλάγιος πρόδρομος | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist εσοχή εξόδου | ' +
«αφαίρεση μορφής | βοήθεια',
content_style: 'body { font-family: Helvetica, Arial, sans-serif; μέγεθος γραμματοσειράς: 14 px }'
}}
/> - Το στοιχείο ορίζει τις ιδιότητες του επεξεργαστή, δηλαδή το κλειδί API, την αρχική τιμή, ένα αντικείμενο με το ύψος του επεξεργαστή, τα πρόσθετα και ιδιότητες της γραμμής εργαλείων, και τέλος τη μέθοδο editorRef.current που εκχωρεί την τιμή της παραμέτρου "editor" στο "editorRef" μεταβλητός.
- Η παράμετρος "editor" είναι ένα αντικείμενο συμβάντος που μεταβιβάζεται κατά την ενεργοποίηση του συμβάντος "onInit".
Ο πλήρης κώδικας θα πρέπει να μοιάζει με αυτό:
εισαγωγή React, { useRef } από'αντιδρώ';
εισαγωγή { GrammarlyEditorPlugin } από'@grammarly/editor-sdk-react';
εισαγωγή { Συντάκτης } από'@tinymce/tinymce-react';
λειτουργίαΕπεξεργαστής κειμένου() {
συνθ editorRef = useRef(μηδενικό);
ΕΠΙΣΤΡΟΦΗ (
<divόνομα τάξης="Εφαρμογή">
<επί κεφαλήςόνομα τάξης="Επικεφαλίδα εφαρμογής">
clientId={process.env. REACT_APP_GRAMMARLY_CLIENT_ID}
config={
{ δραστηριοποίηση: "άμεσος" }}
>
apiKey={process.env. REACT_APP_TINY_MCE_API_KEY}
onInit={(evt, editor) => editorRef.current = editor}
αρχικήΤιμή="<Π>Αυτό είναι το αρχικό περιεχόμενο του συντάκτη. Π>"
init={{
ύψος: 500,
γραμμή μενού: ψευδής,
πρόσθετα: [
"advlist", "αυτόματος σύνδεσμος", 'κονίστρα', 'Σύνδεσμος', 'εικόνα', 'γοητευτικός', 'προεπισκόπηση',
'άγκυρα', 'αντικατάσταση αναζήτησης', "οπτικά μπλοκ", 'κώδικας', 'ΠΛΗΡΗΣ ΟΘΟΝΗ',
"insertdatetime", 'μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ', 'τραπέζι', 'κώδικας', 'βοήθεια', 'καταμέτρηση λέξεων'
],
γραμμή εργαλείων: «αναίρεση επανάληψης | μπλοκ | ' +
«τολμηρός πλάγιος πρόδρομος | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist εσοχή εξόδου | ' +
«αφαίρεση μορφής | βοήθεια',
content_style: 'body { font-family: Helvetica, Arial, sans-serif; μέγεθος γραμματοσειράς: 14 px }'
}}
/>
GrammarlyEditorPlugin>
επί κεφαλής>
div>
);
}
εξαγωγήΠροκαθορισμένο Επεξεργαστής κειμένου;
Σε αυτόν τον κώδικα, τυλίγετε το στοιχείο επεξεργασίας TinyMCE με το GrammarlyEditorPlugin για να ενσωματώσετε τη δυνατότητα βοήθειας Grammarly στο πρόγραμμα επεξεργασίας κειμένου TinyMCE. Τέλος, περιστρέψτε τον διακομιστή ανάπτυξης για να αποθηκεύσετε τις αλλαγές και να πλοηγηθείτε http://localhost: 3000 στο πρόγραμμα περιήγησής σας για να δείτε τα αποτελέσματα.
Χρησιμοποιήστε το Grammarly για να βελτιώσετε την παραγωγικότητα των χρηστών
Το SDK της Grammarly παρέχει ένα ισχυρό εργαλείο που μπορεί να βοηθήσει στη βελτίωση της ποιότητας και της ακρίβειας του περιεχομένου σας σε ένα πρόγραμμα επεξεργασίας κειμένου React.
Είναι εύκολο να ενσωματωθεί με υπάρχοντα έργα και παρέχει ολοκληρωμένες δυνατότητες γραμματικής και ορθογραφικού ελέγχου που μπορούν να βελτιώσουν την εμπειρία γραφής του χρήστη.
