Angular 8 中的所见即所得编辑器和 innerHTML答案

【问题标题】：WYSIWYG editor and innerHTML in Angular 8Angular 8 中的所见即所得编辑器和 innerHTML
【发布时间】：2020-05-19 11:30:29
【问题描述】：

我正在尝试实现一个所见即所得的编辑器并在 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...谢谢！

【问题讨论】：

支持它是你的 formGroup？
是的，它实际上是我在后端获取项目的订阅服务。
好的，但是当后端返回时，您应该修补表单，它将在编辑器和 HTML“预览”上更新。你在做这个吗？
是的，我在表单上做了一个 patchValue

标签： javascript html node.js angular typescript

【解决方案1】：

我不认为将您的 html 保存在数据库中会改变任何事情。看来您目前正在清理您的输入两次：

一次在SafeHtml
曾经在你的编辑器配置sanitize: true,

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

【讨论】：

问题是数据库中的字符串带有<而不是