我正在开发一个 Angular 应用程序,我从 CKEditor 创建的 API 接收 HTML 内容。内容包括 iframe 和其他 HTML 数据。我尝试使用 bypassSecurityTrustHtml 和 bypassSecurityTrustUrl 这两种方法来清理内容,但它只是忽略了内容中的 iframe 部分并显示剩余部分。我附上了管道代码和全部内容,请指导我哪里错了。
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Pipe({ name: 'sanitizeHtml' })
export class SanitizeHtmlPipe implements PipeTransform {
constructor(private _sanitizer: DomSanitizer) { }
transform(value: string): SafeHtml {
return this._sanitizer.bypassSecurityTrustHtml(value);
}
}
// Raw Content
const data = `
<p><span style='background-color:rgb(255,255,255);color:rgb(96,96,96);font-size:16px;'>ab</span><br><br><span style='background-color:rgb(255,255,255);color:rgb(96,96,96);font-size:16px;'><strong>ab</span><br><br><span style='background-color:rgb(255,255,255);color:rgb(96,96,96);font-size:16px;'>The Transaction values </span><span style='background-color:rgb(255,255,255);color:rgb(96,96,96);font-size:16px;'><strong> </strong>ab</span><br><br><span style='background-color:rgb(255,255,255);color:rgb(96,96,96);font-size:16px;'>ab.</span><br><br><span style='background-color:rgb(255,255,255);color:rgb(96,96,96);font-size:16px;'>On Sensex, Bharti Airtel closed at Rs520.90 per piece up 0.7%.</span></p><figure class='image'><img src='https://storage.googleapis.com/app-uploads-dev/rta/media/image/large/1617277508210.jpg' alt='Airtel'></figure><p> </p><p> </p><figure class='media'><div data-oembed-url='https://www.youtube.com/watch?v=lfKY0C7p8Qo'><div style='position: relative; padding-bottom: 100%; height: 0; padding-bottom: 56.2493%;'><iframe src='https://www.youtube.com/embed/lfKY0C7p8Qo' style='position: absolute; width: 100%; height: 100%; top: 0; left: 0;' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen=''></iframe></div></div></figure><figure class='table'><table><tbody><tr><td>Stock </td><td>Bse</td></tr><tr><td>type</td><td>NSE</td></tr></tbody></table></figure><h2><br> </h2>`
<span [innerHTML]="data | sanitizeHtml">