Пользовательский редактор Angular 6 PrimeNG

Question

Я пытаюсь настроить свой PrimeNG Editor Я добавляю выпадающий список выбора с нестандартными размерами шрифта [12px, 14px, 16px...]

Вот компонент HTML

<p-editor [(ngModel)]="value" (onTextChange)="onTextChanged($event)">
            <p-header>
                    <span class="ql-formats">
                     ...
                      <select class="ql-size">
                            <option value="12px">12</option>
                            <option value="14px">14</option>
                            <option value="16px">16</option>
                        </select>
                    </span>
                   ...
                  </p-header>               
    </p-editor>

Я могу получить список выбора для отображения со всеми размерами шрифта

Я не уверен, как добавить функциональность для изменения размера шрифта при выборе параметра в списке,Я не вижу примеров в их документах для машинописи.Как я могу составить список нестандартных размеров шрифтов?

Вот документы, за которыми я следовал

пример

Answer 1

Во-первых, поместите ваш component.ts

import { Editor } from 'primeng/editor';
declare var Quill: any;

и добавьте эту строку в конструктор

var fontSizeStyle = Quill.import('attributors/style/size');
fontSizeStyle.whitelist = ['24px', '48px', '100px', '200px'];
Quill.register(fontSizeStyle, true);

Наконец, измените ваш HTML

<span class="ql-formats">
   <select class="ql-size">
       <option value="24px">24</option>
       <option value="48px">48</option>
       <option value="100px">100</option>
       <option value="200px">200</option>
   </select>
</span>

Пример

Answer 2

Сначала получите стиль / размер в белом списке .ts:

constructor(){
    var fontSizeStyle = Quill.import('attributors/style/size');
    fontSizeStyle.whitelist = ['0.75em','1em','1.5em','2.5em', '24px', '48px', '100px', '200px'];
    Quill.register(fontSizeStyle, true);
}

Теперь в файле html мы использовали следующие параметры белого списка:

<span class="ql-formats">
   <select class="ql-size">
     <option value="0.75em">small</option>
     <option value="1em" selected></option>
     <option value="1.5em">large</option>
     <option value="2.5em">huge</option>
   </select>
 </span>
 <span class="ql-formats">
   <select class="ql-size">
      <option value="24px">24</option>
      <option value="48px">48</option>
      <option value="100px">100</option>
      <option value="200px">200</option>
    </select>
 </span>

Проверьте изменениязначения первых выпадающих опций.

Вы можете объявить переменную Quill, чтобы у нее не было проблем с неопределенной переменной: (это то же самое и для primeng)

declare var Quill: any;

Рабочий пример здесь:

https://stackblitz.com/edit/quill-55477705?file=src/app/app.component.ts