Cách tích hợp Trình soạn thảo văn bản của Grammarly vào ứng dụng React
Bạn có cảm thấy khó khăn để hoàn thành công việc kịp thời mà không mắc lỗi chính tả và lỗi ngữ pháp không? Điều này có thể gây căng thẳng, đặc biệt là khi bạn muốn đảm bảo mọi thứ đều hoàn hảo—việc sử dụng Grammarly có thể cải thiện năng suất và trải nghiệm viết của bạn.
Grammarly là một trình kiểm tra ngữ pháp và hiệu đính dựa trên đám mây. Nó phát hiện và sửa lỗi ngữ pháp, chính tả, chấm câu và các lỗi viết khác. Nó cũng cung cấp các gợi ý nâng cao vốn từ vựng giúp bạn cải thiện chất lượng bài viết của mình.
Theo dõi để tìm hiểu cách tích hợp Grammarly vào trình soạn thảo văn bản được xây dựng bằng React.
Mục Lục
Grammarly dành cho nhà phát triển là gì?
Grammarly được công nhận rộng rãi nhờ tiện ích mở rộng trình duyệt mà bạn có thể sử dụng để sửa lỗi ngữ pháp trong trình soạn thảo văn bản của trang web. Grammarly dành cho nhà phát triển là một tính năng trên Grammarly giúp bạn tích hợp các công cụ phát hiện đạo văn và hiệu đính tự động của Grammarly vào các ứng dụng web của mình.
Giờ đây, bạn có thể sử dụng Grammarly để tạo tính năng chỉnh sửa văn bản theo thời gian thực tích hợp sẵn trong ứng dụng web của mình bằng cách sử dụng Bộ công cụ phát triển phần mềm (SDK) của Grammarly. Điều này cho phép người dùng của bạn truy cập vào tất cả các tính năng của Grammarly mà không cần tải xuống tiện ích mở rộng của trình duyệt.
Tạo một ứng dụng mới trên Bảng điều khiển dành cho nhà phát triển Grammarly
Thiết lập ứng dụng mới trên bảng điều khiển dành cho nhà phát triển của Grammarly bằng cách thực hiện theo các bước sau:
- Truy cập bảng điều khiển Grammarly for Developers và đăng ký tài khoản. Nếu đã có tài khoản Grammarly, bạn có thể sử dụng tài khoản đó để đăng nhập vào bảng điều khiển.
- Sau khi đăng nhập, trên bảng điều khiển của bảng điều khiển, nhấp vào ứng dụng mới để tạo một ứng dụng mới. Điền tên ứng dụng của bạn và nhấn Tạo nên để kết thúc quá trình.
- Tiếp theo, trên ngăn bên trái của bảng điều khiển ứng dụng của bạn, hãy chọn mạng tab để xem thông tin đăng nhập ứng dụng của bạn trên trang cài đặt máy khách web.
- Sao chép ID khách hàng được cung cấp. Trên cùng một trang, hãy lưu ý hướng dẫn nhanh về cách tích hợp Grammarly SDK trên máy khách web.
SDK tương thích với các ứng dụng khách React, Vue.js và JavaScript đơn giản. Bạn cũng có thể tích hợp SDK vào HTML bằng cách thêm SDK dưới dạng thẻ tập lệnh.
SDK Grammarly Text Editor hỗ trợ các phiên bản mới nhất của các trình duyệt máy tính để bàn phổ biến: Chrome, Firefox, Safari, Edge, Opera và Brave. Hiện tại không có hỗ trợ cho trình duyệt di động.
Tích hợp SDK của Grammarly trong Trình soạn thảo văn bản React
Đầu tiên, tạo một ứng dụng React. Tiếp theo, trong thư mục gốc của thư mục dự án của bạn, hãy tạo một tệp ENV để giữ biến môi trường của bạn: ClientID của bạn. Truy cập trang cài đặt web của ứng dụng trên Bảng điều khiển dành cho nhà phát triển của Grammarly và sao chép ClientID của bạn.
REACT_APP_GRAMMARLY_CLIENT_ID= ClientID
1. Cài đặt các gói cần thiết
Chạy lệnh này trên thiết bị đầu cuối của bạn để cài đặt SDK Trình soạn thảo văn bản phản ứng ngữ pháp trong ứng dụng của bạn:
npm install @grammarly/editor-sdk-react
2. Tạo Trình soạn thảo văn bản
Sau khi cài đặt SDK soạn thảo văn bản Grammarly React, hãy tạo một thư mục mới trong thư mục /src của ứng dụng React của bạn và đặt tên cho nó là components. Trong thư mục này, tạo một tệp mới: TextEditor.js.
Trong tệp TextEditor.js, hãy thêm mã bên dưới:
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;
Trong đoạn mã trên, bạn nhập GrammarlyEditorPlugin từ Grammarly-React SDK và bọc một thẻ đầu vào bằng GrammarlyEditorPlugin.
GrammarlyEditorPlugin có hai thuộc tính: clientID và thuộc tính cấu hình đặt kích hoạt thành ngay lập tức. Thuộc tính này kích hoạt plugin và cung cấp plugin cho người dùng ngay khi tải trang.
Nếu bạn có tiện ích mở rộng trình duyệt Grammarly, bạn cần tắt nó hoặc gỡ cài đặt nó cho hướng dẫn này vì plugin trong dự án của bạn sẽ báo lỗi khi phát hiện thấy tiện ích mở rộng trên trình duyệt của bạn.
Plugin trình soạn thảo của Grammarly có các thuộc tính cấu hình bổ sung khác mà bạn có thể sử dụng để tùy chỉnh trình soạn thảo của mình. Chúng bao gồm:
- Tự động điền: Thuộc tính này hoàn thành các cụm từ cho người dùng của bạn khi họ nhập.
- ToneDetector: Phần này hiển thị giao diện bộ dò âm thanh.
3. Kết xuất Thành phần Trình soạn thảo văn bản
Thêm mã bên dưới vào tệp app.js của bạn để hiển thị thành phần trình soạn thảo văn bản của bạn:
import TextEditor from './components/TextEditor';function App() {
return (
<div className="App">
<header className="App-header">
<TextEditor />
</header>
</div>
);
}
export default App;
Bây giờ, hãy chạy lệnh này trên thiết bị đầu cuối của bạn để khởi động máy chủ phát triển và xem kết quả trên trình duyệt của bạn:
npm start
Trình chỉnh sửa hỗ trợ ngữ pháp của bạn sẽ giống như thế này:
Lưu ý, bạn đã gói một thẻ đầu vào bằng GrammarlyEditorPlugin. Bạn cũng có thể bọc phần tử vùng văn bản hoặc bất kỳ phần tử nào có thuộc tính có thể chỉnh sửa nội dung hữu ích được đặt thành “true”.
Sử dụng thẻ textarea:
<GrammarlyEditorPlugin
clientId={process.env.REACT_APP_GRAMMARLY_CLIENT_ID}
config={{ activation: "immediate" }}
>
<textarea placeholder=" Share your thoughts!!" />
</GrammarlyEditorPlugin>
Chạy lệnh này trên thiết bị đầu cuối của bạn để xem kết quả trên trình duyệt của bạn:
npm start
Sau đó, bạn sẽ thấy vùng văn bản hỗ trợ Grammarly của mình:
Tích hợp với trình soạn thảo Rich Text như TinyMCE
Bạn cũng có thể bọc một trình soạn thảo văn bản chính thức bằng GrammarlyEditorPlugin. SDK Grammarly Text Editor tương thích với một số trình soạn thảo văn bản đa dạng thức như:
- TinyMCE
- đá phiến
- biên tập CK
- lông nhím
TinyMCE là một trình soạn thảo văn bản dễ sử dụng với nhiều công cụ chỉnh sửa và định dạng cho phép người dùng viết và chỉnh sửa nội dung trong một giao diện thân thiện với người dùng.
Để tích hợp trình chỉnh sửa của TinyMCE vào ứng dụng React có hỗ trợ viết Grammarly, trước tiên, hãy truy cập TinyMCE và đăng ký tài khoản nhà phát triển. Tiếp theo, trên bảng điều khiển Giới thiệu, hãy cung cấp URL miền cho ứng dụng của bạn và nhấp vào nút Tiếp theo: Tiếp tục đến trang tổng quan của bạn để kết thúc quá trình thiết lập.
Để phát triển cục bộ, bạn không cần chỉ định miền vì URL máy chủ cục bộ được đặt theo mặc định, tuy nhiên, sau khi chuyển ứng dụng React của mình sang sản xuất, bạn cần cung cấp URL miền trực tiếp.
Cuối cùng, sao chép khóa API của bạn từ bảng điều khiển dành cho nhà phát triển và quay lại dự án của bạn trên trình chỉnh sửa mã và thêm khóa API vào tệp ENV mà bạn đã tạo trước đó:
REACT_APP_TINY_MCE_API_KEY="API key"
Bây giờ, hãy truy cập tệp TextEditor.js của bạn và thực hiện các thay đổi sau:
- Thực hiện nhập khẩu sau:
import React, { useRef } from 'react';
import { Editor } from '@tinymce/tinymce-react';Thêm useRef hook và nhập thành phần TinyMCE Editor từ gói đã cài đặt.
- Trong thành phần chức năng, thêm mã dưới đây:
const editorRef = useRef(null);Móc useRef cho phép bạn duy trì các giá trị có thể thay đổi giữa các lần hiển thị. Bạn sẽ sử dụng biến editorRef để duy trì trạng thái của dữ liệu được gõ trên trình soạn thảo.
- Cuối cùng, trả lại thành phần trình chỉnh sửa từ thư viện TinyMCE:
<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 }'
}}
/> - Thành phần xác định các thuộc tính của trình chỉnh sửa, tức là khóa API, giá trị ban đầu, một đối tượng có chiều cao của trình chỉnh sửa, các plugin và thuộc tính thanh công cụ, và cuối cùng là phương thức editorRef.current gán giá trị của tham số “trình chỉnh sửa” cho ” biến editorRef”.
- Tham số “trình chỉnh sửa” là một đối tượng sự kiện được chuyển vào khi sự kiện “onInit” được kích hoạt.
Mã hoàn chỉnh sẽ trông như thế này:
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;
Trong đoạn mã này, bạn bọc thành phần soạn thảo TinyMCE bằng GrammarlyEditorPlugin để tích hợp tính năng hỗ trợ Ngữ pháp trên trình soạn thảo văn bản TinyMCE. Cuối cùng, khởi động máy chủ phát triển để lưu các thay đổi và điều hướng đến http://localhost:3000 trong trình duyệt của bạn để xem kết quả.
Sử dụng Grammarly để cải thiện năng suất của người dùng
SDK của Grammarly cung cấp một công cụ mạnh mẽ có thể giúp cải thiện chất lượng và độ chính xác của nội dung của bạn trong trình soạn thảo văn bản React.
Thật dễ dàng để tích hợp với các dự án hiện có và cung cấp khả năng kiểm tra chính tả và ngữ pháp toàn diện có thể cải thiện trải nghiệm viết của người dùng.