Angular 6 PrimeNG 自定义编辑器

Posted 2023-03-13

【中文标题】Angular 6 PrimeNG 自定义编辑器

【英文标题】：Angular 6 PrimeNG custom editor

【发布时间】：2019-08-23 22:51:43

【问题描述】：

我正在尝试自定义我的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

【问题讨论】：

你能提供一个有效的 stackblitz 演示吗？

@ConnorsFan 没问题！

在 quill 上查看操作方法***.com/questions/38623716/…

@ConnorsFan 更新了！

@OrthoHomeDefense 您的代码没问题，取消注释“构造函数”并导入 Quill，如下所示“declare const Quill: any;” github.com/angular/angular-cli/issues/…

【参考方案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

【参考方案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