PrimeNG Editor在Chrome下调用FormGroup.patchValue丢失<br>标签问题求助

我之前做项目时也碰到过PrimeNG Editor配合FormGroup的类似坑，Chrome里确实会出现这种HTML换行符处理的兼容性问题，给你几个实用的解决思路：

1. 处理内容的安全信任，避免Angular过滤换行标签 #

Angular的DomSanitizer可能会自动把部分HTML标签判定为不安全内容过滤掉，这大概率是<br>丢失的原因。你可以在执行patchValue前，先把内容转换成Angular认可的安全HTML：

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

// 注入DomSanitizer服务
constructor(private sanitizer: DomSanitizer) {}

// 切换到编辑模式的逻辑
switchToEditMode() {
  // 假设originalContent是包含<br>标签的原始内容
  const safeEditorContent = this.sanitizer.bypassSecurityTrustHtml(this.originalContent);
  this.yourFormGroup.patchValue({
    editorField: safeEditorContent
  });
}

2. 直接操作PrimeNG Editor的底层实例（更可靠） #

有时候通过FormGroup的patchValue赋值会经过Angular表单的层层处理，不如直接操作编辑器的底层Quill实例来设置内容更精准：

先在模板里给编辑器加个模板引用：

<p-editor #editorRef formControlName="editorField"></p-editor>

然后在组件里获取实例并直接设置内容：

import { ViewChild } from '@angular/core';
import { Editor } from 'primeng/editor';

@ViewChild('editorRef') editorComponent: Editor;

switchToEditMode() {
  // 直接把HTML内容赋值给Quill的根元素
  this.editorComponent.quill.root.innerHTML = this.originalContent;
  // 如果有Delta格式的内容，也可以用setContents方法
  // this.editorComponent.quill.setContents(yourDeltaContent);
}

3. 统一换行符的格式转换 #

如果查看模式用<br>显示，编辑模式需要转成编辑器识别的换行符（比如\n），可以在切换时做格式转换：

// 把所有<br>标签转换成编辑器能识别的换行符
const convertedContent = this.originalContent.replace(/<br\s*\/?>/gi, '\n');
this.yourFormGroup.patchValue({
  editorField: convertedContent
});

你可以先试第一种方法，不行再换直接操作编辑器实例的方式，后者通常能绕过表单处理带来的兼容性问题。

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