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等类似的内容。

还值得一看的是麦角酒：

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有效，则呈现该HTML（在编辑完成后应始终有效，尝试关闭编辑会话应使用上述库测试有效性））

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

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

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

2 个答案: