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之前，是否需要处理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吗？

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

1 个答案: