Quill2x Preview Component

@libs-ui/components-inputs-quill2x-preview là một component chuyên dụng để hiển thị nội dung HTML được tạo ra từ trình soạn thảo Quill2x. Nó đảm bảo nội dung được hiển thị nhất quán với trình soạn thảo, đồng thời hỗ trợ các tính năng như giới hạn chiều cao (view more/collapse) và bảo mật nội dung.

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

• 🔍 Consistent Rendering: Hiển thị nội dung HTML với đầy đủ style tương ứng như khi soạn thảo trong Quill2x.
• 🛡️ HTML Security: Sử dụng LibsUiPipesSecurityTrustPipe để sanitize nội dung HTML, ngăn chặn các cuộc tấn công XSS.
• 📉 View More / Collapse: Tự động kiểm tra độ cao của nội dung. Nếu vượt quá maxHeight, component sẽ hiển thị nút "Xem thêm" và hiệu ứng gradient mờ dần ở đáy.
• 🎨 Custom Styling: Cho phép truyền thêm class tùy biến cho container thông qua input containerClass.
• ⚡ Performance: Sử dụng ChangeDetectionStrategy.OnPush để tối ưu hiệu năng render.

Cài đặt

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

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

Cách sử dụng

Import Module

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

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

Ví dụ cơ bản

<libs_ui-components-inputs-quill2x-preview [data]="htmlContent"></libs_ui-components-inputs-quill2x-preview>

Giới hạn chiều cao với nút Xem thêm

<libs_ui-components-inputs-quill2x-preview
  [data]="longHtmlContent"
  [maxHeight]="200"
  [hasButtonCollapseExpand]="true"
  [labelButtonViewMore]="'Xem thêm nội dung'"
  [labelButtonCollapse]="'Thu gọn'"></libs_ui-components-inputs-quill2x-preview>

API Reference

Inputs

| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả | | :------------------------ | :----------- | :----------------- | :-------------------------------------------------------- | | data | string | (Required) | Nội dung HTML cần hiển thị. | | containerClass | string | undefined | Class CSS bổ sung cho container. | | expand | boolean | (Model) | Trạng thái mở rộng hoặc thu gọn của component. | | hasButtonCollapseExpand | boolean | false | Bật/tắt tính năng giới hạn chiều cao và nút Xem thêm. | | maxHeight | number | 160 | Chiều cao tối đa (pixel) trước khi hiển thị nút Xem thêm. | | labelButtonCollapse | string | 'i18n_collapse' | Nhãn cho nút thu gọn. | | labelButtonViewMore | string | 'i18n_view_more' | Nhãn cho nút xem thêm. |

Tech Stack

• Core: Angular 18+ (Signals)
• Styles: Quill "snow" theme compatible styles
• Pipes: @libs-ui/pipes-security-trust

License

MIT