javascript - 如何在用于编辑 HTML 的 Javascript 组件中实现 View 模型分离？

Question

我需要为特定的 HTML 子集构建一个浏览器内 WYSI(或多或少)WYG 编辑器。这要求模型 HTML 元素可以用额外的标记来修饰以支持编辑。出于编辑的目的，可能必须完全替换某些模型 HTML 元素。

我想避免在编辑器标记 HTML 和输出标记 HTML 之间来回转换，因为这在组件的先前版本中被证明是非常容易出错的。

相反，我希望模型和 View 完全分离，最好使用客户端 MVC 框架之一，例如 React.js。

如何实现？到目前为止，我提出了以下想法:

• 将模型表示为浏览器 DOM，并将其用作生成编辑器标记(和行为)的 View 的模型
• 使用 React 的虚拟 DOM 表示模型(这可能吗？)
• 使用 Javascript 的数据类型制作我自己的模型表示。但是，这将需要编写一个解析器和一个序列化程序，我非常希望避免这种情况。

这在其他编辑器组件中是如何完成的？这种方法是否可行？

编辑:为了更清楚地说明用例，我不是在寻找一种架构来支持内联元素的常规编辑，例如 <strong> , <a>等。但是结合了内联元素的就地编辑(我正在考虑为此使用 CKEditor 之类的东西)以及更多结构编辑，例如克隆 <div> s 和布局 <table> s 并移动它们。

Answer 1

如果我能正确理解你的问题，你想在单个页面中编辑多个元素吗？

在这种情况下，我建议使用 angularjs 指令编写此“模块”(通过属性连接，因此您对 html 的语义是相同的，因为它根本没有应用于文档)。该指令(当加载 Angular 应用程序时)应该更改元素的“可编辑”属性，这将允许用户编辑元素的内容。所以假设模板是这样的:

<div id="title-editor" my-editor>...</div>

这可能是用户模糊此 div 然后在指令中触发事件并将内容发送到后端的情况。

这是工作指令，可以对其进行审查https://github.com/TerryMooreII/angular-wysiwyg

最重要的是，您可以在页面中拥有多个“占位符”，因此您可以定义布局以及将哪些 Web 部件放置在页面中的位置，其他事情由页面管理员负责。

另外请注意，为每个占位符命名，这样您就可以在后端识别它们并在您的情况下填充数据，或者您可以使用 jquery/angular 在页面加载时填充它们。问题是您的首选方式是什么 :)

在后端，您可以使用 redis 或 mongo 来存储此占位符逻辑结构，而不是尝试表示完整的 DOM 结构并在每次从后端读取时重新创建它。所以以这种方式加载会快得多。

对于要拖放到页面上的部分，您将需要一些占位符，但这是不同类型的“编辑器”，因此您需要额外的 Angular Directive(指令)。这里还有一个可以帮助获得如何做的知识。 http://codef0rmer.github.io/angular-dragdrop .

结合这两者，您可以获得接近您需要的东西。再次。您必须(作为开发人员)负责页面布局，因为您必须至少定义顶级(拖放)占位符的位置。