javascript - 如何在 Angular 中保存和加载 html WYSIWYG 编辑器中的内容

Question

我想我最终会使用带有 MongoDB 的 Node/express 后端，如果这对这种情况有意义的话......

我最终希望能够将内容从可编辑的 div 保存到后端，以便稍后可以从后端重新上传...然后可以将重新上传的数据放置在不可编辑的位置HTML div 用于显示，或返回内容可编辑 div 进行更多编辑。

有人对此有什么建议吗？也许有一种方法可以保存编辑器 div 中的所有 dom 元素，并且可以将其转换回 HTML 以便渲染？

谢谢，如有任何建议，我们将不胜感激

HTML

  <div>
    <input type="button" (click)="iBold()" value="B">
  </div>
  <div id='editor' contenteditable>
    <h1>A WYSIWYG Editor.</h1>
    <p>Try making some changes here. Add your own text.</p>
  </div>

Angular 分量

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor() { }

  model = '<h1>A WYSIWYG Editor.</h1><p>Try making some changes here.     Add your own text.</p>';

  editor: any;

  ngOnInit() {
    this.editor = document.getElementById('editor');
  }
  iBold() {
    document.execCommand('bold', false, null);

  }

}

Answer 1

我要添加第二个答案，因为我可能误解了第一个答案的问题。如果您正在谈论单个 div 的内容，那么您可以使用 jQuery.parseHtml()

进行检查以确保内容有效

https://api.jquery.com/jquery.parsehtml/

为了获得额外的效果，您可以使用 jsdom，它允许您从字符串创建 DOM:

https://www.npmjs.com/package/jsdom

您可以像遍历 Windows DOM 等一样进行遍历。

也值得一看cheerio:

https://www.npmjs.com/package/cheerio

所有这些库都可以在客户端和服务器端使用。

它们可用于检查有效性、检查内容、检查不允许的标签等

在 Angular 中，您将渲染已知有效的 HTML，如下所示:

<div [innerHTML]="myHTML"></div>

参见https://www.dev6.com/Angular-2-HTML-binding

您可能希望它像这样工作:

DIV ONE - 将 HTML 呈现为纯文本(仅在编辑期间)

DIV 2 - 在编辑期间和编辑之后渲染解析的 HTML(如果它有效)(编辑完成后应始终有效，尝试关闭编辑 session 应使用上述库测试有效性)

但请考虑安全问题:

https://angular.io/guide/security#bypass-security-apis