如何在Angular的contenteditable可编辑字段中渲染base64格式图片

1. 从数据库读取的img标签字符串转可渲染HTML的方法 #

你遇到的纯文本展示问题有两个核心原因：一是你存到数据库的内容是HTML实体编码后的转义文本，二是Angular默认会对动态插值内容做安全转义，避免XSS攻击，不会直接将字符串解析为DOM节点，你可以直接用以下两种Angular生态的便捷方案处理：

• 方案1：直接渲染到页面
  先做HTML实体解码，再配合Angular的[innerHTML]绑定和安全管道实现渲染：
  第一步，写HTML实体解码工具函数：

  function decodeHtml(html: string): string {
    const txt = document.createElement('textarea');
    txt.innerHTML = html;
    return txt.value;
  }
  

  第二步，写安全管道跳过Angular默认的安全校验（注意提前确保你存入数据库的内容没有恶意脚本，避免XSS风险）：

  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);
    }
  }
  

  第三步，模板里直接绑定即可：

  <div [innerHTML]="decodeHtml(你从数据库取出的内容) | safeHtml"></div>
  

• 方案2：转成DOM对象做后续操作
  如果你需要拿到img的DOM实例做属性修改、事件绑定等操作，可以用DOMParser直接解析：

  const parser = new DOMParser();
  // 先解码实体再解析为DOM树
  const doc = parser.parseFromString(decodeHtml(你从数据库取出的内容), 'text/html');
  const imgDomList = doc.querySelectorAll('img'); // 直接拿到所有img的DOM对象集合
  

2. img标签和文本混合内容的分离原则 #

不要手写正则匹配HTML标签，HTML的标签格式、属性写法灵活度很高，正则很难覆盖所有边界场景，遵循以下通用原则即可：

• 优先用原生DOM解析能力拆分：把整段混合内容用DOMParser转成DOM树之后，遍历所有节点，通过nodeType区分类型：nodeType === 3是纯文本节点，nodeType === 1且tagName === 'IMG'是图片节点，即可100%精准分离两类内容。
• 存储前置优化：如果你的业务场景需要频繁拆分两类内容，可以在富文本内容序列化存入数据库的阶段，就把内容按节点类型拆成结构化数组存储，示例结构如下：

  interface ContentItem {
    type: 'text' | 'image';
    value: string; // text类型存文本内容，image类型存base64地址
  }
  

  后续读取的时候直接按类型渲染/处理即可，不需要额外做内容拆分。
• 安全校验前置：不管是拆分还是渲染阶段，所有img的src属性都要提前校验格式，确保是合法的图片资源地址，避免恶意脚本注入。

内容的提问来源于stack exchange，提问作者Wayne Wei