-1

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

我会做一个实时预览功能。像 Visual Studio 实时预览。

我的客户需要一个功能，用户可以预览他们的工作画布的小图像，比如 vs 代码实时预览。

您可以看到底部图像上的红色框。但我无法猜测如何实现预览功能。

在此处输入图像描述

我只是猜测使用 iframe 或其他东西。但我无法说服这一点。

有人知道吗？请帮我。

4

1 回答 1

1

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

当编辑器中的内容发生变化时，更新小地图（这就是 Visual Studio 代码所称的）

Visual Studio 代码的小地图描述

可以找到 Visual Studio 代码的实现，它只是埋在大量的 Electron 样板下，不幸的是我不熟悉该框架，所以除了提供包含它们的小地图实现的文件的 GitHub 链接之外，我无法深入挖掘。

Microsoft/vscode 中“小地图”的 GitHub 代码结果

于 2018-10-11T07:29:58.177 回答