Angular 5中Quill WYIWYG存入Firestore的数据取回后显示HTML标签未渲染

嘿，我之前也碰到过这个问题！你现在看到HTML标签直接显示而不是渲染后的效果，主要是两个原因：要么是存到Firestore的内容格式不对，要么是Angular的安全机制拦截了动态HTML的渲染。咱们一步步来解决：

Quill编辑器默认用Delta格式存储内容（一种结构化的内容描述），如果你存的是Delta而不是纯HTML，那取回来自然没法直接渲染成页面效果。确保你存的是编辑器生成的HTML：

// 获取Quill编辑器的HTML输出
const quillHtml = this.quillEditor.root.innerHTML;
// 将HTML存入Firestore
this.firestore.collection('your-collection').add({ content: quillHtml });

Angular为了防止XSS攻击，默认会把动态获取的HTML标记为“不安全”，直接插值的话会当成纯文本显示。这时候需要用DomSanitizer把它转为安全的可渲染内容：

首先在组件中引入并注入DomSanitizer：

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  safeContent: SafeHtml;

  constructor(
    private firestore: AngularFirestore,
    private sanitizer: DomSanitizer
  ) {
    this.loadContent();
  }

  loadContent() {
    // 从Firestore取回数据
    this.firestore.collection('your-collection').doc('your-document-id').get()
      .subscribe(doc => {
        const rawHtml = doc.data()?.content;
        // 将原始HTML转为安全的可渲染内容
        this.safeContent = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
      });
  }
}

在组件模板里，不要用普通的插值表达式（{{}}），而是用[innerHTML]绑定到处理后的safeContent变量，这样Angular才会渲染HTML内容：

<!-- ❌ 错误：会直接显示HTML标签 -->
<div>{{ safeContent }}</div>

<!-- ✅ 正确：渲染HTML为页面元素 -->
<div [innerHTML]="safeContent"></div>

如果你之前存的是Quill的Delta数据（用this.quillEditor.getContents()获取的），那取回后应该用Quill自身的API加载内容，而不是转HTML：

loadContent() {
  this.firestore.collection('your-collection').doc('your-document-id').get()
    .subscribe(doc => {
      const deltaContent = doc.data()?.content;
      // 用Quill加载Delta内容到编辑器
      this.quillEditor.setContents(deltaContent);
    });
}

这样处理后，你应该就能看到渲染后的HTML效果，而不是原始标签啦！

内容的提问来源于stack exchange，提问作者Praveen raj