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

Question

我在 Angular 7 项目中使用PrimeNG Editor (based on Quill，我想自定义工具栏。虽然我已经尝试了 HTML 和 JavaScript 端的一些配置选项，但我唯一设法更新的是通过 HTML 端的placeholder 属性。这是我的方法（我将 Editor 定义为自定义控件）：

#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} 从 '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 按钮只有在我也在 typescript 页面的字符串数组中定义它们时才会出现，如下所示：

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

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

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

Answer 2

您需要在模块级别导入编辑器模块，而不是组件级别的 ts 文件。

App.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import {EditorModule} from 'primeng/editor';


@NgModule({
  imports:      [ BrowserModule, FormsModule, EditorModule ],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

希望这会有所帮助！