Có nhiều trình soạn thảo văn bản có thể tích hợp trong dự án React, nổi bật nhất là Ckeditor 5. Chúng ta cùng tìm hiểu cách tích hợp như thế nào và cấu hình để có thể upload ảnh trong Ckeditor đến server riêng của bạn

Đầu tiên, cài đặt 2 package sau

npm i @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

Nhúng Ckeditor vào

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';


<CKEditor
 editor={ClassicEditor}
 data=""
 onReady={editor => {
 MyCustomUploadAdapterPlugin(editor);

 }}
 onChange={(event, editor) => {
 const data = editor.getData();
 console.log({ event, editor, data });
 }}
 onBlur={(event, editor) => {
 console.log('Blur.', editor);
 }}
 onFocus={(event, editor) => {
 console.log('Focus.', editor);
 }}
 />

Tạo hàm MyCustomUploadAdapterPlugin để upload ảnh đến server riêng của ta khi người dùng chọn ảnh .

function MyCustomUploadAdapterPlugin(editor) {
 editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
 const { upload, abort } = useMyUploadAdapter(loader);
 return {
 upload,
 abort
 };
 };
}

Hàm useMyUploadAdapter xử lý chính

const useMyUploadAdapter = (loader) => {
 const upload = () => {
 return new Promise((resolve, reject) => {
 loader.file.then(async (file) => {
 try {
 const formData = new FormData();
 formData.append('files', file)

 let uploadRes = await uploadImage(
 formData,
 { "Content-Type": "multipart/form-data" }
 );

 resolve({
 default: `${process.env.HOST_API}${uploadRes[0].url}`,
 });
 } catch (error) {
 reject(error);


 }
 });
 });
 };


 const abort = () => {
 // if (xhr) {
 // xhr.abort(); // Hủy request upload nếu cần
 // }
 };


 return { upload, abort };
};

Trong đó:

• uploadImage là hàm gọi upload ảnh riêng của bạn
• `${process.env.HOST_API}${uploadRes[0].url}` là đường dẫn ảnh trả về khi upload thành công