Day 25：ngx-quill 介紹

前面 14 天都在看 Quill Editor 的官方文件，突然想起我的主題還是要跟 Angular 有一點關係，除了直接在 Angular 引入 Quill 之外，其實也有方便的第三方套件可以使用，也就是 ngx-quill。

在 Angular 專案中，有時候會需要用到第三方套件，為了要能順利的融入 Angular 的世界，我們會需要額外的處理與封裝，讓套件使用體驗可以更 Angular。而使用 ngx-quill 的好處如下：

資料與事件綁定

我們都知道 Angular 使用 data binding 以及 event binding 作為核心特性之一，使用 ngx-quill 可以方便的透過綁定的方式來維護資料的狀態以及編輯器的互動等功能。

模組化及相依性注入

Angular 專案中，我們透過 module (目前更推薦使用 standalone component)，以及相依性注入 ( Dependency Injection ) 作為管理各種服務和元件的方式。ngx-quill 也是按照 Angular 的模組化及相依性注入的設計模式來建立。使其更容易整合到既有的 Angular App 中。

表單控制

Angular 有很強大的表單 module，包括了：template-driven forms 以及 reactive Forms。ngx-quill 可以輕鬆的整合到 Angular 的表單系統中，讓我們能使用 Angular 的驗證、狀態追蹤等功能。

安裝與使用

首先我們一樣透過 npm install 來安裝 ngx-quill：

npm install ngx-quill --save
npm install @types/[email protected]

另外需要注意的是，如果之前的練習有安裝到 @types/quill 的話，版本會是 2.0.11，這邊我們需要降版到 1.3.10 才不會導致編譯時的類型錯誤。

如果是全新的 Angular 專案，需要將 quill editor 的佈景主題 (theme) CSS Style 加到專案，例如：
要選用 snow 的主題，可以 import CSS 到 styles.scss：

@import '~quill/dist/quill.snow.css';

也可以把 node_modules/quill/dist/quill.snow.css 加到 angular.json 或 Nx 的 project.json 的 styles 陣列中。

"styles": [
    "node_modules/quill/dist/quill.snow.css",
    "src/styles.scss"
],

安裝完畢之後，接著我們要將 ngx-quill 的 module 導入：

import { QuillModule } from 'ngx-quill';

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

Import 之後就可以直接在 template 使用這個元件：

<quill-editor></quill-editor>

這時直接 ng serve 就可以看到有基本款的 Quill Editor 了。

配置選項

配置選項目前我們可以放在兩個地方，一個是在 template 的 component 屬性中，另一個則是在 import QuillConfigModule.forRoot() 的括號中帶入配置選項。

在 template 的 component 屬性加上 quill eidtor 的配置：

<quill-editor
  [modules]="{
    toolbar: [
      ['bold', 'italic'],
      ['link', 'blockquote']
    ]
  }"
  [theme]="'snow'"
></quill-editor>

透過 import QuillConfigModule 帶入配置：

import { QuillConfigModule, QuillModule } from 'ngx-quill';

@NgModule({
  imports: [
    QuillModule.forRoot(),
    QuillConfigModule.forRoot({
      modules: {
        toolbar: [
          ['bold', 'italic'],
          ['link', 'blockquote'],
        ],
      },
    }),
  ],
})
export class AppModule { }

Standalone 元件

ngx-quill 也支援 standalone 的功能，可以直接使用 provideQuillConfig 方法進行配置，例如在 main.ts 的 bootstrapApplication 呼叫時，將配置加入到 providers：

import { provideQuillConfig } from 'ngx-quill/config';

bootstrapApplication(AppComponent, {
  providers: [
    provideQuillConfig({
      modules: {
        syntax: true,
        toolbar: [
          ['bold', 'italic'],
          ['link', 'blockquote'],
        ],
      }
    })
  ]
});

此時的 AppComponent 對應的 standalone 設定如下：

import { Component } from '@angular/core';
import { QuillModule } from 'ngx-quill';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  standalone: true,
  imports: [QuillModule],
})

export class AppComponent {
// ...
}

與 Angular Form 整合

有時候我們要確認編輯器的狀態，以根據需求進行像是表單驗證，或是否修改過等相關的操作，這時候可以搭配 Angular Form module 加到 ngx-quill 就能快速的實現表單操作與驗證的需求。例如以下的範例，搭配 import 對應的 FormsModule 或 ReactiveFormsModule 就能使用了：

<!-- Reactive Forms -->
<form [formGroup]="myForm">
  <quill-editor formControlName="editorContent"></quill-editor>
</form>

<!-- Template-driven Forms -->
<quill-editor [(ngModel)]="editorContent" name="editorContent"></quill-editor>

小結

ngx-quill 作為 Quill 的 Angular wrapper，為 Angular 開發者提供了一個更方便、更“Angular化”的方式來使用編輯器。從簡單的安裝配置到與 Angular Forms 的整合，可以省略掉前期的設定流程，直接無痛加入並使用。之後再繼續看 ngx-quill 的其他介紹內容。

雜記

連假的最後一天，運氣還不錯，儘管前一天晚上豪大雨，但今天的天氣就陰陰的沒有下雨，是涼爽舒服的，去了傳統藝術中心，這次也待了比較多的時間在裡面度過，跟著導覽員去看各種不同的傳統文化，也看了很帥的霹靂布袋戲人偶，不論什麼時候看，精細的程度都不輸專業的模型，但真的很大尊，家裡空間不夠的收一尊就很極限了 XD 期待下次再來逛逛，會有不同的展覽內容。

Reference

KillerCodeMonkey/ngx-quill: Angular (>=2) components for the Quill Rich Text Editor (github.com)
@types/quill - npm Package Health Analysis | Snyk

文章同步發表於2023 iThome 鐵人賽

Jeff Wu's Note