Problem when dragging component composed by image and link
嗨! 我测试过你的方案。它确实能正确更改图像,且将图像锁定在主组件内,你可以移动它。模型中的“src”属性会被更改,但当你移动组件时,它会回到占位符图像。如果你更改图片然后打开视图代码模态,你会发现“src”属性不像模型中那样发生变化。我认为这是因为Grapes在导出代码中没有为图片设置“id”。 检查打印件: 在组件丢弃时不设置图像:  更改图像: 如果需要拖动整个组件,我需要使用工具栏中的图标。 预期的行为是什么?子组件没有父元素就不会。 目前的行为是什么?如果子节点 img 元素没有属性 data-gjs-selectable="false" 我们只移动图像,而不是移动整个组件。 我发现的其他问题 在我的组件中,我配置了以下内容: 所以,当我放下新组件时,调整尺寸显示出来,但如果我再次点击且调整尺寸显示,它会隐藏...... 如果我设置 data-gjs-locked="true" 或 data-gjs-editabble="false" 来阻止所有图片,我无法用资产管理器更改它的src。 如果我把样式放在 pointer-events:none,组件 dblclick 的事件不会触发, grapesjs 会一直点击图片 😔 另外,我尝试了这些...
回答(4)
嗨! 我测试过你的方案。它确实能正确更改图像,且将图像锁定在主组件内,你可以移动它。模型中的“src”属性会被更改,但当你移动组件时,它会回到占位符图像。如果你更改图片然后打开视图代码模态,你会发现“src”属性不像模型中那样发生变化。我认为这是因为Grapes在导出代码中没有为图片设置“id”。 检查打印件: 在组件丢弃时不设置图像:  更改图像:  });'
使用 'data-gjs-locked=“true”属性忽略图片,正确更新你的自定义组件 “''js 移除runCommand(“open-assets”); 因为在模型端运行它没什么意义 你可以通过方块激活组件(https://grapesjs.com/docs/api/block.html#properties) 通过使用“激活”属性 init(){ editor.runCommand(“open-assets”); } 在视图中处理资产更新 浏览量:{ 事件:{ dblclick:“onActive”, }, onActive() { const { model } = this; 编...
谢谢你举报,@ronaldohoch。 关于用图片和链接组成组件时拖拽问题,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件生命周期 editor.on('component:mount', (c) =>...
相关问答
通过相似的问题讨论继续研究。
问题 #3397
Sorter direction incorrect with web component slot
版本:0.16.45 你能重现演示中的这个bug吗?[x] 是的[ ] 不 预期的行为是什么? 给定一个父网页组件实例渲染一些元素,在 shadowDOM 中,如果 'slot' 的父元素具有 'display: flex' 风格,排序器应是垂直的,因为结果中元素是水平对齐的。...
问题 #4752
带有指针事件的组件:'all'(除封装器外)或可编辑组件可以拖拽并下放到自己身上。
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Chrome 107.0.5304.121(官方版本)(arm64)可复制演示链接 https://jsfiddle.net/artur_arseniev/aku70f5w描述一下那个虫子...
问题 #5720
传播组件默认值在引入子注释时可能会破坏层
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v122 可复制演示链接 https://jsfiddle.net/n38vbktg/ 描述一下那个虫子 如何复现这个漏洞?创建一个组件,传播包含可分层=true的默认值。...
问题 #5263
如果删除组件但不删除其对应样式,之后添加新组件会导致样式冲突吗?
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 最新版本的Chrome浏览器 可复制演示链接 无效 描述一下那个虫子 如何复现这个漏洞? <img width=“1666” alt=“image” src=“https://githu...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
Introducing Search on GJS.Market
GJS.Market now has one search across everything we publish — plugins, articles, community questions, guides, authors and services. Press ⌘K from any page.
教程
如何在2026年用 GrapesJS 构建AI驱动的页面构建器
我们构建GJSDocs的经验——从简单的AI文本生成到结构化、上下文感知的视觉编辑
教程
2026年构建一个SaaS页面构建器需要多少钱?
2026年构建一个SaaS页面构建器的成本是多少?探索实际的开发成本、时间表、功能,以及使用 GrapesJS 如何降低成本
浏览插件分类
直接跳转到市场上的插件分类页面。