如何在Quill.js编辑的PrimeNG Table单元格中隐藏HTML标签？

• 直接获取纯文本绑定
  若不需要保留富文本格式，从Quill编辑器取内容时用getText()获取纯文本，而非getHTML()，绑定到表格单元格的就是无标签的文本：

  const plainContent = quillInstance.getText();
  // 将plainContent赋值给表格绑定的数据字段
  

• 渲染HTML内容而非显示原始标签
  若要保留富文本格式，在PrimeNG表格的列模板里用[innerHTML]指令解析HTML，让浏览器渲染格式而非显示标签：

  <p-column header="编辑内容">
    <ng-template let-row pTemplate="body">
      <div [innerHTML]="row.editContent"></div>
    </ng-template>
  </p-column>
  

  为避免XSS风险，需用Angular的DomSanitizer处理HTML内容：

  import { Component } from '@angular/core';
  import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
  
  @Component({
    // 组件元数据
  })
  export class YourComponent {
    constructor(private sanitizer: DomSanitizer) {}
  
    sanitizeHtml(html: string): SafeHtml {
      return this.sanitizer.bypassSecurityTrustHtml(html);
    }
  }
  

  模板中修改为：

  <div [innerHTML]="sanitizeHtml(row.editContent)"></div>
  

• 限制Quill生成的HTML标签
  通过配置Quill工具栏，只开放必要的格式选项，减少不必要的HTML标签生成：

  const quill = new Quill('#editor', {
    toolbar: [['bold', 'italic'], ['link', 'list']] // 仅保留需要的格式按钮
  });
  

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