@libs-ui/components-inputs-quill2x 0.2.355-9 → 0.2.356-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,3 +1,114 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Quill2x Rich Text Editor Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`@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.
|
|
4
|
+
|
|
5
|
+
## Tính năng nổi bật
|
|
6
|
+
|
|
7
|
+
- ✒️ **Quill 2.0 Core**: Tận dụng toàn bộ sức mạnh và độ ổn định của Quill 2.
|
|
8
|
+
- 🛠️ **Custom Toolbar**: Hỗ trợ nhiều chế độ hiển thị toolbar (`default`, `basic`, `all`, `custom`) và tùy chỉnh vị trí cố định.
|
|
9
|
+
- 🖼️ **Media Support**: Tích hợp trình tải lên hình ảnh, video và hỗ trợ resize hình ảnh.
|
|
10
|
+
- 🏷️ **Mention Integration**: Hỗ trợ tính năng mention (@người dùng, #thẻ tag) mượt mà.
|
|
11
|
+
- 📊 **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.
|
|
12
|
+
- 😀 **Emoji Picker**: Tích hợp sẵn bộ chọn emoji.
|
|
13
|
+
- ✅ **Validation**: Hỗ trợ các quy tắc kiểm tra bắt buộc, độ dài tối thiểu/tối đa.
|
|
14
|
+
- 📱 **Responsive**: Giao diện co giãn tốt và toolbar thông minh (nút xem thêm khi không đủ chỗ).
|
|
15
|
+
- 🎨 **Styling**: Tùy chỉnh màu sắc văn bản, màu nền và phông chữ linh hoạt.
|
|
16
|
+
|
|
17
|
+
## Cài đặt
|
|
18
|
+
|
|
19
|
+
Sử dụng npm hoặc yarn để cài đặt:
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @libs-ui/components-inputs-quill2x
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Cách sử dụng
|
|
26
|
+
|
|
27
|
+
### Import Module
|
|
28
|
+
|
|
29
|
+
```typescript
|
|
30
|
+
import { LibsUiComponentsInputsQuill2xComponent } from '@libs-ui/components-inputs-quill2x';
|
|
31
|
+
|
|
32
|
+
@Component({
|
|
33
|
+
standalone: true,
|
|
34
|
+
imports: [LibsUiComponentsInputsQuill2xComponent],
|
|
35
|
+
// ...
|
|
36
|
+
})
|
|
37
|
+
export class YourComponent {}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### Ví dụ cơ bản
|
|
41
|
+
|
|
42
|
+
```html
|
|
43
|
+
<libs_ui-components-inputs-quill2x
|
|
44
|
+
[(item)]="formData"
|
|
45
|
+
[fieldBind]="'content'"
|
|
46
|
+
[placeholder]="'Nhập nội dung tại đây...'"></libs_ui-components-inputs-quill2x>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Chế độ Toolbar rút gọn (Basic)
|
|
50
|
+
|
|
51
|
+
```html
|
|
52
|
+
<libs_ui-components-inputs-quill2x
|
|
53
|
+
[(item)]="formData"
|
|
54
|
+
[fieldBind]="'summary'"
|
|
55
|
+
[quillCustomConfig]="{
|
|
56
|
+
toolbar: { type: signal('basic') }
|
|
57
|
+
}"></libs_ui-components-inputs-quill2x>
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## API Reference
|
|
61
|
+
|
|
62
|
+
### Inputs
|
|
63
|
+
|
|
64
|
+
| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |
|
|
65
|
+
| :------------------ | :--------------------- | :---------------------- | :-------------------------------------------------- |
|
|
66
|
+
| `item` | `TYPE_OBJECT` | **(Required)** | Object chứa dữ liệu cần bind. |
|
|
67
|
+
| `fieldBind` | `string` | **(Required)** | Tên trường trong `item` để bind giá trị HTML. |
|
|
68
|
+
| `placeholder` | `string` | `'i18n_import_content'` | Văn bản gợi ý khi editor trống. |
|
|
69
|
+
| `readonly` | `boolean` | `false` | Chế độ chỉ đọc. |
|
|
70
|
+
| `displayToolbar` | `boolean` | `true` | Hiển thị hoặc ẩn thanh công cụ. |
|
|
71
|
+
| `quillCustomConfig` | `IQuill2xCustomConfig` | `undefined` | Cấu hình nâng cao cho toolbar và editor. |
|
|
72
|
+
| `dataConfigMention` | `IMentionConfig` | `undefined` | Cấu hình cho tính năng mention. |
|
|
73
|
+
| `validRequired` | `IValidRequired` | `undefined` | Quy tắc kiểm tra bắt buộc nhập. |
|
|
74
|
+
| `validMinLength` | `IValidLength` | `undefined` | Quy tắc kiểm tra độ dài tối thiểu. |
|
|
75
|
+
| `validMaxLength` | `IValidLength` | `undefined` | Quy tắc kiểm tra độ dài tối đa. |
|
|
76
|
+
| `resize` | `'vertical' \| 'none'` | `'none'` | Cho phép thay đổi kích thước editor theo chiều dọc. |
|
|
77
|
+
|
|
78
|
+
### Outputs
|
|
79
|
+
|
|
80
|
+
| Sự kiện | Kiểu dữ liệu | Mô tả |
|
|
81
|
+
| :-------------------- | :----------------------------- | :--------------------------------------------------------------------------------------- |
|
|
82
|
+
| `outChange` | `string` | Phát ra nội dung HTML mới khi có thay đổi. |
|
|
83
|
+
| `outFocus` | `void` | Phát ra khi editor được focus. |
|
|
84
|
+
| `outBlur` | `void` | Phát ra khi editor mất focus. |
|
|
85
|
+
| `outFunctionsControl` | `IQuill2xFunctionControlEvent` | Cung cấp các phương thức điều khiển editor (`setContent`, `insertText`, `quill()`, ...). |
|
|
86
|
+
|
|
87
|
+
## Types & Interfaces
|
|
88
|
+
|
|
89
|
+
### IQuill2xCustomConfig
|
|
90
|
+
|
|
91
|
+
```typescript
|
|
92
|
+
export interface IQuill2xCustomConfig {
|
|
93
|
+
toolbar?: WritableSignal<{
|
|
94
|
+
type: WritableSignal<'all' | 'default' | 'basic' | 'custom'>;
|
|
95
|
+
positionFixed?: WritableSignal<{
|
|
96
|
+
event: WritableSignal<'click' | 'mouseenter'>;
|
|
97
|
+
elementShow: WritableSignal<HTMLElement>;
|
|
98
|
+
// ...
|
|
99
|
+
}>;
|
|
100
|
+
// ...
|
|
101
|
+
}>;
|
|
102
|
+
// ...
|
|
103
|
+
}
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Tech Stack
|
|
107
|
+
|
|
108
|
+
- **Core**: Quill 2.0.3, Angular 18+ (Signals)
|
|
109
|
+
- **Plugins**: `@ssumo/quill-resize-module` (Resize image)
|
|
110
|
+
- **Utilities**: `@libs-ui/utils`, `@libs-ui/components-inputs-mention`
|
|
111
|
+
|
|
112
|
+
## License
|
|
113
|
+
|
|
114
|
+
MIT
|