如何在Web应用程序中完成实时预览功能？

Question

基本上，我们使用无头CMS来编辑网站A上的内容。我们基于无头CMS API（称为网站CMS）构建自己的CMS UI。

现在，我们在Website CMS中拥有此页面，您可以在其中在左侧面板上编辑内容，并在右侧面板上获得网站A的预览（移动视图）。

我以前没有做过这样的事情，我想知道什么是实现此目标的最佳方法，以及是否有任何库可以帮助实现此功能。

一些想法：

1. 将网站A嵌入到Website CMS中，并且在左侧面板上所做的任何更改基本上只会刷新网站A（仅嵌入到页面中）。
2. 在网站CMS中将网站A重新创建为页面，并调用相同的API，以使更改都发生在网站CMS的网站A和实际的网站A上。对于完全相同的页面）。
3. 其他？？？

我们正在使用的主要框架是此CMS UI的ReactJs。

Answer 1

选项 2 是我会做的，并且 \xe2\x80\x99t 不一定是重复的。

\n\n

您希望用户能够预览更改而不发布它们。因此，移植真实的网站\xe2\x80\x99 与该目标不兼容。

\n\n

代码重复可能会很少。它将共享大部分相同的代码，并且传播速度也会更快。

\n