如何以角度保存和加载来自 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>

角度组件

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。

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