Rich Editor React

Một thành phần Rich Text Editor mạnh mẽ và dễ sử dụng cho React, hỗ trợ đầy đủ các tính năng chỉnh sửa văn bản phong phú.

✨ Tính năng

• 🎨 Định dạng văn bản đầy đủ: Bold, Italic, Underline, Strike, Color, Background
• 📝 Tiêu đề và danh sách: Heading levels, Bullet lists, Numbered lists
• 🔗 Liên kết và media: Links, Images, Videos, Tables
• 😊 Emoji picker: Tích hợp emoji picker
• 📊 Bảng: Tạo và chỉnh sửa bảng với đầy đủ tính năng
• 🎯 Tag system: Hệ thống tag tùy chỉnh
• 📱 Responsive: Tương thích với mọi kích thước màn hình
• 🌙 Theme support: Hỗ trợ light/dark theme
• ⚡ Performance: Tối ưu hiệu suất, không lag
• 🔧 Customizable: Có thể tùy chỉnh toolbar và tính năng

📦 Cài đặt

npm install richeditor-react
# hoặc
yarn add richeditor-react

🚀 Sử dụng cơ bản

Import styles và component

import React, { useState } from 'react';
import RichEditor from 'richeditor-react/react';
import 'richeditor-react/styles';

function MyApp() {
  const [content, setContent] = useState('<p>Nội dung khởi tạo</p>');

  const handleChange = (newContent) => {
    setContent(newContent);
  };

  return (
    <RichEditor
      value={content}
      onChange={handleChange}
      placeholder="Nhập nội dung của bạn..."
      height={400}
    />
  );
}

Sử dụng với useRef

import React, { useRef } from 'react';
import RichEditor from 'richeditor-react/react';

function MyApp() {
  const editorRef = useRef(null);

  const insertText = () => {
    editorRef.current?.insertText('Văn bản được chèn!');
  };

  const getContent = () => {
    const content = editorRef.current?.getContent();
    console.log(content);
  };

  return (
    <div>
      <button onClick={insertText}>Chèn văn bản</button>
      <button onClick={getContent}>Lấy nội dung</button>
      
      <RichEditor
        ref={editorRef}
        placeholder="Editor với ref..."
      />
    </div>
  );
}

Sử dụng Hook

import React from 'react';
import { useRichEditor } from 'richeditor-react/react';

function MyApp() {
  const {
    editorRef,
    content,
    setContent,
    handleChange,
    EditorComponent
  } = useRichEditor('Nội dung khởi tạo', {
    height: 300,
    toolbar: ['bold', 'italic', 'underline']
  });

  return (
    <div>
      <button onClick={() => setContent('Nội dung mới!')}>
        Đặt nội dung mới
      </button>
      
      <EditorComponent placeholder="Editor với hook..." />
      
      <div>Nội dung hiện tại: {content}</div>
    </div>
  );
}

⚙️ Props

| Prop | Type | Default | Mô tả | |------|------|---------|-------| | value | string | '' | Nội dung HTML của editor | | onChange | function | - | Callback khi nội dung thay đổi | | onFocus | function | - | Callback khi editor được focus | | onBlur | function | - | Callback khi editor mất focus | | placeholder | string | 'Type here...' | Placeholder text | | height | number | 400 | Chiều cao của editor (px) | | width | number | 800 | Chiều rộng của editor (px) | | maxWidth | number | 1200 | Chiều rộng tối đa (px) | | maxHeight | number | 800 | Chiều cao tối đa (px) | | theme | 'light' \| 'dark' | 'light' | Theme của editor | | disabled | boolean | false | Vô hiệu hóa editor | | readOnly | boolean | false | Chế độ chỉ đọc | | toolbar | array | ['bold', 'italic', 'underline', 'strike'] | Các nút toolbar | | features | object | {} | Cấu hình tính năng | | className | string | '' | CSS class tùy chỉnh | | style | object | {} | Inline styles |

🛠️ Toolbar Options

