Question

我正在使用CKEditor来创建RTF文本字段，这些字段存储在后端数据库中。我的问题是：当我通过CKEditor将图像添加到这些字段时，width和height属性是在CSS中的样式标签中设置的，例如：

<img
  alt=""
  src="https://something.cloudfront.net/something.jpg" 
  style="height:402px; width:716px"
/>

当我尝试以如下角度显示包含以上代码的富文本字段时：

<p class="card-text" [innerHTML]="blogEntry.content"></p>

Angular生成以下代码，但不包含包含height和width属性的内联CSS：

<img alt="" src="https://something.cloudfront.net/something.jpg">

这将导致图像以原始大小显示，而与使用CKEditor设置的高度和宽度属性无关。

我不希望放弃height和width属性。解决这个问题的理想解决方案是什么？如果您能帮助我，我将很高兴。谢谢。

Answer 1

您必须为要注入的内容设置适当的安全上下文。

默认情况下，angular会清除注入HTML的所有内容。但是请注意，这是潜在的安全风险

有关角度安全设置的所有信息，请参见https://angular.io/guide/security。

有关如何绕过安全上下文的信息，请参见https://angular.io/guide/security#bypass-security-apis。

这是您可以在组件中使用的示例函数：

constructor(private sanitizer: DomSanitizer) {}

public createTrustedHtml(blogContent: string) {
   return this.sanitizer.bypassSecurityTrustHtml(blogContent);
}

并在您的模板中

<p class="card-text" [innerHTML]="createTrustedHtml(blogEntry.content)"></p>

始终要注意绕过angular的默认安全上下文所带来的风险！如果您100％信任内容，请仅使用它。这可能会带来潜在的安全风险，并为XSSI和CSRF / XSRF攻击打开大门。

ckeditor内容中的角度图像大小问题

1 个答案: