Day 3：Quill 與 Angular 起手式

Quill
上一篇我們看了 Why Quill，今天就來複習環境設置，並嘗試新增一個 Angular 專案，不過如果你是被標題吸引進來的同學，多少都有接觸過 Angular，或者主要就是用 Angular 開發的。這篇的目標是給沒接觸過 Angular 的朋友按照步驟體驗看看用 Angular 開發專案的感受。以前當過一陣子的 Angular 傳教士，雖然後來因為工作的關係換寫 React，但個人私心還是比較喜歡 Angular 的開發體驗 XD

什麼是 Quill？

Quill 是一個簡單易用且可擴展的 WYSIWYG 開源文本編輯器，它提供了豐富的文本編輯功能，包括格式化文字、插入圖片、表格和連結等。Quill 的設計簡單、易於使用，它是以 JavaScript 為基礎，並且提供了豐富的插件和擴充功能，讓使用者可以輕鬆地滿足各種文本編輯的需求。

WYSIWYG (What You See Is What You Get) 縮寫。
初次看到的時候也一頭霧水，就是所見即所得。

什麼是 Angular？

Angular 是一個基於 TypeScript 的開發平台。而身為一個平台，Angular 包含：

一個元件化的框架，用來建構可延展的 Web 應用程式。
一整套經深思熟慮而整合出來的函式庫，包含各種不同的功能，包含路由機制、表單管理、Client/Server 通訊，以及更多。
一組完善的開發工具，幫助你開發、建置、測試、更新你的程式碼。

安裝和配置 Quill Editor 在 Angular 專案中

首先我們需要準備 Node.js 環境，然後安裝 Angular CLI 並使用指令建立新專案，最後到專案目錄下用 NPM 安裝 Quill，步驟如下：

在 Angular 專案中安裝 Quill 函式庫：使用 npm 或者 yarn 安裝 Quill，確保在專案中引入所需的 dependency：

# 安裝 Angular CLI
npm install @angular/cli

# 建立一個新專案
ng new quill-editor-todo
# 建立的過程會有一些提問，按照需求選擇即可，例如:
# 要不要分享資料給官方作為改善用途: Yes
# 選擇 Style 的語言: SCSS
# 是否建立 Routing: No

# Install Quill Editor
cd quill-editor-todo
npm install [email protected] --save

# Install Quill Editor Types
npm install @types/quill@1 --save-dev

引入 Quill Style

{
  // ...
  "architect": {
    "build": {
      "options": {
        "styles": [
          "node_modules/quill/dist/quill.snow.css",
          "src/styles.css"
        ],
        // ...
      },
      // ...
    },
    // ...
  }
}

建立 Quill Editor 元件，來試試看 standalone：

# 建立一個 standalone component
ng generate component quill-editor --standalone

在 Component 的 template 簡單的加上一個帶有 Id 的 div 標籤

<!-- quill-editor.component.html --> 
<div id="quill" #quillContainer></div>

在 quill-editor component 初始化 Quill Editor：

// quill-editor.component.ts
import Quill from 'quill';
import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-quill-editor',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './quill-editor.component.html',
  styleUrls: ['./quill-editor.component.css'],
})
export class QuillEditorComponent implements AfterViewInit {
  @ViewChild('quillContainer') quillContainer!: ElementRef;
  private quillEditor: any;

  content: string = ''; // 初始化編輯器內容為空字串

  ngAfterViewInit() {
    this.quillEditor = new Quill(this.quillContainer.nativeElement, {
      // this.quillEditor = new Quill("#quill", { // also works
      theme: 'snow', // 可以選擇不同的主題，例如 'bubble' 或 'core'
    });
  
    // 監聽編輯器內容變化事件，並將變化同步到 Angular 的資料模型
    this.quillEditor.on('text-change', () => {
      this.content = this.quillEditor.root.innerHTML;
    });
  }
}

雖然透過 AfterViewInit 可以拿到對應的 id selector，但用 @ViewChild 可以更符合 Angular 的操作方式來獲取 DOM，因此我們還是使用 this.quillContainer.nativeElement 來初始化 Quill。

當執行 ng serve 時，會看到這樣的 warning：

Warning: D:\Projects\quill-editor-todo\src\app\quill-editor\quill-editor.component.ts depends on 'quill'. CommonJS or AMD dependencies can cause optimization bailouts.

這是由於 Quill 是屬於 CommonJS module，進而影響到未來在建置的時候打包優化的問題。目前如果不想看到這個訊息，可以直接在 project.json 或 angular.json 裡面的 build 底下新增：

"allowedCommonJsDependencies": ["quill"]

再 ng serve 一次就不會看到 warning 了。

最後在 app component import QuillEditorComponent，並且在 app.component.html 加上 tag：

<app-quill-editor></app-quill-editor>

ng serve 並重新整理，試著在編輯器中輸入文字、調整文字樣式，以及插入連結等功能，來體驗 Quill Editor 的基本編輯功能。

小結

今天我們體驗了如何安裝 Angular CLI ，並透過指令建立新專案後加入 Quill，讓我們能夠在這個專案輕鬆擁有一個功能豐富的文字編輯器。明天我們將會依照內建的功能介紹關於 Quill Editor 的應用，之後會提供一些實例和程式碼來幫助讀者更好理解如何操作。

備註：如果你的 VSCode 有安裝 Nx console，這時候 Extension 會跳出來詢問是否直接套用 Nx，這個步驟可用可不用，筆者提供的範例是有透過 Nx 自動初始化，所以會和原本的 Angular 初始專案不太一樣。

雜記：

很久沒玩手機遊戲了，最近跟室友開始玩魔物獵人 Now，跟 Pokemon Go 一樣，需要走到戶外才能玩這遊戲，邊散步邊打魔物感覺還滿新鮮的。給自己另一個出去走走的理由 XD

Reference

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

Jeff Wu's Note