如何以角度保存和加载来自 html WYSIWYG 编辑器的内容

Posted 2023-03-07

技术标签:

【中文标题】如何以角度保存和加载来自 html WYSIWYG 编辑器的内容【英文标题】：How to save and load content from html WYSIWYG editor in angular 【发布时间】：2019-03-09 07:42:11 【问题描述】：

如果这对这种情况有意义的话，我想我最终会在 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);

【问题讨论】：

【参考方案1】：

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

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

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

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

这种方法允许单个后端为可能的许多不同前端提供服务，如果后端返回 JSON，则前端可以根据需要呈现该 JSON。

如果您开始从后端返回 HTML，而另一个前端想要以不同的方式呈现该数据，那么您会被塞满。

如果您想通过公共 API 提供数据，那么您也会被塞满。

保持简单并从后端返回 JSON。

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

【讨论】：

好的，所以传递元素内部 html 的问题是因为如果使用公共 api 的安全问题？我的问题是将 html 翻译为 jsons，因为从 html 翻译为 json 似乎很奇怪……然后将 BACk 翻译为 html。相反，可以休息 api 将 innerhtml 作为字符串抓取并用管道对其进行消毒并渲染有关解析 HTML 的安全问题，请参阅angular.io/guide/security#bypass-security-apis 好的，如果您采用您的方法，您可能会将后端绑定到单个前端 - 我理解您所提倡的方法的好处，但由于概述的原因，行业不遵循这种做法- 你可能会在管理编辑等方面面临许多不必要和复杂的挑战 - 更不用说可能很少有图书馆会尝试支持这种方法 - 你也可能会失去一些角度的力量......我意思是如果你尝试清理它将如何处理它？你可能受限于静态 HTML 我非常怀疑是否有一个足够智能的库可以将 Angular HTML 转换为静态 HTML，更重要的是，它如何再次将其转换回来？如果您对静态 HTML 感到满意，那么它可能会起作用，但我不相信【参考方案2】：

我将添加第二个答案，因为我可能误解了第一个答案的问题。如果您谈论的是单个 div 的内容，那么您可以使用jQuery.parseHtml() 进行检查以确保内容有效

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

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

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

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

还值得一看cheerio：

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

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

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

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