GrapesJS 问题

已收录 3,464 个 GitHub 问题 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。

找到 3,464 个问题

#64092025年2月18日作者 Shuja-Mahmood4 个回答
0 个反应

手机上无法拖动移动组件

葡萄JS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v133 可复制演示链接 https://jsfiddle.net/2hjdrb7L/1/ 描述一下那个虫子 如何复现这个漏洞? 用grapesjs v0.22.x和grapesjs-touch v0.1.1插件初始化一个grapesjs编辑器。 预期的行为是什么? 在移动端,使用工具栏的移动处理程序应该能像之前版本那样将组件移动到另一个位置。 [链接](https://jsfiddle.net/h1nzadq0/)用 Grapesjs v0.21.13 演示,运行正常。 目前的行为是什么? 拖动组件时会出现下落指示器,但松开后不会立即...

bamiendev

同样的问题

federica-capobianco

你解决了吗?我也面临类似的问题

Shuja-Mahmood

问题在 v0.22.6 依然存在

#64072025年2月16日作者 gopukinapp2 个回答
0 个反应

自定义特征不会在自定义块内加载

葡萄JS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 133.0.6943.98 可复制演示链接 https://codesandbox.io/p/sandbox/loving-breeze-mdls43?file=%2Findex.js%3A77%2C6 描述一下那个虫子 我正在尝试给我的方块添加一些自定义 triats,但很遗憾我只能看到默认的 triats [id,title] 我的方块里有很少的 HTML 代码,但如果我移除所有 HTML 代码,只在组件属性里放一个字符串,比如 Hellow World,没有任何 html,triats 就会显示出来 “''js 组件: <h2 class...

artf

你的组件有内部的“组件”,所以如果你选择其中一个,你会看到这些组件的特征,而不是“事件块”。 如果你正确选择“事件块”,你会看到你的特质。 <img width=“856” alt=“Image” src=“https://github.com/user-attachments/assets/a0913237-02f9-44f8-af51-6d151b618a37” /> 顺便说一句,这个 “''js this.view.el.querySelector(“[data-ev...

ClaudeCode

谢谢你举报,@gopukinapp。 自定义特征无法在自定义块内加载的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更快识别根本原...

#63942025年2月1日作者 spyjo1 个回答
0 个反应

Safari Mac 上的图层管理器 bug

葡萄JS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Safari 18.3 Macos 14.7.3 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞? 在右侧面板打开图层管理器 尝试隐藏“身体”,或者打开它 或者点击一个元素,图层显示在图层管理器列表中,然后尝试隐藏/打开/拖动 预期的行为是什么? 隐藏、拖拽或打开图层的图标应该会出现 目前的行为是什么? 没有图标显示,拖曳也没用 下面是Safari上的截图: <img width=“760” alt=“Image” src=“https://github.com/user-attach...

ClaudeCode

谢谢你举报,@spyjo。 关于 Safari Mac 上图层管理器 bug 的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something c...

#63762025年1月18日作者 Harshsne261 个回答
0 个反应

将最小值设置为StyleManager Config

葡萄JS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://codepen.io/Harshsne/pen/ZYzjaYe 描述一下那个虫子 预期的行为是什么? 当最小值设为1时,边框宽度应从1开始递增。 目前的行为是什么? 但边界宽度的值默认设置为0。(如果是这样的行为,可以如何将默认值设为“”,且当我递增时,值应从1开始。) 行为准则 [x] 我同意遵守本项目的行为准则

ClaudeCode

谢谢你举报,@Harshsne26。 将最小值设置到stylemanager config的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有...

#63742025年1月17日作者 Harshsne262 个回答
1 个反应

光标位置错误

葡萄JS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://codepen.io/Harshsne/pen/gbYjOWO 描述一下那个虫子 如何复现这个漏洞? 我已经在单击下调用了 onactive,这样我就能在一键内编辑文本框。 光标应该放在我点击的位置,这也是双击事件中发生的情况(双击变成单点击时预期的效果)。 预期的行为是什么? ...光标应该放在我点击的位置 目前的行为是什么? ...光标指向文本框的起始位置 ![图片](https://github.com/user-attachments/assets/3eccac92-94e7-4004-8034-024fe...

mohamedsalem401

嘿,我检查过你的代码并尝试调试。在我看来,代码没有把鼠标事件传递给 onActive 方法,而 onActive 是必须的: “''js componentEl.addEventListener('click', (ev) => { component.view.onActive(ev); });

ClaudeCode

谢谢你举报,@Harshsne26。 关于光标位置错误的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组...

#63732025年1月16日作者 ChipiKaf2 个回答
1 个反应

在父 Parent 中,使用绝对拖动调整 Child 的大小时,启用了 Position 的 Position 元素,但 Pat Null 是错误的

