Angular：解决innerHTML绑定页面内容，sanitizing HTML stripped some content警告处理和富文本背景色样式无法正常显示的问题

背景：在系统中使用quill富文本编辑器，使用的版本是ngx-quill@4.0.0，具体使用方法参见我的另一篇博客 Angular：ngx-quill富文本编辑器的使用（地址：https://blog.csdn.net/qq_36451496/article/details/88971422）

其中用富文本编辑好的表单内容这样在页面上展示：

 <div nz-col [nzSpan]="18">
      <nz-form-item nzFlex>
         <nz-form-label nz-col [nzRequired]="!isReadOnly" [nzSpan]="10" nzFor="content">消息内容</nz-form-label>
           <nz-form-control nz-col [nzSpan]="14">
              <ng-container>
                 <div [innerHTML]="this.validateForm.controls.content.value"></div>
              </ng-container>
           </nz-form-control>
        </nz-form-item>
  </div>

像这样使用innerHTML直接绑定表单中的content的值，会发现页面上明明拿到了完整的html代码，却显示不出富文本中的字体颜色和字体背景色这两个属性。

另外打开控制台，发现有警告：

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

 

查了一下好像意思是说HTML上的一些内容被清理了，这样也就导致了innerHTML中绑定的内容显示不完整。解决方法就是：使用bypassSecurityTrustHtml 这个来进行转换。

话不多说，直接上代码：

我们在html绑定的使用ts文件的定义的一个专门用来显示的字段viewContent，

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


@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.scss']
})

export class ViewComponent implements OnInit {
  viewContent: any;       // 定义这个字段用来转换显示

constructor(
     .....
    private sanitizer: DomSanitizer
  ) {
  }


initFormData(data) {
     .....
    this.validateForm.controls['content'].setValue(data.content);
    this.viewContent = this.sanitizer.bypassSecurityTrustHtml(data.content);    // 在这里将表单content这个字段的内容进行转化即可
     .....
  }
}

这样再运行就不会有警告啦，innerHTML内容也显示正常啦！

---

7月19日修改补充：

发现quill富文本中一些样式使用innerHTML直接显示的时候失效了，查了下原因，是因为quill.js这个富文本编辑器自身的问题了，由于这个编辑器的文本样式大多是使用自定义css渲染的（注意下面代码的class="ql-xxx-xxx"），所以相当于编辑器的内容样式仅在此网页有效。

想要解决有的样式无法正常显示的问题，只需要把上面用于显示的代码替换成下面这样就好了：

<div nz-col [nzSpan]="18">
   <nz-form-item nzFlex>
     <nz-form-label nz-col [nzRequired]="!isReadOnly" [nzSpan]="10" nzFor="content">消息内容 
     </nz-form-label>
   <nz-form-control nz-col [nzSpan]="14">
      <ng-container>
         <div style="line-height:5px;">
           <div class="ql-editor" [innerHTML]="viewContent">
           </div>
          </div>
      </ng-container>
    </nz-form-control>
    </nz-form-item>
 </div>

效果：