如何使用 angular 中的 innerHTML 属性清理混合的 html 内容和预览

问题描述

我正在开发一个 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,96);font-size:16px;'><strong>ab</span><br><br><span style='background-color:rgb(255,96);font-size:16px;'>The Transaction values </span><span style='background-color:rgb(255,96);font-size:16px;'><strong> </strong>ab</span><br><br><span style='background-color:rgb(255,96);font-size:16px;'>ab.</span><br><br><span style='background-color:rgb(255,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>&nbsp;</p><p>&nbsp;</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&nbsp;</td><td>Bse</td></tr><tr><td>type</td><td>NSE</td></tr></tbody></table></figure><h2><br>&nbsp;</h2>`

<span [innerHTML]="data | sanitizeHtml">

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）