PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #5334💬 已回答提出于 2023年8月24日作者 DreamCloudProject1 个反应

在画布中选择自定义组件类型无法正常工作

快速解答作者 DreamCloudProject❤ 1

@artf 是的,你说得对。我阻止了点击传播,所以编辑器无法接收点击事件,因此无法执行选择元素的逻辑。 我尝试通过在组件内将“e.stopPropagation()”替换为“e.preventDefault()”,将点击传播设置为仅对当前元素进行,现在编辑器中的元素选择逻辑正常了。问题似乎已经解决了。谢谢!

阅读下方完整回答 ↓

问题

GrapesJS 版本

  • 我确认使用最新版本 GrapesJS

你用的是什么浏览器?

Chrome、Opera、Edge 等

可复制演示链接

https://jsfiddle.net/crszh0jo/6/

描述一下那个虫子

我正试图让它像这里描述的那样工作[[问题] Canvas #951 无法选择自定义组件(https://github.com/GrapesJS/grapesjs/issues/951),但还是没成功。

我怎样才能让从画布选择和从图层管理器选择一样工作?因为这里描述的解决方案对我来说不适用。我需要允许用户从画布中选择自定义组件,而不是每次都打开图层管理器。

行为准则

  • 我同意遵守本项目的行为准则

回答(4)

DreamCloudProject• 2023年9月3日

@artf 是的,你说得对。我阻止了点击传播,所以编辑器无法接收点击事件,因此无法执行选择元素的逻辑。

我尝试通过在组件内将“e.stopPropagation()”替换为“e.preventDefault()”,将点击传播设置为仅对当前元素进行,现在编辑器中的元素选择逻辑正常了。问题似乎已经解决了。谢谢!

yatoogamii• 2023年8月25日

你好@DreamCloudProject,看起来你的组件MSC头锁住了。这是一个属性,允许从图层点击组件,但不能从Canva本身点击

你能分享或验证你的组件定义,并检查“锁定”属性是否设置为true吗?

GJS Helper• 2026年5月17日

你遇到的直接从GrapesJS画布选择自定义组件的问题很常见,源于GrapesJS处理组件选择的方式以及嵌套元素的默认selectable属性。问题#951中的解决方案可能不直接适用于你的情况,因为你自定义类型定义中的components属性是一个原始的HTML字符串,限制了对子属性的细致控制。 根本原因 当你用原始HTML字符串components定义自定义组件时,GrapesJS解析该字符串并为每个HTML标签创建默认组件(例如,div,p,button)。默认情况下,所有这些生成的组件都有 selectable: true。 当你点击画布时,GrapesJS的选择逻辑会优先选择点击坐标...

相关问答

通过相似的问题讨论继续研究。

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。