使用quill-view-html展示多个ngx-quill输入时下方内容被隐藏的问题咨询

这不是ngx-quill的默认特性，问题通常出在渲染逻辑、样式或内容合法性上，以下是具体的排查和解决方向：

• 检查容器样式与布局
  给每个quill-view-html组件添加独立的包裹容器（如<div class="quill-view-wrapper">），排查是否存在以下样式问题：

  • 组件或其父容器设置了position: absolute、height: 100%，导致挤压下方内容的布局空间
  • 组件的z-index值过高，覆盖了下方元素
  • 容器的overflow: hidden属性意外截断了后续内容

• 修正循环渲染逻辑
  如果用*ngFor批量渲染组件，必须绑定trackBy函数避免Angular重复渲染引发DOM异常：

  // 组件类中定义trackBy函数
  trackByQuillContent(index: number, content: string): number {
    return index;
  }
  

  模板中使用：

  <div *ngFor="let htmlContent of quillContentArray; trackBy: trackByQuillContent">
    <quill-view-html [content]="htmlContent"></quill-view-html>
  </div>
  

• 确保HTML内容合法安全
  传入的Quill编辑器内容如果存在未闭合标签、恶意HTML，会破坏页面DOM结构，导致后续内容被“吞掉”：

  1. 用Angular的DomSanitizer处理内容，避免安全策略拦截引发的渲染异常：

     import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
     
     constructor(private sanitizer: DomSanitizer) {}
     
     sanitizeQuillContent(content: string): SafeHtml {
       return this.sanitizer.bypassSecurityTrustHtml(content);
     }
     

     模板绑定：

     <quill-view-html [content]="sanitizeQuillContent(htmlContent)"></quill-view-html>
     

  2. 检查Quill输出的HTML，确保所有标签都正确闭合。

• 升级ngx-quill版本
  旧版本的quill-view-html存在DOM渲染bug，升级到最新稳定版（可通过npm install ngx-quill@latest执行），大概率能解决此类兼容性问题。

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