从 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...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选，助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)
New to GrapesJS? See exactly what the stock editor gives you, where it falls short, and which plugins close the gaps — a beginner-friendly 2026 comparison
教程
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.
浏览插件分类
直接跳转到市场上的插件分类页面。