Quill2x Rich Text Editor Component

@libs-ui/components-inputs-quill2x là một trình soạn thảo văn bản giàu tính năng (Rich Text Editor) mạnh mẽ dựa trên Quill 2.0. Nó cung cấp một giao diện linh hoạt, hiện đại và hỗ trợ nhiều tính năng nâng cao như bảng, hình ảnh, video, mention, emoji và tùy chỉnh toolbar.

Tính năng nổi bật

• ✒️ Quill 2.0 Core: Tận dụng toàn bộ sức mạnh và độ ổn định của Quill 2.
• 🛠️ Custom Toolbar: Hỗ trợ nhiều chế độ hiển thị toolbar (default, basic, all, custom) và tùy chỉnh vị trí cố định.
• 🖼️ Media Support: Tích hợp trình tải lên hình ảnh, video và hỗ trợ resize hình ảnh.
• 🏷️ Mention Integration: Hỗ trợ tính năng mention (@người dùng, #thẻ tag) mượt mà.
• 📊 Table Support: Hỗ trợ tạo và quản lý bảng chuyên nghiệp với các thao tác dòng/cột.
• 😀 Emoji Picker: Tích hợp sẵn bộ chọn emoji.
• ✅ Validation: Hỗ trợ các quy tắc kiểm tra bắt buộc, độ dài tối thiểu/tối đa.
• 📱 Responsive: Giao diện co giãn tốt và toolbar thông minh (nút xem thêm khi không đủ chỗ).
• 🎨 Styling: Tùy chỉnh màu sắc văn bản, màu nền và phông chữ linh hoạt.

Cài đặt

Sử dụng npm hoặc yarn để cài đặt:

npm install @libs-ui/components-inputs-quill2x

Cách sử dụng

Import Module

import { LibsUiComponentsInputsQuill2xComponent } from '@libs-ui/components-inputs-quill2x';

@Component({
  standalone: true,
  imports: [LibsUiComponentsInputsQuill2xComponent],
  // ...
})
export class YourComponent {}

Ví dụ cơ bản

<libs_ui-components-inputs-quill2x
  [(item)]="formData"
  [fieldBind]="'content'"
  [placeholder]="'Nhập nội dung tại đây...'"></libs_ui-components-inputs-quill2x>

Chế độ Toolbar rút gọn (Basic)

<libs_ui-components-inputs-quill2x
  [(item)]="formData"
  [fieldBind]="'summary'"
  [quillCustomConfig]="{
    toolbar: { type: signal('basic') }
  }"></libs_ui-components-inputs-quill2x>

API Reference

Inputs

| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả | | :------------------ | :--------------------- | :---------------------- | :-------------------------------------------------- | | item | TYPE_OBJECT | (Required) | Object chứa dữ liệu cần bind. | | fieldBind | string | (Required) | Tên trường trong item để bind giá trị HTML. | | placeholder | string | 'i18n_import_content' | Văn bản gợi ý khi editor trống. | | readonly | boolean | false | Chế độ chỉ đọc. | | displayToolbar | boolean | true | Hiển thị hoặc ẩn thanh công cụ. | | quillCustomConfig | IQuill2xCustomConfig | undefined | Cấu hình nâng cao cho toolbar và editor. | | dataConfigMention | IMentionConfig | undefined | Cấu hình cho tính năng mention. | | validRequired | IValidRequired | undefined | Quy tắc kiểm tra bắt buộc nhập. | | validMinLength | IValidLength | undefined | Quy tắc kiểm tra độ dài tối thiểu. | | validMaxLength | IValidLength | undefined | Quy tắc kiểm tra độ dài tối đa. | | resize | 'vertical' \| 'none' | 'none' | Cho phép thay đổi kích thước editor theo chiều dọc. |

Outputs

| Sự kiện | Kiểu dữ liệu | Mô tả | | :-------------------- | :----------------------------- | :--------------------------------------------------------------------------------------- | | outChange | string | Phát ra nội dung HTML mới khi có thay đổi. | | outFocus | void | Phát ra khi editor được focus. | | outBlur | void | Phát ra khi editor mất focus. | | outFunctionsControl | IQuill2xFunctionControlEvent | Cung cấp các phương thức điều khiển editor (setContent, insertText, quill(), ...). |

Types & Interfaces

IQuill2xCustomConfig

export interface IQuill2xCustomConfig {
  toolbar?: WritableSignal<{
    type: WritableSignal<'all' | 'default' | 'basic' | 'custom'>;
    positionFixed?: WritableSignal<{
      event: WritableSignal<'click' | 'mouseenter'>;
      elementShow: WritableSignal<HTMLElement>;
      // ...
    }>;
    // ...
  }>;
  // ...
}

Tech Stack

• Core: Quill 2.0.3, Angular 18+ (Signals)
• Plugins: @ssumo/quill-resize-module (Resize image)
• Utilities: @libs-ui/utils, @libs-ui/components-inputs-mention

License

MIT