QuillJs: Tích hợp Quill vào Angular - Part 2

Trong bài viết này, chúng ta sẽ tích hợp Quill vào trong ứng dụng Angular.

Bài viết gồm 2 phần:

• Tích hợp Quill vào Angular
• Sử dụng Quill trong Template Form

Cài đặt

Chúng ta sẽ sử dụng library ngx-quill

npm install ngx-quill

Khai báo QuillModule trong file AppModule(app.module.ts)

@NgModule({
  imports: [
    ...,    QuillModule.forRoot()
  ],
  ...
})
class AppModule { ... }

Khai báo css và js trong file angular.json

...
"styles": [
  "src/styles.scss",
  "./node_modules/quill/dist/quill.core.css",
  "./node_modules/quill/dist/quill.bubble.css",
  "./node_modules/quill/dist/quill.snow.css",
  "./node_modules/quill-mention/dist/quill.mention.min.css",
],
"scripts": [
  "./node_modules/quill/dist/quill.min.js"
]
...

Tạo folder configurations, thêm file const.ts

export const QuillConfiguration = {
  toolbar: [
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ list: 'ordered' }, { list: 'bullet' }],
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ color: [] }, { background: [] }],
    ['link'],
    ['clean'],
  ],
}

Trong file app.component.ts, khai báo quillConfiguration. Mục đích là gán giá trị toolbar qua biến trong component (xem lại Part 1)

import { Component, VERSION } from '@angular/core';
import { QuillConfiguration } from '../configurations/const';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  quillConfiguration = QuillConfiguration;
}

Ở trang app.component.ts

<quill-editor
  class="content-editor"
  [placeholder]="''"
  [modules]="quillConfiguration"
  [styles]="{ 'min-height': '240px' }"
>
</quill-editor>