如何在Javascript组件中实现视图模型分离以编辑HTML？

Question

我需要为特定的HTML子集构建一个浏览器内的WYSI(或多或少)WYG编辑器.这要求可以使用附加标记来修饰模型HTML元素以进行编辑支持.可能一些模型HTML元素必须完全替换才能进行编辑.

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

相反,我希望清晰地分离模型和视图,最好使用一个客户端MVC框架,如React.js.

怎么能实现这一目标？到目前为止,我提出了以下想法:

• 将模型表示为浏览器DOM,并将其用作生成编辑器标记(和行为)的视图的模型
• 使用React的虚拟DOM表示模型(这甚至可能吗？)
• 使用Javascript的数据类型滚动我自己的模型表示.但是,这需要编写一个解析器和一个序列化器,我非常想避免.

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

编辑:为了更详细地说明用例,我不是在寻找支持通常编辑内联元素的架构,例如<strong>,<a>et al.但内联元素的就地编辑(我正在考虑使用像CKEditor这样的东西)以及更多的结构编辑(如克隆<div>和布局)<table>以及移动它们的组合.

Answer 1

我建议研究使用 ReactJS 的 Flux 实现。这样，您的模型就可以轻松地抽象为使用 Flux 操作调用的服务，而这些服务又可以通过可以更改应用内数据的商店来监听。这样，您的视图逻辑位于组件中，但您的业务逻辑在其他地方抽象。