使用现有数据初始化 primeng 编辑器组件

Question

嗨，这是我的编辑器

editor.component.html

，我正在使用 primeng 编辑器。我以一种允许在创建会议或编辑会议时填充此编辑器的形式使用它。在创建的情况下，一切正常，在我的有效负载中，我发送了我在编辑器中编写的任何内容的 html。

问题是，当我想编辑会议并打开表单时，我希望该编辑器已预先填写，但它是空的。

<div class="editor">
    <div>
        <label *ngIf="showLabel" for="editor">{{ label }}</label>
        <span *ngIf="required" class="required-asterisk">*</span>
    </div>
    <p-editor 
        [(ngModel)]="value" 
        (onInit)="onEditorInit($event)" 
        (onTextChange)="onTextChange($event)"
        [readonly]="readOnly" 
        [style]="{ height: '400px', width: '500px', 'overflow-y': 'auto' }"
     ></p-editor>
    <p>Tag: [title] [start_date] [start_time] [url]</p>
</div>

import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { EditorModule } from 'primeng/editor';

@Component({
    selector: 'app-editor',
    templateUrl: './editor.component.html',
    styleUrls: ['./editor.component.scss'],
    standalone: true,
    imports: [FormsModule, CommonModule, EditorModule]
})
export class EditorComponent implements OnInit {
    @Input() value: string | undefined = '';
    @Input() readOnly: boolean = false;
    @Input() required: boolean = false;
    @Input() showLabel: boolean = true;
    @Input() label: string = '';
    @Output() valueChange = new EventEmitter<string>();

    constructor() { }

    ngOnInit() {
        if (this.value) {
            this.valueChange.emit(this.value);
        }
    }

    
    onTextChange(event: any): void {
        this.value = event.htmlValue;
        this.valueChange.emit(this.value);
    }

    onEditorInit(event: any): void {
        if (this.value) {
            event.editor.setContents(event.editor.clipboard.convert(this.value));
        }
    }
}

在我称之为编辑器组件的表单中，我有这个

                   <app-editor [label]="'Testo Mail'" [required]="true [(value)]="payload.mailBody" ></app-editor>

payload.mailBody 有一个字符串，例如

"<p>Hello world</p>"

。如果我在

editor.component.html

中添加一行以在

<div>{{value}}</div>

下面显示

<p-editor>

，我可以正确看到 mailBody 字符串

我想也许，该值未初始化，但在 onInit() 方法中添加检查，我可以看到该值存在，我不明白如何填充 primeng 编辑器组件。

我来自 React 背景，之前没有使用过 Angular 或 Primeng，所以这可能是微不足道的，但我被困在这里

Answer 1

看起来问题可能与调用

onEditorInit

函数的时间有关。 PrimeNG 编辑器组件可能会在使用服务器 API 调用的数据设置

value

属性之前进行初始化。

为了解决这个问题，我建议尝试删除

onInit

事件并查看是否可以解决问题。设置

[(ngModel)]

后，

value

绑定应自动处理编辑器内容的初始化。

这是您修改后的

editor.component.html

：

<div class="editor">
    <div>
        <label *ngIf="showLabel" for="editor">{{ label }}</label>
        <span *ngIf="required" class="required-asterisk">*</span>
    </div>
    <p-editor 
        [(ngModel)]="value" 
        (onTextChange)="onTextChange($event)"
        [readonly]="readOnly" 
        [style]="{ height: '400px', width: '500px', 'overflow-y': 'auto' }"
     ></p-editor>
    <p>Tag: [title] [start_date] [start_time] [url]</p>
</div>

这是您修改后的

EditorComponent

：

import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { EditorModule } from 'primeng/editor';

@Component({
    selector: 'app-editor',
    templateUrl: './editor.component.html',
    styleUrls: ['./editor.component.scss'],
    standalone: true,
    imports: [FormsModule, CommonModule, EditorModule]
})
export class EditorComponent implements OnInit {
    @Input() value: string | undefined = '';
    @Input() readOnly: boolean = false;
    @Input() required: boolean = false;
    @Input() showLabel: boolean = true;
    @Input() label: string = '';
    @Output() valueChange = new EventEmitter<string>();

    constructor() { }

    ngOnInit() {
        if (this.value) {
            this.valueChange.emit(this.value);
        }
    }

    onTextChange(event: any): void {
        this.value = event.htmlValue;
        this.valueChange.emit(this.value);
    }
}

通过删除

onEditorInit

方法，一旦设置了

value

，编辑器就应该正确显示预填充的内容。

如果有帮助请告诉我！