如何使用 Angular 将字体添加到 Quill 编辑器

Question

我有一个 Angular 18 应用程序并使用 Quill Richtext Editor。如何添加字体，比如说“Roboto”？

export const quillConfiguration = {
  toolbar: [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons

    [{'header': 1}, {'header': 2}],               // custom button values
    [{'list': 'ordered'}, {'list': 'bullet'}],
    [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
    [{'direction': 'rtl'}],                         // text direction

    [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
    [{'header': [1, 2, 3, 4, 5, 6, false]}],

    [{'color': []}, {'background': []}],          // dropdown with defaults from theme
    [{'font': []}],
    [{'align': []}],

    ['clean'],                                         // remove formatting button
  ]
}

还有我的 html 组件。

  <quill-editor
    (onContentChanged)="onContentChanged($event)"
    [(ngModel)]="moEditorDocument.content"
    [modules]="quillConfiguration"
    [placeholder]="'Placeholder...'"
    class="rich-text-editor"
    id="rich-text-editor"
  >
  </quill-editor>

Answer 1

我终于解决了。我使用 Angular 18 创建了一个完全可用的 git 存储库

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