ckeditor内容中的角度图像大小问题
ckeditor内容中的角度图像大小问题
提问于 2019-02-15 13:38:43
我使用CKEditor来创建富文本字段，这些字段存储在我的后端数据库中。我的问题是:当我通过CKEditor向这些字段添加图像时，宽度和高度属性是用样式标记中的CSS设置的，如下所示：
<img
alt=""
src="https://something.cloudfront.net/something.jpg"
style="height:402px; width:716px"
/>当我尝试在angular中显示包含上述代码的富文本字段时，如下所示：
<p class="card-text" [innerHTML]="blogEntry.content"></p>Angular生成以下代码，但不包含包含height和width属性的内联CSS：
<img alt="" src="https://something.cloudfront.net/something.jpg">这会导致图像以原始大小显示，而不考虑使用CKEditor设置的高度和宽度属性。
我不希望高度和宽度属性被丢弃。这个问题的理想解决方案是什么？如果你能帮忙，我会很高兴的。谢谢。
回答 1
Stack Overflow用户
发布于 2019-02-15 17:38:05
您必须为要注入的内容设置适当的安全上下文。
默认情况下，angular会清理您注入到HTML中的所有内容。但请注意，这是一个潜在的安全风险。
有关angular安全设置的所有信息，请参阅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的默认安全上下文带来的风险！只使用它，如果你百分之百信任它的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54703250
复制相关文章
相似问题
腾讯云开发者
