如何实现像vscode实时预览这样的预览缩略图

Question

我正在研究基于grapesjs的编辑器

我将提供实时预览功能。例如Visual Studio实时预览。

我的客户需要一个功能，即用户可以预览自己的工作画布上的小图像，如vs实时预览。

您可以在底部图像上看到红色框。但我不知道如何实现预览功能。

我只是猜想使用iframe之类的东西。但是我不能相信。

有人知道吗？请帮助我。

Answer 1

基本上，您只需要将内容镜像到另一个元素，该元素遵循与主内容相同的样式规则，但对其进行调整以使其更小。 Visual Studio代码基于Web技术，您已经提到使用iframe，所以我只能说CSS在这种情况下将成为您最好的朋友。

当编辑器中的内容发生更改时，请更新小地图（Visual Studio代码将其称为“小地图”）

Minimap description for visual studio code

可以找到Visual Studio代码的实现，它只是埋在许多Electron样板之下，很不幸，我不熟悉该框架，因此，除了提供GitHub链接到构成其实现的文件之外，我无法深入研究其他任何东西小地图。

GitHub code results for "minimap" in Microsoft/vscode