无法在 Angular 中自定义 PrimeNG Quill 编辑器

Question

我正在使用PrimeNG 编辑器（基于Angular 7 项目中的 Quill），我想自定义工具栏。虽然我已经尝试了 HTML 和 JavaScript 端的一些配置选项，但我唯一能更新的是placeholderHTML 端的属性。这是我的方法（我将编辑器定义为自定义控件）：

#FormComponent.ts：

public controlDescription = new ControlEditor({
    key: 'Description',
    label: 'Description',
    required: true
});

this.controls = [this.controlDescription, ... ];

#FormComponent.html：

<div comp-dynamic-control [form]="form" [control]="controlDescription"></div>

#ControlEditor.html：

<p-editor [formControlName]="control.key" placeholder='Compose text...'></p-editor>

请注意，我还尝试在FormComponent.html中使用以下代码直接使用编辑器（不使用自定义编辑器），但尽管添加了import {EditorModule} from 'primeng/editor'; ，但页面上似乎没有编辑器；到 ControlEditor.ts 文件。任何想法？

<p-editor formControlName="description" [style]="{'height':'320px'}"></p-editor>

Answer 1

我正在使用 Angular 9，对我来说，只有当我为属性提供formats所有string array所需格式（按钮）并且旁边我还需要在 html 页面中添加按钮时，自定义才有效。按钮需要包含在p-header 标签内，并且p-header标签需要位于p-editor标签之间，如下所示：

<p-editor [(ngModel)]="value" [style]="{'height':'100px'}" formats="formats">
    <p-header>
       <span class="ql-formats">
        <button class="ql-bold" aria-label="Bold"></button>
        <button class="ql-italic" aria-label="Italic"></button>
       </span>
    </p-header>
</p-editor>

仅当我也在打字稿页面的字符串数组中定义它们时，才会出现bold和按钮，如下所示：italic

formats: string[] = ['bold', 'italic'];

以下是所有其他选项：https://quilljs.com/docs/formats/

不要忘记添加formats="formats"到第一个p-editor标签