Day 5：自訂 Quill Editor 外觀樣式

今天我們將著重於自訂 Quill Editor 的外觀與樣式，讓編輯器更符合專案的設計風格需求。Quill Editor 提供了幾種方法來調整外觀樣式，讓我們一探究竟！

修改工具列樣式

在初始化的時候我們透過 new Quill() 並帶入編輯器容器的 HTML 元素以及編輯器配置的物件共兩個參數進行初始化。初始化後可以看到編輯器上方有一排工具列，工具列提供了編輯器預設的功能按鈕，我們可以用 CSS 對工具列及按鈕調整 UI 樣式，例如在 styles.scss 或對應的專案目錄下的 CSS 檔案加入新的 Style：

.ql-toolbar {
  background-color: aqua; /* 修改編輯器工具列的背景顏色 */
}
.ql-editor { 
  background-color: #f0f0f0; /* 使用你想要的背景顏色 */ 
  border: 1px solid #ccc; /* 使用你想要的邊框樣式 */ 
}

但這時候如果直接儲存重整頁面你會發現工具列的樣式完全沒有變化，這是為什麼呢？我們利用 ngAfterViewInit 觀察 QuillEditorComponent 在 Quill 初始化渲染後的 nativeElement：


@Component({
  selector: 'app-quill-editor',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './quill-editor.component.html',
  styleUrls: ['./quill-editor.component.scss'],
})
export class QuillEditorComponent implements AfterViewInit {
  @ViewChild('editor') editorElementRef!: ElementRef;
  
   ngAfterViewInit() {
    this.initQuillEditor();
    
    // 監聽編輯器內容變化事件，並將變化同步到 Angular 的資料模型
    this.quillEditor.on('text-change', () => {
      this.content = this.quillEditor.root.innerHTML;
    });

    console.log(this.editorElementRef.nativeElement);
  }

可以看到 console.log 出來的 nativeElement 並沒有包含 ql-toolbar，而是在 #editor-container 的上面：
console.log('nativeElement')

這時候我們就需要新增一個 Component 的屬性 encapsulation 並且值設為 ViewEncapsulation.None ，透過這個設定可以取消 Angular 的樣式封裝機制，將元件樣式直接套用到全局樣式中，不過要小心可能會導致樣式污染和衝突。另一種方式是直接自訂 Toolbar 的 HTML 內容，這個我們明天接著研究。

加上之後就可以看到編輯器的工具列顏色有了變化：

自訂工具列圖示

如果想要自訂工具列按鈕的圖示，可以使用 Quill.import('ui/icons') 並選擇要更換 icon 的功能按鈕指定自訂的 icon 元素，例如把粗體的 icon 換成 Font-Awesome 的 icon：

先安裝 Font Awesome node module

npm install @fortawesome/fontawesome-free --save

將 fontawesome-free CSS & JS 加入 angular.json：

{
  // ...
  "architect": {
    "build": {
      "options": {
        "styles": [
          "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
          "node_modules/quill/dist/quill.snow.css",
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
        ]
        // ...
      },
      // ...
    },
    // ...
  }
}

完成 FontAwesome 設置之後，我們可以直接在初始化 Quill Editor 之前先調整我們要的 icon：

 const icons = Quill.import('ui/icons');
 icons['bold'] = '<i class="fa-solid fa-hippo"></i>';
 this.quillEditor = new Quill(this.editorElementRef.nativeElement, {
   // ...
 });

重整頁面看看粗體的按鈕是不是變成河馬的樣式了 XD

自訂 Quill Editor 佈景主題：

如果想要更進一步自訂佈景主題，可以在 CSS 檔案中像上述的修改方式一樣來撰寫 CSS 樣式。Quill Editor 使用一些特定的 CSS class 來控制不同的元素，我們可以透過這些 class 來實現想要的效果。當然在全球最大交友平台 Github 上也有其他精美的佈景主題可以選擇，就看專案需求囉。

小結

透過自訂 Quill Editor 外觀和樣式，我們可以依專案需求進行調整。自訂外觀可以讓編輯器與專案整體的設計風格是一致的，從 UI/UX 的角度提供更好的使用者體驗。下一篇文章，我們將介紹 Quill Editor 的擴充套件和自定義功能。

雜記

今天寫文章之前，先去整復保養一下，不知不覺已經到了需要為身體繳保養費的人生階段，現在要熬夜都是一件要命的事情。想當初第一次去整復的時候，既緊張又怕受傷害。先是對肩頸做紅外線熱敷十五分鐘，之後就先從正面開始，然後是背部壓到都能聽到筋骨啪啪啪鬆開的聲音，最後壓軸則是用毛巾繞住脖子連同腰椎一起拉開，那一下直接腦袋空白了好幾秒，接著出去之後看到的光景似乎變明亮了，視覺的色彩飽和度也變的很清晰。真的是很神奇的體驗。後來只要每次做完，姿勢都會端正一陣子，深怕拉開的筋骨又太快被打回原形 XD

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

Jeff Wu's Note