Angular11自动转义HTML标签，如何实现textarea富文本编辑字段跳过安全校验？

问题核心说明 #

Angular没有「单独为单个输入字段关闭HTML安全转义校验」的配置，你遇到的转义问题是使用[innerHTML]渲染时才会触发的机制，而textarea的value本身只处理纯文本，完全可以绕开这个限制。

适配需求的实现方案 #

方案1：纯字符串操作（最符合你的需求） #

你不需要把<a>渲染成真实DOM节点，只需要把标签作为纯字符串插入到内容中即可，完全支持双向绑定，不会触发Angular的转义逻辑：

1. 模板中正常使用[(ngModel)]绑定字符串变量，绑定选中事件：

<textarea 
  [(ngModel)]="editorContent" 
  (mouseup)="wrapSelectionWithAnchor()"
  rows="10"
  cols="50"
></textarea>

2. 组件逻辑中直接操作文本字符串插入标签：

// 组件内代码
editorContent: string = '';

// 从接口获取初始值
fetchContent() {
  this.http.get('你的接口地址').subscribe((res: string) => {
    this.editorContent = res;
  })
}

wrapSelectionWithAnchor() {
  const textareaEl = document.querySelector('textarea') as HTMLTextAreaElement;
  const selectStart = textareaEl.selectionStart;
  const selectEnd = textareaEl.selectionEnd;
  // 没有选中内容直接返回
  if (selectStart === selectEnd) return;

  const selectedStr = this.editorContent.slice(selectStart, selectEnd);
  const wrappedStr = `<a>${selectedStr}</a>`;
  // 替换原内容
  this.editorContent = this.editorContent.slice(0, selectStart) + wrappedStr + this.editorContent.slice(selectEnd);
  // 重置光标位置到插入内容末尾
  setTimeout(() => {
    textareaEl.selectionStart = textareaEl.selectionEnd = selectStart + wrappedStr.length;
  }, 0)
}

// 提交内容
submit() {
  // 这里直接把editorContent传给后端，就是未转义的带<a>标签的完整字符串
  this.http.post('提交接口', { content: this.editorContent }).subscribe();
}

该方案完全满足你的需求：双向绑定正常可用，Angular不会对字符串内的HTML标签做任何转义，提交的内容就是你要的原始字符串。

方案2：需要渲染成可点击富文本的场景 #

如果你需要把<a>渲染成真实可点击的链接，而不是显示为纯文本，可以配合DomSanitizer手动标记内容为安全，同时自定义双向绑定逻辑：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-rich-editor',
  template: `<div contenteditable [innerHTML]="safeContent" (input)="onContentChange($event)"></div>`
})
export class RichEditorComponent {
  private _content = '';
  @Input() 
  get content() {
    return this._content;
  }
  @Output() contentChange = new EventEmitter<string>();
  safeContent: SafeHtml = '';

  constructor(private sanitizer: DomSanitizer) {}

  set content(val: string) {
    this._content = val;
    // 手动标记内容安全，Angular不会再转义标签
    this.safeContent = this.sanitizer.bypassSecurityTrustHtml(val);
    this.contentChange.emit(val);
  }

  onContentChange(e: Event) {
    this.content = (e.target as HTMLElement).innerHTML;
  }
}

父组件中可以直接用[(ngModel)]绑定使用：

<app-rich-editor [(content)]="editorContent"></app-rich-editor>

注意事项 #

不要全局关闭Angular的安全校验机制，会引入XSS注入风险，上述方案都是在可控范围内处理内容，不会影响应用全局的安全防护。

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