无法在 Angular 中自定义 PrimeNG Quill Editor

Question

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

#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

您需要在模块级别导入编辑器模块，而不是组件级别的 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 { }

希望这会有所帮助！

Answer 2

我正在使用 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 标签

无法在 Angular 中自定义 PrimeNG Quill Editor

Cannot customize PrimeNG Quill Editor in Angular

typescript

primeng

angular