Angular 12 如何保存[innerHTML]渲染内容的编辑修改到变量

• Angular的[innerHTML]属于单向渲染绑定，仅负责将绑定值同步到DOM结构，用户对DOM的手动修改（包括contenteditable区域的编辑操作）不会自动回写到绑定的数据源变量
• 调用bypassSecurityTrustHtml处理后返回的是SafeHtml类型对象，并非原始HTML字符串，本身不支持直接同步DOM侧的变更
• 动态插入的contenteditable元素没有绑定Angular响应式事件，编辑动作不会触发框架的变更检测来回传值

1. 拆分存储原始值与渲染用安全值 #

不要直接将安全处理后的对象存入文档原属性，分开存储原始HTML字符串和供模板渲染的安全值，避免原始值被污染：

import { Component, ElementRef, ViewChild } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

// 组件内声明变量
originalDocHtml: string;
safeRenderHtml: SafeHtml;
@ViewChild('docContainer') docContainer: ElementRef<HTMLDivElement>;

constructor(private sanitized: DomSanitizer) {}

// 拿到后端返回的CMDocument数据后初始化
initDocumentData(doc: CMDocument) {
  this.originalDocHtml = doc.htmlString;
  this.safeRenderHtml = this.sanitized.bypassSecurityTrustHtml(this.originalDocHtml);
}

模板侧调整渲染代码，绑定安全值同时给容器加模板引用标记：

<div 
  class="border mt-4 p-4" 
  [innerHTML]="safeRenderHtml"
  #docContainer
></div>

2. 委托监听编辑事件，同步DOM内容回数据源 #

动态插入的contenteditable元素无法直接在模板上绑定事件，通过事件委托的方式在容器层监听编辑事件，每次内容变更时将当前DOM的完整HTML同步回变量即可：

ngAfterViewInit() {
  const container = this.docContainer.nativeElement;
  // 监听可编辑区域的输入事件：input事件实时触发，blur事件仅失焦触发，可按需选择
  container.addEventListener('input', (e: Event) => {
    const editTarget = e.target as HTMLElement;
    if (editTarget.getAttribute('contenteditable') === 'true') {
      // 同步当前容器内完整HTML到原始变量
      this.originalDocHtml = container.innerHTML;
      // 需要更新原CMDocument对象的话直接赋值即可
      // this.document.htmlString = this.originalDocHtml;
    }
  });
}

性能提示：如果文档内容较长、可编辑区域多，建议将监听事件从input换成blur，仅在用户编辑完离开可编辑区域时同步内容，减少不必要的赋值操作

3. 提交时直接取用同步后的内容 #

后续提交文档时，直接读取this.originalDocHtml或者对应CMDocument实例的htmlString属性，就是用户编辑完成后的完整HTML内容，无需额外遍历DOM提取值。

• 编辑过程中不要重新给safeRenderHtml赋值，否则会重新渲染DOM覆盖用户已输入内容，还会导致输入光标跳转到区域开头的问题
• 如果文档内包含input、select、textarea这类原生表单控件，可以在事件委托中追加对应元素的change、input事件监听，同步这些控件的选中/输入值
• 如果需要做输入校验，可以在事件回调中拿到当前编辑的target元素，单独做格式、长度限制处理

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