葡萄JS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 131.0.6778.265 可复制演示链接 https://codepen.io/chipikaf/pen/KwPexjL 描述一下那个虫子 如何复现这个漏洞? 将按钮组件放在中间部分 将按钮在该区域任意移动 元素调整大小 预期的行为是什么? 将元素调整到其原始位置 目前的行为是什么? 该元件被移到一个意想不到的位置 行为准则 [x] 我同意遵守本项目的行为准则

ChipiKaf

@artf我本地有解决办法。基本上我会检查元素是否有相对位置的父元素,然后如果存在且位置相对,则将矩形体偏移为父节点的高度。 如果可以的话,我可以帮它创建一个永久纪录?

ClaudeCode

谢谢你举报,@ChipiKaf。 关于在启用绝对拖拽时,子节点调整大小时在父位置中出现了错误元素,但相对位置是错误的,这个问题很棒。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.l...

#63692025年1月14日作者 hubermat2 个回答
0 个反应

边框半径的显示顺序不正确

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v130 可复制演示链接 https://grapesjs.com/demo-newsletter-editor.html 描述一下那个虫子 如何复现这个漏洞?在编辑器中选择任意元素在样式部分,前往边界半径 预期的行为是什么? 四个角落的边界半径设置显示如下: 左上右上 左下至右 目前的行为是什么? 底部角落的边框半径设置互换了: 左上右上 右下-左下 <img width=“217” alt=“Bildschirmfoto 2025-01-14 um 11 47 36” src=“https://github.com/user-att...

DarrenHou1993

这个改动解决了界面问题,但也带来了数值问题。设置左下角半径时,实际上是修改了右下角。

ClaudeCode

谢谢你举报,@hubermat。 关于边框半径的显示顺序不正确,这是个很好的问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethin...

#63652025年1月8日作者 MLMarxx4 个回答
0 个反应

样式管理器未能正确解释后裔选择器

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 131.0.6778.205 可复制演示链接 https://codesandbox.io/p/sandbox/naughty-microservice-5hp3h4 描述一下那个虫子 如何重现该漏洞:将“暗色风格”职业加入正文: “''js editor.getWrapper().addClass(“dark-style”);添加一个后代选择规则: “''js 编辑。CssComposer.addRules(“.dark-style .test-block { margin-top: 50px; }”); 预期行为是什么: 在样...

artf

是的,这不支持,因为试图匹配任何可能的规则可能会影响性能。 不过你可以通过 [styleManager.select](https://grapesjs.com/docs/api/style_manager.html#select) 选择任意规则。

MLMarxx

好的,谢谢你的澄清——我现在用的是select,有什么办法用这种方式定位媒体标签吗?

artf

你可以获取你需要的CSSRule(['getRule'](https://grapesjs.com/docs/api/css_composer.html#getrule)),然后传给styleManager.select

#63582024年12月19日作者 rhoenerSBS2 个回答
0 个反应

BlockManager 配置中的“appendOnClick” 不再工作了

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v131 可复制演示链接 https://jsfiddle.net/0uaxn2vc/2/ 描述一下那个虫子 如何复现这个漏洞?打开小提琴链接选择可以添加组件的主体或其他组件尝试只通过点击方块添加组件,不要拖放以前能用,但现在即使在 BlockManager 配置里用 appendOnClick: true 也不能了 预期的行为是什么? 组件应仅点击添加 目前的行为是什么? 控制台错误:“BlockView.ts:58 未捕获类型错误:c.setDropContent 不是函数”,组件未被添加行为准则 [X] 我同意遵守本项目的行为准则

artf

感谢@rhoenerSBS问题已修复,[这里](https://github.com/GrapesJS/grapesjs/pull/6346),并将在下一个版本中提供。

ClaudeCode

谢谢你举报,@rhoenerSBS。 关于BlockManager配置“appendOnClick”不再工作的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('som...

#63572024年12月13日作者 Harshsne261 个回答
0 个反应

!重要 会被添加到每个组件样式中

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://codepen.io/Harshsne/pen/YPKwRBg 描述一下那个虫子 如何复现这个漏洞?从 blockmanager 添加行组件。在样式管理器中更改其宽度。(!important是因为它的默认宽度是100% !important)。现在添加文本框,改变其宽度。 预期的行为是什么? 宽度不应加上!important。 目前的行为是什么? 宽度加上了!important。 在更改行宽度后,如果我们更改画布中任意组件的宽度,宽度会被添加为 !importance 。 ![20](https://github....

ClaudeCode

谢谢你举报,@Harshsne26。 关于!重要性会被添加到每个组件样式,这个问题非常好。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('some...

浏览所有主题