组件模型和视图每次被拖拽到Canvas中所有可以放置的组件时都会加载
@mohamedsalem401这很可能是因为编辑器太肤浅了。 我觉得利用canMove中的“临时”选项（我们已经用它跳过部分动作）是合理的。你怎么说？ “''js const wrapper = this.getShallowWrapper（）; srcModel = wrapper？.附录（来源，{ 临时：真实}）[0] ||无效; ```
阅读下方完整回答 ↓问题
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 版本 130.0.6723.59（官方版本）（arm64） 可复制演示链接 https://codepen.io/btmkt/pen/QWeOJRB?editors=1111 描述一下那个虫子 如何复现这个漏洞？打开控制台。在画布内放置多个组件（例如用三列方便复现）。将“额外”类别末尾添加的“测试-合成”组件拖拽到新增组件上。 预期的行为是什么？ 组件“模型”和“视图”初始化事件（至少不确定是否有其他事件）应该只在将组件放入画布时触发，而不是每次拖动到可丢弃组件上方时触发。 目前的行为是什么？ 组件的“模型”和“视图”初始化事件每次拖动到可丢入的组件上都会触发，丢入时触发两次。这会带来很多问题，尤其是如果你触发一个模态开放（如果没有条件，它会增加尽可能多的模态，就像触发“init”的次数一样）。 我也为v0.21.13（https://codepen.io/btmkt/pen/OJKOrPQ?editors=1111）创建了一支笔，这样你就能看到区别，重现问题的步骤是一样的。 我目前使用的是v0.21.10，至少根据我的测试，这个版本的工作原理和v0.21.13差不多，我想升级到v.0.22.1，但因为这个新行为做不到。 如果你需要其他信息，请告诉我。 谢谢。行为准则 [X] 我同意遵...
回答（4）
@mohamedsalem401这很可能是因为编辑器太肤浅了。 我觉得利用canMove中的“临时”选项（我们已经用它跳过部分动作）是合理的。你怎么说？ “''js const wrapper = this.getShallowWrapper（）; srcModel = wrapper？.附录（来源，{ 临时：真实}）[0] ||无效;
@artf 是的，我怀疑这和“浅层编辑器”有关。希望临时方案能奏效，然后我再开永久居民申请
@mohamedsalem401这很可能是因为编辑器太浅了。我觉得利用canMove中的“临时”选项（我们已经用它跳过部分动作）是合理的。你怎么说？“''jsconst 包装器 = this.getShallowWrapper（）;srcModel = wrapper？.附录（来源，{ 临时：真实}）[0] ||无效;``` 你好，@artf， 上面看到的改动（我看到已经实现了）似乎并没有解决我遇到的问题。它和0.22.1版本一样。 我已经把手写笔升级到了0.22.3（https://codepen.io/btmkt/pen/QWeOJRB?editors=1111），也在应用里做了一些测试...
感谢你报告，@bt-mkt。 关于每次拖拽到Canvas中每个可以放置该组件的组件时，都会进入组件模型和视图，这是个很好的问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件生命周期 editor.on（'component：m...
相关问答
通过相似的问题讨论继续研究。
问题 #5705
编辑器大小调整时组件工具会出现错位
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 https://jsfiddle.net/Lk2bwhp4/ 描述一下那个虫子 如何复现这个漏洞？将编辑器放入容器中，然后通过程序调整容器的宽度。 预期的行...
问题 #5280
视图中的事件处理程序未绑定到组件
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 版本 115.0.5790.114 可复制演示链接 https://jsfiddle.net/mcraf3se/5/ 描述一下那个虫子 你好，我刚开始用GrapesJS，所以很可能我...
问题 #5316
编辑者未订阅选择器：移除
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome v115.0.5790.170可复制演示链接 https://jsfiddle.net/BenKhz/yfwqc6mu/1/ 参考[这里的文档]（https://grapesjs.com...
问题 #3278
Render上的自定义组件视图被称为早期
版本： 以下用0.16.34（从 https://unpkg.com/grapesjs 回归）和0.16.22在Preact项目中复制 详细描述那个漏洞 自定义的GrapesJS组件在渲染到画布时调用视图的“onRender”函数。根据文档说明： ![图片]（https://u...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选，助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
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 to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
教程
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
浏览插件分类
直接跳转到市场上的插件分类页面。