PrimeNg Editor绑定FormControl后初始值不显示问题求助

原因分析 #

你遇到的问题是PrimeNG 13.2.1的Editor组件与Quill 2.0.1版本不兼容导致的。PrimeNG 13.x系列的Editor基于Quill 1.x开发，而Quill 2.0做了大量API变更，旧版PrimeNG Editor未适配这些变化，因此FormControl的初始值无法自动同步到编辑器中。

解决方案 #

方案1：降级Quill到兼容版本（推荐）

直接将Quill降级到PrimeNG 13支持的1.x版本即可解决问题：

npm install quill@1.3.7 --save

安装完成后重启项目，编辑器就能正常显示FormControl的初始值。

方案2：手动同步初始值（不降级时使用）

若无法降级Quill，可通过手动操作Quill实例设置初始值：

1. 给HTML中的p-editor添加模板引用：

<div>
  <form [formGroup]="enFormGroup">
    <p-editor #editor formControlName="textEn"></p-editor>
  </form>
</div>

2. 在组件类中通过ViewChild获取Editor实例，在视图初始化后手动设置内容：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Editor } from 'primeng/editor';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
})
export class EditorComponent implements AfterViewInit {
  enFormGroup: FormGroup = this.fb.group({
    titleEn: ['test', Validators.required],
    textEn: ['hello world', Validators.required],
  });

  @ViewChild('editor') editor!: Editor;

  constructor(private fb: FormBuilder) {}

  ngAfterViewInit(): void {
    if (this.editor?.quill) {
      this.editor.quill.root.innerHTML = this.enFormGroup.get('textEn')?.value || '';
    }
  }
}

通过这种方式可强制将FormControl的初始值同步到Quill编辑器中。

内容的提问来源于stack exchange，提问作者ZCode