Angular 6 Prime 的自定义编辑器

Question

我正在尝试自定义我的 PrimeNG Editor 我正在添加一个 select 带有自定义字体大小的下拉列表 [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>

我可以获得 select 列表以显示所有字体大小

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

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中获取style/size的白名单：

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 Prime 的自定义编辑器

Angular 6 PrimeNG custom editor

typescript

quill

primeng

angular