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>

效果：

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

Ionic2 WARNING: sanitizing HTML stripped some content when no content stripped
Web应用程序的安全涉及到很多方面.针对常见的漏洞和攻击,比如跨站脚本攻击,Angular提供了一些内置的保护措施.为了系统性的防范XSS问题,Angular默认把所有值都当做不可信任的. 当值从模板 ...
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
angular4中我用上面的绑定方式去渲染数据的我本身要渲染的数据结构如下之后就给我提示WARNING: sanitizing HTML stripped some content (see ht ...
LayUi前端框架删除数据缓存问题（解决删除后刷新页面内容又会显示问题）
LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题) 参考文章: (1)LayUi前端框架删除数据缓存问题(解决删除后刷新页面内容又会显示问题) (2)https://www.cn ...
解决：jsp 页面不全，response 内容不完整
前言:今天 jsp 页面输出不完整这个问题困扰了我几个小时,终于发现问题并解决了. 环境: tomcat 8.0.17 x64 jsp springmvc vue 问题: 本来页面正常,但加了几行代码 ...
angular 解决闪烁问题_AngularJS页面访问时出现页面闪烁问题的解决
我们知道在应用的页面或者组件需要加载数据时,浏览器和angular渲染页面都需要消耗一定的时间.这里的间隔可能很小,甚至让人感觉不到区别:但也可能很长,这样会导致让我们的用户看到了没有被渲染过的页面. ...
android按钮被遮住,解决Android 虚拟按键遮住了页面内容的问题
在启动页的时候华为手机虚拟按键遮挡住了启动页下面的字找了找解决办法,特地记录一下第一种办法:扩展虚拟按键 //状态栏 @ 顶部getWindow().addFlags(WindowManager.L ...
android 覆盖虚拟按键,解决Android 虚拟按键遮住了页面内容的问题
在启动页的时候华为手机虚拟按键遮挡住了启动页下面的字找了找解决办法,特地记录一下第一种办法:扩展虚拟按键 //状态栏 @ 顶部getWindow().addFlags(WindowManager.L ...
vue 点击当前路由怎么重新加载_Vue 路由切换时页面内容没有重新加载的解决方法...
第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了: keep-aliv ...
微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...

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

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

最新文章

热门文章