在 Quill 编辑器中添加字体 - Angular

Question

我在角度应用程序中向羽毛笔编辑器添加字体时遇到困难。看来我需要导入格式/字体并将我想在编辑器中使用的字体列入白名单，但目前我没有做任何事情来添加字体。请参阅下面的代码，如果您有任何疑问，请告诉我。谢谢。

HTML

<div class="text-area">
    <quill-editor 
    [styles]="quill_styles" 
    [modules]="modules"
    [(ngModel)]="htmlContent"
    placeholder="Hello World"
    ></quill-editor>
</div>

打字稿

import Quill from 'quill';
import BlotFormatter from 'quill-blot-formatter';
import { EditorChangeContent, EditorChangeSelection } from 'ngx-quill'

// const Font = Quill.import('formats/font') // Thought this would work
// Font.whitelist = ['sofia'] // Thought this would work
Quill.register('modules/blotFormatter', BlotFormatter);
// Quill.register(Font,true) // Thought this would work

export class MyComponent implements OnInit{
constructor( //Irrelevant ) {} 

  toolbarOptions = [
    'bold','italic', 'underline', 'strike',
    {'font': ['sofia']},
    { 'size': [] },
    { 'color': [] },
    { 'background': [] },
    'link','image', 'video', 'formula',
    { 'script': 'super' }, { 'script': 'sub' },
    'clean'
  ]

  modules = {
    toolbar: [this.toolbarOptions],
    blotFormatter: {},
  }

  quill_styles = {
    'height':'50vh'
  }
}

Answer 1

使用 Angular 18 的完整工作示例，自定义字体，无需自定义鹅毛笔编辑器的 html 工具栏。

https://github.com/Samyssmile/quill-angular-example