如何在Angular中从html所见即所得编辑器中保存和加载内容

Question

我认为如果对这种情况有意义的话，我最终将在MongoDB中使用节点/表达后端。

我最终希望能够将内容从内容可编辑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>

角分量

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

Node / express和Mongo听起来是个好主意。

返回HTML / DOM的东西，这听起来是个坏主意。 将前端逻辑保持在前端。

在过去，前端逻辑和后端逻辑总是混在一起的，例如PHP和Java。

如今，前端和后端之间有一定的隔离是有充分理由的。

这种方法允许单个后端服务可能有许多不同的前端，并且如果后端返回JSON，则前端可以按其意愿呈现该JSON。

如果您开始从后端返回HTML，而另一个前端希望以另一种方式呈现该数据，则会被填充。

如果您想通过公共API提供数据，则也会被填充。

保持简单，然后从后端返回JSON。

在我正在研究的项目中，我们遇到了这个确切的问题，当它应该这么简单时，这确实令人头疼。

Answer 2

我要添加第二个答案，因为可能我误解了第一个答案的问题。 如果您正在谈论单个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 TWO-在编辑期间和编辑之后，如果已解析的HTML有效，则将其呈现（在编辑完成后应始终有效，尝试关闭编辑会话应使用上述库测试有效性）

但是请考虑以下方面的安全问题：

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