iframe 在 kolkov 角度编辑器中不起作用 [关闭]答案

【问题标题】：Iframe doesn't work in kolkov angular editor [closed]iframe 在 kolkov 角度编辑器中不起作用 [关闭]
【发布时间】：2020-12-22 07:17:38
【问题描述】：

Kolkov 角度编辑器不支持 Iframe。

包裹：https://www.npmjs.com/package/@kolkov/angular-editor

在编辑器中，它看起来可以正常工作，但前面板没有显示任何内容

预期结果是：

【问题讨论】：

标签： angular iframe wysiwyg html-editor

【解决方案1】：

为此，您需要在角度编辑器配置中进行更改： 您需要设置 sanitize: false。

config: AngularEditorConfig = {
    sanitize: false,
  .........................
  };

由于 senetize:false chrome 在前端给你一个这样的错误：

警告：清理 HTML 会删除一些内容（请参阅 http://g.co/ng/security#xss）。

您可以通过创建自定义管道来清理 HTML 来修复此错误：

sanitize-html.pipe.ts

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(v: string): SafeHtml {
    return this._sanitizer.bypassSecurityTrustHtml(v);
  }
}

在 HTML 中

<p *ngIf="appMessageData" [innerHTML]="appMessage | sanitizeHtml"></p>

这会帮助你:)

【讨论】：

没有比这更好的答案了。谢谢！