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>

我可以选择列表显示所有字体大小

我不确定在列表中选择一个选项时如何添加功能来更改字体大小。我没有在他们的文档中看到任何示例的打字稿。如何选择自定义字体大小的列表？

Here are the docs I followed

example

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>

Example

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>

检查第一个下拉选项的值的更改。

您可以声明var Quill，以便未定义变量没有问题：（这也是primeng的工作方式）

declare var Quill: any;

此处的工作示例：

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

Angular 6 PrimeNG自定义编辑器

2 个答案: