@shisuipham/editor-react

editor-react

A powerful React rich text editor based on SunEditor, hỗ trợ upload ảnh/video custom, đổi font, responsive toolbar, và nhiều tính năng mở rộng.

Cài đặt

npm i @shisuipham/editor-react

pnpm i @shisuipham/editor-react

Peer dependencies:

• react >= 18
• react-dom >= 18

Import font (nếu dùng Google Fonts)

Font mặc định đã được import sẵn trong file CSS, nhưng bạn có thể thêm vào public/index.html hoặc file CSS chính nếu cần:

<link href="https://fonts.googleapis.com/css?family=Manrope:300,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,700&display=swap" rel="stylesheet">

Sử dụng cơ bản

import { Editor } from 'editor-react';

function App() {
  return (
    <Editor
      value="<p>Hello SunEditor!</p>"
      onChange={val => console.log(val)}
      placeholder="Nhập nội dung..."
      imageConfig={{
        baseUrl: 'https://your-server.com/api/upload-image',
        prefixUrl: 'https://cdn.your-server.com/images/'
      }}
      videoConfig={{
        baseUrl: 'https://your-server.com/api/upload-video',
        prefixUrl: 'https://cdn.your-server.com/videos/'
      }}
      readOnly={false}
    />
  );
}

API

<Editor /> Props

Prop	Kiểu dữ liệu	Mô tả
value	string	Nội dung HTML
onChange	function	Hàm callback khi nội dung thay đổi
placeholder	string	Placeholder cho editor
readOnly	boolean	Chế độ chỉ đọc
imageConfig	object	Config upload ảnh (xem bên dưới)
videoConfig	object	Config upload video (xem bên dưới)
...props	SunEditorReactProps	Các props khác của SunEditor

imageConfig / videoConfig

{
  baseUrl: string; // Endpoint upload file
  prefixUrl?: string; // Prefix cho url trả về (nếu cần)
  notification?: (message: string) => void; // Hàm callback khi upload thành công/thất bại
  files?: File[]; // (ít dùng) override file upload
}

Custom upload handler

Bạn có thể tuỳ chỉnh upload ảnh/video qua các plugin:

Upload ảnh

import { uploadHandler } from 'editor-react';

uploadHandler({
  files, // File[] từ SunEditor
  upload, // Hàm callback của SunEditor
  baseUrl: 'https://your-server.com/api/upload-image',
  prefixUrl: 'https://cdn.your-server.com/images/',
  notification: (msg) => alert(msg),
});

Upload video

import { uploadVideoHandler } from 'editor-react';

uploadVideoHandler({
  files, // File[] từ SunEditor
  upload, // Hàm callback của SunEditor
  baseUrl: 'https://your-server.com/api/upload-video',
  prefixUrl: 'https://cdn.your-server.com/videos/',
  notification: (msg) => alert(msg),
});

Đổi font chữ

• Đã cấu hình sẵn các font phổ biến (Manrope, Roboto, Montserrat, v.v.).
• Để font hiển thị đúng, cần import font vào dự án như hướng dẫn trên.
• Có thể custom thêm font trong setOptions.font.

Responsive toolbar

Toolbar sẽ tự động thay đổi theo kích thước màn hình.

Hiển thị loading khi upload

Bạn có thể tự thêm overlay loading bằng React state.
Ví dụ:

const [loading, setLoading] = useState(false);

<Editor
  // ...
  onImageUploadBefore={async (files, _, upload) => {
    setLoading(true);
    await uploadHandler({ ...imageConfig, files, upload });
    setLoading(false);
    return true;
  }}
  // ...
/>
{loading && <div className="editor-loading-overlay">Đang upload...</div>}

CSS:

.editor-loading-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

Các tính năng nổi bật

• Upload ảnh/video: Tích hợp sẵn custom handler, dễ dàng mở rộng.
• Đổi font, màu sắc, định dạng: Đầy đủ các tính năng soạn thảo hiện đại.
• Responsive: Toolbar tự động co giãn theo màn hình.
• Dễ mở rộng: Có thể truyền thêm props của SunEditor gốc.

License

MIT

---

Nếu bạn cần thêm ví dụ hoặc hướng dẫn chi tiết hơn, hãy xem trong source code hoặc liên hệ tác giả.