Angular Kolkov编辑器绑定FormControl后编辑时HTML源码显示异常

问题说明 #

使用Angular Kolkov编辑器结合FormControl开发时，提交数据能正常保存HTML格式，但编辑数据时，编辑器显示的是转义后的HTML源码（如<ul><li>ccccc</li><li>aaaa</li><li>bbbb</li></ul>），而非渲染后的列表内容。

问题原因 #

后端返回的task_note字段是转义后的HTML字符串（包含<、>等转义字符），编辑器无法直接识别这些转义字符为HTML标签，因此将其当作普通文本显示。

解决方案 #

在将后端数据赋值给FormControl之前，先对转义的HTML字符串进行解码，还原成原始HTML内容，再传递给编辑器。

步骤1：导入并注入DomSanitizer #

在组件的.ts文件中导入DomSanitizer并注入到构造函数：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AngularEditorConfig } from '@kolkov/angular-editor';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  tasksFormGroup!: FormGroup;
  // 保留原有编辑器配置
  editorConfig: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: 'auto',
    minHeight: '0',
    maxHeight: 'auto',
    width: 'auto',
    minWidth: '0',
    translate: 'yes',
    enableToolbar: true,
    showToolbar: true,
    defaultParagraphSeparator: '',
    defaultFontName: '',
    defaultFontSize: '',
    fonts: [
      { class: 'arial', name: 'Arial' },
      { class: 'times-new-roman', name: 'Times New Roman' },
      { class: 'calibri', name: 'Calibri' },
      { class: 'comic-sans-ms', name: 'Comic Sans MS' },
    ],
    customClasses: [
      {
        name: 'quote',
        class: 'quote',
      },
      {
        name: 'redText',
        class: 'redText',
      },
      {
        name: 'titleText',
        class: 'titleText',
        tag: 'h1',
      },
    ],
    uploadUrl: 'v1/image',
    uploadWithCredentials: false,
    sanitize: false,
    toolbarPosition: 'top',
    toolbarHiddenButtons: [
      [
        'undo',
        'redo',
        'strikeThrough',
        'subscript',
        'superscript',
        'indent',
        'outdent',
        'heading',
      ],
      [
        'textColor',
        'backgroundColor',
        'customClasses',
        'link',
        'unlink',
        'insertImage',
        'insertVideo',
        'insertHorizontalRule',
        'removeFormat',
        'toggleEditorMode',
      ],
    ],
  };

  constructor(
    private formBuilder: FormBuilder,
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit(): void {
    this._initTasksForm();
    this.loadTaskData(); // 加载后端数据
  }

  private _initTasksForm() {
    this.tasksFormGroup = this.formBuilder.group({
      contact_owner: ['', Validators.required],
      priority: ['', Validators.required],
      task_type: ['', Validators.required],
      task_reminder: ['', Validators.required],
      custom_reminder: [''],
      date_time: ['', Validators.required],
      task_note: ['', Validators.required],
      isClosed: [''],
    });
  }

步骤2：添加HTML解码辅助函数 #

在组件类中添加解码转义HTML的工具函数：

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

步骤3：解码数据并赋值给表单 #

获取后端数据后，解码task_note并通过patchValue赋值给FormControl：

private loadTaskData() {
  // 模拟后端返回的任务数据
  const taskData = {
    "_id": "670cb62498a51532489dd41f",
    "customer_id": "OGYCON1728883573551",
    "createdBy": "OGYU1728878104362",
    "type": "tasks",
    "priority": "None",
    "param": {
      "contact_owner_unqid": "OGYU1728878104362",
      "priority": "None",
      "task_type": "To-do",
      "task_reminder": "No reminder",
      "custom_reminder": "",
      "date_time": "2024-10-18T06:11:32.000Z",
      "task_note": "<ul><li>tesss</li><li>decfecfc</li></ul>",
      "isClosed": false,
      "contact_owner": "userabc",
      "contact_name": "no-name"
    },
    "unqid": "OGYPRO1728886308384",
    "org_id": "ORG1728531905160",
    "created_at": "2024-10-14T06:11:48.451Z",
    "updated_at": "2024-10-14T06:11:48.451Z",
    "__v": 0
  };

  // 解码HTML并处理安全信任
  const decodedNote = this.sanitizer.bypassSecurityTrustHtml(this.decodeHtml(taskData.param.task_note));
  
  // 赋值表单字段
  this.tasksFormGroup.patchValue({
    contact_owner: taskData.param.contact_owner,
    priority: taskData.param.priority,
    task_type: taskData.param.task_type,
    task_reminder: taskData.param.task_reminder,
    custom_reminder: taskData.param.custom_reminder,
    date_time: taskData.param.date_time,
    task_note: decodedNote,
    isClosed: taskData.param.isClosed
  });
}
}

关键说明 #

• 保持编辑器配置中sanitize: false，避免编辑器自动过滤HTML内容。
• 使用DomSanitizer.bypassSecurityTrustHtml确保Angular不会将解码后的HTML标记为不安全内容。

内容的提问来源于stack exchange，提问作者Joshna J.U