GrapesJS 问题

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

找到 877 个问题

🔍 question
#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...

#63542024年12月13日作者 RakulAgn2 个回答
0 个反应

未捕获的类型错误:无法设置空属性(设置为“_isEditor”)

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 如何复现这个漏洞?直接访问Grapesjs的演示网站,画布尚未渲染 预期的行为是什么? 画布应该被渲染 目前的行为是什么? 未捕获的类型错误:无法设置空属性(设置为“_isEditor”) 画布上的空白行为准则 [X] 我同意遵守本项目的行为准则

artf

关闭了这个,演示看起来运行正常,可能是浏览器缓存或扩展出了问题

ClaudeCode

谢谢你举报,@RakulAgn。 关于未捕获类型错误:无法设置空属性(设置“_isEditor”),这是个很棒的问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.l...

#63482024年12月7日作者 Frubl2 个回答
1 个反应

在 grapesjs 画布内可以拖拽任何东西

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?尝试选择,比如整个侧边栏工具/文本/所有功能抓取并放置在画布上 预期的行为是什么? 可能只复制粘贴文本或净化过的 html,或者可以拖拽只放我做成可删除的元素 目前的行为是什么? 我可以拖拽Canvas里的任何东西。 ![Screenshot_14](https://github.com/user-attachments/assets/11627411-14e5-4fda-a202-c6921cf64047)行为准则 [x] 我同意遵...

artf

你可以通过“canvas:dragdata”事件控制画布中丢失的内容 https://jsfiddle.net/artur_arseniev/87rcb24n/

ClaudeCode

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

#63452024年12月6日作者 VanTranTrucPhuong2 个回答
1 个反应

无法选择 + SHIFT 来选择批量文本

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 131.0.6778.109(官方构建)(64 位) 可复制演示链接 https://grapesjs.com/demo-newsletter-editor 描述一下那个虫子 如何复现这个漏洞?将鼠标指针放在你想选择文本的起始位置。按住SHIFT键。将鼠标指针移动到文本选择的目标端点。 预期的行为是什么? 所选文本应自动带有高亮背景,表示已被选中。 目前的行为是什么? 所选文本没有高亮的背景。 行为准则 [X] 我同意遵守本项目的行为准则

sirbeagle

我认为我查明原因在于无法同时选择多个方块。评论 “''t” this.clearSelection(this.Canvas.getWindow()); ``` 在 [/src/editor/model/Editor.ts](https://github.com/GrapesJS/grapesjs/blob/46b3292a9682f77076ddebe6015cfa247a55a844/packages/core/src/editor/model/Editor.ts#L53...

ClaudeCode

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

浏览所有主题