问题 #4248💬 已回答提出于 2022年4月7日作者 protozoo0 个反应

在 vscode 扩展 webview 中，块拖放交互失败

快速解答作者 artf

你好@protozoo我不太清楚具体原因，但看起来 vscode iframe（可能是沙箱的）阻碍了原生的 HTML5 拖放功能（这是块上用的操作）。由于这与核心内容不完全相关，我就把这个问题移到讨论区。

问题

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ VSCode（VSCode 扩展中的 WebView）可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子如何复现这个漏洞？创建一个新的 vscode 扩展（或使用你已有的扩展）创建一个包含带有 iframe 加载 GrapesJS 演示的 HTML 文档的 Webview运行扩展和webview加载该演示 GrapesJS 尝试在画布上拖拽 Grapes 块预期的行为是什么？拖曳的方块应加入画布目前的行为是什么？拖拽的组件不会被添加到画布中。你可以在这里观看一个展示问题的视频：https://www.protozoo.com/tests/grapesjs/vscodeextensiongrapes.mov。正如视频所示，其他拖拽交互也正常工作。问题可以在接近结尾处看到。如果需要执行某些代码以重现该漏洞，请将其粘贴到下面：行为准则 [X] 我同意遵守本项目的行为准则

回答（2）

artf• 2022年4月12日

GJSBlock• 2026年5月17日

谢谢你举报，@protozoo。关于在VScode扩展网页视图中阻挡拖放交互失败的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed'））; 组件生命周期 editor.on（'component：mount'，（c） =...

在 GitHub 上查看完整讨论 →