从 v18.4 更新到 GrapesJS v19.5 会导致 Chrome 变得无响应
小提琴（vue）的复刻版 没有Vue我无法复制 [小说]（https://jsfiddle.net/6qp48xyn/） 重现问题的步骤：添加文本组件选择文本组件，然后点击底部的“转换为条件”按钮将鼠标悬停在条件文本组件上，然后它会冻结。 好像有什么东西总是在悬浮上一直触发 ![图片]（https://user-images.githubusercontent.com/30591406/184062993-73d84ef7-0c07-4832-bd7b-9ac6d3851a5d.png） ![图片]（https://user-images.githubusercontent.com/30591406/184063004-9372e...
阅读下方完整回答 ↓问题
葡萄JS版本[x] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome 104.0.5112.79可复制演示链接 https://jsfiddle.net/gvrnw2c3/4/描述一下那个虫子 如何复现这个漏洞？ 我目前无法用 jsfiddle 重现这个 bug，这让我觉得可能是 Chrome 的问题，但我会继续尝试重现。 Within我的项目，如视频所示： 1）点击一个“条件文本”组件（我添加了的自定义组件类型） 2）点击“打开条件”按钮，然后在屏幕上出现的对话框中点击“应用” 3）将光标悬停在“条件文本”组件上 In JSFiddle（目前没有崩溃，但我会继续测试）： 1）点击“Hello World”文本组件 2）点击页面底部的“转换为条件”按钮 3） 点击新创建的“条件文本”组件（文本为“打开条件句以选择文本”） 4）点击页面底部的“更改条件”按钮 5）将光标移到“条件文本”组件上（目前没有崩溃，但我会继续测试） 预期的行为是什么？ 应用应该能正常运行（在GrapesJS v18.4中运行正常） 目前的行为是什么？ 一旦光标移到“条件文本”部分，整个屏幕就会崩溃，大约5秒后会出现以下内容： <img width=“455” alt=“截图 2022-08-03 18 15 14” src=“https://user-images.githubuser...
回答（4）
小提琴（vue）的复刻版 没有Vue我无法复制 [小说]（https://jsfiddle.net/6qp48xyn/） 重现问题的步骤：添加文本组件选择文本组件，然后点击底部的“转换为条件”按钮将鼠标悬停在条件文本组件上，然后它会冻结。 好像有什么东西总是在悬浮上一直触发 ![图片]（https://user-images.githubusercontent.com/30591406/184062993-73d84ef7-0c07-4832-bd7b-9ac6d3851a5d.png） ![图片]（https://user-images.githubusercontent.com/3059...
谢谢大家，我其实通过在Vue里打包这个示例还原了它，但我不太清楚为什么会被困在这个循环里。 乍一看，似乎与Vue的Proxy观察者有关。通过与之前的 Grapesjs 版本对比，似乎并非所有部分都被 Proxies 转换，这避免了卡住。 一个快速的变通方法是把“编辑器”放在Vue之外，防止所有对象都变成代理。 “''js 让编辑; Vue.createApp（{ mounted（） { editor = grapesjs.init（{ ... }）; // ... }, // .. }）.mount（'#app'）
谢谢@artf，现在在Vue实例外声明编辑器后，一切都完美运行了。
谢谢你举报，@benryanwilliams。 关于从v18.4更新到GrapesJS v19.5会导致Chrome变得无响应的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件生命周期 editor.on（'compone...
相关问答
通过相似的问题讨论继续研究。
问题 #5633
无法在“component：remove”处理程序中选择组件
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 版本 120.0.6099.225 可复制演示链接 https://jsfiddle.net/wattnu/opmwfvjn/ 描述一下那个虫子 如何复现这个漏洞？打开并拉动小提琴画...
问题 #4255
如果你在程序上将可拖拽道具设置为false，初始工具栏的移动按钮不会被移除
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome v98.0.4758.80可复制演示链接 https://jsfiddle.net/am1rb/3uzkn5t7/8/描述一下那个虫子 如何复现这个漏洞？在画布上渲染一个简单的组件将组件...
问题 #4175
换弹时缺少偏移线
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 99.0.4844.51 可复制演示链接 https://jsfiddle.net/rakam/5o8te64y/19/ 描述一下那个虫子 如何复现这个漏洞？添加少量组件。添加后，点...
问题 #6409
手机上无法拖动移动组件
葡萄JS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v133 可复制演示链接 https://jsfiddle.net/2hjdrb7L/1/ 描述一下那个虫子 如何复现这个漏洞？ 用grapesjs v0.22.x和grapesjs...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选，助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
教程
How We Built Composeit in Record Time Using GrapesJS Shadcn
Bypass foundational builder boilerplate and focus on what truly matters.
教程
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
浏览插件分类
直接跳转到市场上的插件分类页面。