Javascript 如何在angular中保存和加载html所见即所得编辑器中的内容

我想，如果在这种情况下有意义的话，我最终会在MongoDB中使用node/express后端

我最终希望能够将内容从content editable div保存到后端，以便以后可以从后端重新加载。。。然后，重新加载的数据可以放在不可编辑的HTML div中显示，也可以放回内容可编辑的div中进行更多编辑

有人对此有什么建议吗？也许有一种方法可以保存editordiv中的所有dom元素，这种方法可以翻译回HTML以便呈现

谢谢，任何建议都将不胜感激

HTML

所见即所得的编辑。
尝试在此处进行一些更改。添加您自己的文本

角分量

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);

  }

}

从'@angular/core'导入{Component，OnInit}；
@组成部分({
选择器：“应用程序仪表板”，
templateUrl:“./dashboard.component.html”，
样式URL:['./dashboard.component.scss']
})
导出类DashboardComponent实现OnInit{
构造函数（）{}
model='所见即所得编辑器。尝试在此处进行一些更改。添加您自己的文本。
'；
艺术经纬：有；
恩戈尼尼特（）{
this.editor=document.getElementById（'editor'）；
}
伊博尔德（）{
document.execCommand（'bold'，false，null）；
}
}

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

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

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

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

这种方法允许一个后端为许多不同的前端提供服务，如果后端返回JSON，前端可以按照自己的意愿呈现JSON

如果您开始从后端返回HTML，而另一个前端希望以不同的方式呈现该数据，那么您将被填充

如果您希望通过公共API提供数据，那么您也会被填充

只需保持简单并从后端返回JSON即可

---

在我正在进行的项目中，我们遇到了这个确切的问题，当它应该如此简单时，这真是一个令人头痛的问题。

我将添加第二个答案，因为我可能误解了第一个答案中的问题。如果您谈论的是单个div的内容，那么可以使用

jQuery.parseHtml（）

对于额外的umph，您可以使用jsdom，它允许您从字符串创建DOM：

您可以像遍历Windows DOM一样遍历它，等等

同样值得一看的是cheerio：

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

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

在Angular中，您将呈现已知有效的HTML，如下所示：

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

看

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

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

DIV TWO-在编辑期间和编辑之后，如果解析后的HTML有效，则呈现该HTML（编辑完成时应始终有效，尝试关闭编辑会话时应使用上述LIB测试有效性）

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

---

好的，那么传递元素内部html的问题是因为使用公共api时存在安全问题？我的问题是将html翻译成json，因为从html翻译成json看起来很奇怪。。。然后翻译回html。相反，rest api可以将innerhtml作为字符串抓取，并使用管道和渲染器对其进行清理。对于解析HTML时的安全问题，请参见ok，如果你采用这种方法，你很可能会将你的后端绑定到一个前端-我理解你所提倡的方法的好处，但这不是一种行业遵循的做法，原因如下-你可能会在管理编辑方面面临许多不必要和复杂的挑战，等等-更不用说可能很少有库会尝试和支持这种方法-你也可能会失去一些能力的角度。。。我是说如果你试着消毒它会怎么处理？你可能受限于静态HTML，我非常怀疑是否有一个足够智能的库来完成从角度HTML到静态HTML的转换，更重要的是，它将如何再次转换回来？如果你对静态HTML感到满意，那么它可能会起作用，但我不相信明天考试后我会花更多的时间来阅读这篇文章。非常感谢你的帮助。。。我对这个侧面项目很兴奋，如果我有问题/再次感谢你，我可能也会联系你！

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