简体繁体 English

如何在 web 应用程序中实现实时预览功能？

[英]How to accomplish live preview feature in a web app?

原文 2019-10-01 06:43:20 4 2 javascript/ reactjs/ content-management-system/ headless/ live-preview

Basically, we are using a headless CMS to edit content on Website A. We are building our own CMS UI based on the headless CMS API (call this Website CMS).基本上，我们使用无头 CMS 来编辑网站 A 上的内容。我们正在基于无头 CMS API（称为网站 CMS）构建自己的 CMS UI。

Now, we have this page in Website CMS wherein you can edit the content on the left panel and get a preview of Website A on the right panel (mobile view).现在，我们在网站 CMS 中有这个页面，您可以在其中编辑左侧面板上的内容并在右侧面板（移动视图）上预览网站 A。

I haven't done anything like this before and I am wondering what's the best way to accomplish this and if there any libraries that help with this functionality.我以前没有做过这样的事情，我想知道实现这一点的最佳方法是什么，以及是否有任何库可以帮助实现此功能。

Some ideas:一些想法：

Embed Website A within Website CMS and any changes done on the left panel basically just refreshes Website A (which is just embedded into the page).在网站 CMS 中嵌入网站 A，在左侧面板上所做的任何更改基本上只会刷新网站 A（它只是嵌入到页面中）。
Recreate Website A as a page in Website CMS and call the same APIs so that the changes both happen on Website CMS's Website A and the actual Website A. (Although I don't see how this would be more beneficial and will create 2 separate codebases for the exact same page).将网站 A 重新创建为网站 CMS 中的页面并调用相同的 API，以便更改都发生在网站 CMS 的网站 A 和实际的网站 A 上。（虽然我不认为这会更有益，并将创建 2 个单独的代码库对于完全相同的页面）。
Others???其他？？？

Main framework we are using is ReactJs for this CMS UI.我们为此 CMS UI 使用的主要框架是 ReactJs。

2 个解决方案

Option 2 is what I would do and wouldn't necessarily be duplicative.选项 2 是我会做的，不一定是重复的。

You would want users to be able to preview changes without publishing them.您希望用户能够在不发布更改的情况下预览更改。 So porting the real website wouldn't be compatible with that goal.因此，移植真实网站与该目标不兼容。

Code duplication would probably be minimal.代码重复可能是最小的。 It would share most of the same code and it would also propagate much faster.它将共享大部分相同的代码，并且传播速度也会更快。

you can establish a communication link between CMS and website A to exchange data.您可以在 CMS 和网站 A 之间建立通信链接以交换数据。

Options选项

you can embed website A inside Website CMS using an iframe and then you can use postMessage to exchange data between CMS and Website A.您可以使用 iframe 将网站 A 嵌入网站 CMS 中，然后您可以使用postMessage在 CMS 和网站 A 之间交换数据。
Or else you can use WebSockets where website A will listen for the changes done at the left panel of the CMS.或者，您可以使用 WebSockets，其中网站 A 将监听 CMS 左侧面板所做的更改。