const toolbar = [
  // Text formatting
  'bold', 'italic', 'underline', 'strike',
  'subscript', 'superscript',
  
  // Colors
  'color', 'background',
  
  // Structure
  'heading', 'list', 'text-align',
  'indent-increase', 'indent-decrease',
  
  // Media
  'link', 'image', 'video', 'table',
  
  // Special
  'emoji', 'tag', 'import',
  
  // Tools
  'code-view', 'history'
];

🎛️ Features Configuration

const features = {
  emoji: true,        // Emoji picker
  image: true,        // Image upload/insert
  table: true,        // Table functionality
  wordCount: true,    // Word count display
  breadcrumb: true    // Navigation breadcrumb
};

📚 API Methods

Khi sử dụng ref, bạn có thể truy cập các method sau:

// Nội dung
editorRef.current.getContent()           // Lấy nội dung HTML
editorRef.current.setContent(html)       // Đặt nội dung HTML
editorRef.current.clear()                // Xóa tất cả nội dung
editorRef.current.getLength()            // Lấy độ dài văn bản

// Focus
editorRef.current.focus()                // Focus vào editor
editorRef.current.blur()                 // Blur khỏi editor

// Enable/Disable
editorRef.current.enable()               // Kích hoạt editor
editorRef.current.disable()              // Vô hiệu hóa editor

// Selection
editorRef.current.getSelection()         // Lấy vùng chọn hiện tại
editorRef.current.setSelection(range)    // Đặt vùng chọn

// Text manipulation
editorRef.current.insertText(text, index)           // Chèn text
editorRef.current.deleteText(index, length)         // Xóa text
editorRef.current.insertEmbed(index, type, value)   // Chèn embed
editorRef.current.format(format, value)             // Định dạng text

🎨 Custom Styling

/* Tùy chỉnh container */
.richeditor-react {
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* Tùy chỉnh toolbar */
.richeditor-react .toolbar {
  background: #f8f9fa;
  padding: 10px;
}

/* Tùy chỉnh content area */
.richeditor-react .editor-content {
  padding: 15px;
  min-height: 200px;
}

🌍 Internationalization

Editor hỗ trợ tiếng Việt và có thể tùy chỉnh ngôn ngữ:

<RichEditor
  placeholder="Nhập nội dung của bạn..."
  // Các tooltip và message sẽ hiển thị bằng tiếng Việt
/>

📱 Responsive Design

Editor tự động điều chỉnh theo kích thước màn hình:

<RichEditor
  width="100%"           // Responsive width
  maxWidth={1200}        // Giới hạn chiều rộng tối đa
  height="auto"          // Auto height
  minHeight={300}        // Chiều cao tối thiểu
/>

🔧 Advanced Usage

Custom Formats

import { Format } from 'richeditor-react';

class CustomFormat extends Format {
  static create(value) {
    // Tạo format tùy chỉnh
  }
}

RichEditor.register('formats/custom', CustomFormat);

Custom Modules

import { Module } from 'richeditor-react';

class CustomModule extends Module {
  constructor(editor, options) {
    super(editor, options);
    // Khởi tạo module tùy chỉnh
  }
}

RichEditor.register('modules/custom', CustomModule);

🚨 Troubleshooting

Styles không load

Đảm bảo bạn đã import CSS:

import 'richeditor-react/styles';

Performance issues

Sử dụng React.memo cho component chứa editor:

const MyEditor = React.memo(() => (
  <RichEditor
    // props...
  />
));

SSR (Server-Side Rendering)

Với Next.js, sử dụng dynamic import:

import dynamic from 'next/dynamic';

const RichEditor = dynamic(
  () => import('richeditor-react/react'),
  { ssr: false }
);

📄 License

MIT License - xem file LICENSE để biết thêm chi tiết.

🤝 Contributing

Chúng tôi hoan nghênh mọi đóng góp! Vui lòng đọc CONTRIBUTING.md để biết thêm thông tin.

📞 Support

• 🐛 Issues
• 💬 Discussions
• 📧 Email: [email protected]

Made with ❤️ for the Vietnamese developer community