如何在PrimeNG p-editor中保存编辑文件且不含冗余HTML内容

问题根源 #

PrimeNG的p-editor基于Quill富文本编辑器，默认绑定的ngModel或表单控件值是HTML格式的字符串，直接保存该值会导致后端存储<p>、<br>这类标签；重复编辑时编辑器还会自动生成空标签，进一步加剧问题。

具体解决方案 #

1. 保存纯文本（无需保留格式）

如果不需要保留富文本格式，直接通过Quill API提取纯文本后再保存：

// 模板中给编辑器添加模板引用变量
// <p-editor #editor [(ngModel)]="editorContent"></p-editor>

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

export class YourComponent {
  @ViewChild('editor') editor: Editor;
  editorContent: string;

  save() {
    // 获取纯文本内容并去除首尾空白
    const plainText = this.editor.getQuill().getText().trim();
    // 将plainText提交到后端保存
  }
}

2. 保留富文本格式，正确渲染内容

如果需要保留格式，保存时仍存储HTML字符串，但展示时使用innerHTML渲染，而非直接输出原始字符串：

<!-- 保存时正常提交editorContent -->
<p-editor [(ngModel)]="editorContent"></p-editor>

<!-- 展示保存的内容时 -->
<div [innerHTML]="savedContentFromBackend"></div>

3. 清理自动生成的空标签

针对编辑器自动生成的<p></p>、<br></br>这类空标签，可在保存前用正则清理：

cleanRedundantTags(html: string): string {
  return html
    // 移除空p标签
    .replace(/<p>\s*<\/p>/g, '')
    // 移除单/双标签形式的br
    .replace(/<br\s*\/?>|<br><\/br>/g, '')
    // 移除多余空格
    .trim();
}

save() {
  const cleanedHtml = this.cleanRedundantTags(this.editorContent);
  // 提交cleanedHtml到后端
}

4. 自定义编辑器工具栏，减少自动标签生成

通过自定义toolbar屏蔽不必要的格式按钮，降低编辑器自动生成冗余标签的概率：

<p-editor [(ngModel)]="editorContent" [toolbar]="customToolbar"></p-editor>

customToolbar = [
  ['bold', 'italic', 'underline'],
  ['orderedlist', 'unorderedlist'],
  ['link']
];

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