在使用富文本编辑时候,经常会遇到把html通过模板赋值输出到页面的问题。在经过后端处理之后,直接使用{{}}模板赋值输出会得到带”<>”的html标签。
这当然不是我们想要的效果。如果是用angular1,这时候就要用到ng-bind-html这个指令。
配合$sce.trustAsHtml使用,
界面效果就出来了--
如果使用的是angular2或者以上,要输出html为内容,过程也大同小异,用的是[innerHTML]这个指令
配合DomSanitizer使用,
自定义assembleHTML方法,
这样就可以直接输出为HTML了。
其他诸如此类的方法,例如图片URL有unsafe:前缀。就可以用sanitizer.bypassSecurityTrustUrl(url) 过滤一下。
sanitizer.bypassSecurityTrustScript(script)
sanitizer.bypassSecurityTrustStyle(style)
sanitizer.bypassSecurityTrustResourceUrl(rurl)