Angular 8 中的 WYSIWYG 编辑器和 innerHTML

Question

我正在尝试实现一个所见即所得的编辑器并在 HTML 上显示您的内容，但我有两个主要问题......让我们编写代码......

“注册/上传组件 .ts” （我正在使用AngularEditor ）

editorConfig: AngularEditorConfig = {
        editable: true,
        spellcheck: true,
        height: 'auto',
        minHeight: '300px',
        maxHeight: 'auto',
        width: 'auto',
        enableToolbar: true,
        showToolbar: true,
        placeholder: 'Enter text here...',
        sanitize: true,
        toolbarPosition: 'top',
        toolbarHiddenButtons: [
            ['strikeThrough', 'superscript', 'subscript'],
            ['heading', 'fontName', 'fontSize', 'color'],
            ['justifyFull', 'indent', 'outdent'],
            ['cut', 'copy', 'delete', 'removeFormat', 'undo', 'redo'],
            ['paragraph', 'removeBlockquote'],
            ['textColor', 'backgroundColor'],
            ['insertImage', 'insertVideo'],
            ['link', 'unlink', 'image', 'video'],
            ['toggleEditorMode'],
        ],
    };

“注册/上传组件 .html”

<angular-editor
  formControlName="description"
  [config]="editorConfig"
></angular-editor>

问题 1：这里一切正常。 但是当我去更新值时，在编辑器中显示原始 HTML 而不是格式化文本......我该如何解决这个问题？

我的另一个问题是，innerHTML 不适用于来自数据库的数据。

<div class="breaklines" [innerHTML]="prop.description | safeHtml"></div> <--- NOT WORK
<div class="breaklines" [innerHTML]="'<strong>text directly</strong>'"></div> <--- WORK, even the same content

我创建了安全 html 的管道：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({ name: 'safeHtml', pure: false })
export class SafeHtml implements PipeTransform {
    constructor(private sanitizer: DomSanitizer) {}

    transform(content) {
        return this.sanitizer.bypassSecurityTrustHtml(content);
    }
}

问题 2：在尝试绑定之前，我需要处理我的 HTML 保存在数据库中吗？

谢谢大家！

更新我发现为什么innerHTML 不能与保存的代码一起使用。 当我获取代码时，所有 HTML 标签中的代码都是 < 而不是 <。 然后我做了一个简单的替换，一切正常

this.desc = prop.description.replace(/&lt;/g, '<');
<div class="breaklines" [innerHTML]="desc | safeHtml"></div>

现在，当我要更新信息时，我只需要知道如何在编辑器中格式化 html ......谢谢！

Answer 1

我认为将 html 保存在数据库中不会改变任何事情。 似乎您目前正在对您的输入进行两次消毒：

• 一次在SafeHtml
• 一旦在您的编辑器配置sanitize: true,

您可能会尝试在编辑器配置中将 sanitize 设置为 false ？