Angular如何正确渲染TinyMCE编辑器存储的带格式HTML富文本内容？

你遇到的渲染异常是Angular默认安全策略导致的：为了防范XSS跨站脚本攻击，Angular默认会转义所有插值传入的HTML标签，把标签当成纯文本展示，不会解析执行，按以下步骤即可实现格式无损渲染。

具体实现步骤 #

• 第一步：创建安全信任管道
  首先创建安全管道，把富文本内容标记为Angular信任的安全资源，代码如下：

  // safe-html.pipe.ts
  import { Pipe, PipeTransform } from '@angular/core';
  import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
  
  @Pipe({ name: 'safeHtml' })
  export class SafeHtmlPipe implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}
  
    transform(value: string): SafeHtml {
      return this.sanitizer.bypassSecurityTrustHtml(value);
    }
  }
  

  之后在你使用卡片组件的对应模块中引入该管道：

  @NgModule({
    declarations: [
      // 原有组件、管道
      SafeHtmlPipe
    ]
  })
  export class YourModule { }
  

• 第二步：模板中绑定innerHTML属性
  在卡片组件模板中，用[innerHTML]绑定从接口拿到的富文本HTML内容，同时套用上面的安全管道：

  <div class="blog-card">
    <!-- 卡片其他内容：标题、作者、发布时间等 -->
    <div class="blog-content" [innerHTML]="blogDetail.content | safeHtml"></div>
  </div>
  

• 第三步：解决富文本样式不生效问题
  Angular默认的组件样式隔离机制会给组件内的样式加专属属性选择器，富文本里的标签没有对应属性会导致样式不生效，两种解决方式二选一即可：

  1. 把所有富文本相关的标签样式（p、h1~h6、ul、ol、img等）写到全局styles.scss/styles.css文件中，统一管控全站点博客内容的展示样式
  2. 在卡片组件的@Component配置中关闭样式隔离，同时给富文本外层加专属类名避免污染全局样式：

  import { ViewEncapsulation } from '@angular/core';
  
  @Component({
    selector: 'app-blog-card',
    templateUrl: './blog-card.component.html',
    styleUrls: ['./blog-card.component.scss'],
    encapsulation: ViewEncapsulation.None // 关闭样式隔离
  })
  

  对应样式文件所有富文本规则都加外层类名前缀：

  .blog-content {
    p {
      margin: 12px 0;
      line-height: 1.6;
    }
    h2 {
      font-size: 24px;
      margin: 20px 0 10px;
    }
    // 其他需要支持的标签样式
  }
  

注意事项 #

• 安全风险规避：使用bypassSecurityTrustHtml会跳过Angular默认的XSS防护，你需要做两层过滤保障安全：TinyMCE编辑器层面配置禁用script、iframe等危险标签输入；后端存储HTML到数据库之前，再次做标签白名单过滤，只保留你允许的富文本标签。
• 可选优化方案：如果后续需要支持更灵活的内容格式，也可以调整配置让TinyMCE同时输出Markdown格式内容存储，前端用专门的Markdown渲染库解析，安全性相对更高，但需要调整编辑器配置和存储结构，你当前的场景用上述HTML渲染方案已经完全够用。

内容的提问来源于stack exchange，提问作者Subhodeep bhowmick