angular - 使用 Angular 10 中的鹅毛笔编辑器自定义字体大小

Question

我正在尝试在 Quill 编辑器中获取自定义字体大小，如下所示

我写了下面的代码

 <quill-editor [formControlName]="formControlData?.name" [options]="editorOptions"
        (ready)="onEditorCreated($event)" (change)="onContentChanged($event)">

      </quill-editor> 

下面是配置

   public editorOptions = {
theme: 'snow',
modules: {
  toolbar: {
    container:
      [
        [{ 'placeholder': ['[GuestName]', '[HotelName]'] }], // my custom dropdown
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        //  ['blockquote', 'code-block'],

        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction
        [{ 'size': Size.whitelist }],
        //  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

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

        //  ['clean']                                    // remove formatting button
        ['link', 'image']
      ],
    handlers: {
      "placeholder": function (value) {
        if (value) {
          const cursorPosition = this.quill.getSelection().index;
          this.quill.insertText(cursorPosition, value);
          this.quill.setSelection(cursorPosition + value.length);
        }
      }
    }
  }
}
  };


var Size = Quill.import('attributors/style/size');
Size.whitelist = ['12px', '16px', '18px'];
Quill.register(Size, true);

当我运行代码时。我看到下面的输出。你能告诉我我做错了什么

Answer 1

import * as QuillNamespace from 'quill';

Quill: any = QuillNamespace;

ngOnInit() {
    const fontSizeArr = ['6px', '8px', '9px','10px', '11px', '12px', '13px', '14px', '16px', '18px', '24px', '30px', '36px', '48px'];
    const Size = this.Quill.import('attributors/style/size');
    Size.whitelist = fontSizeArr;
    this.Quill.register(Size, true);
  }

在 html 中

<span class="ql-formats">
        <select class="ql-size" [title]="'Size'">
          <option value="6px"></option>
          <option value="8px"></option>
          <option value="9px"></option>
          <option value="10px"></option>
          <option value="11px"></option>
          <option selected value="12px"></option>
          <option value="13px"></option>
          <option value="14px"></option>
          <option value="16px"></option>
          <option value="18px"></option>
          <option value="24px"></option>
          <option value="30px"></option>
          <option value="36px"></option>
          <option value="48px"></option>
        </select>
      </span>

在 syles.scss 中

/字体大小/

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value]::before {
  content: attr(data-value) !important;
}