GrapesJS 问题

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

找到 183 个问题

🔍 documentation
#61422024年9月10日作者 rhoenerSBS2 个回答
0 个反应

页面重做无法正常工作

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v128 可复制演示链接 https://app.grapesjs.com/studio 描述一下那个虫子 添加页面后,通过撤销删除,再用重做重新添加,页面却无法正常工作。图层管理器在选择页面时不会更新。它也没有之前的内容,而且似乎没有正体,因为无法在那个页面添加新组件。我在本地开发中注意到了这种情况,但因为Grapesjs的工作室版本也出现了,我提交了工作室版本的链接以便复制此问题。 如何复现这个漏洞?打开GrapesJs工作室示例添加页面点击撤销 - >页面从列表中移除点击重做 ->页面再次添加点击重做添加的页面查看行为 预期的行为...

artf

谢谢你的报告@rhoenerSBS

ClaudeCode

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

#61022024年8月31日作者 Alababdiy3 个回答
5 个反应

重新加载自定义组件编辑器后未显示特征

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 铬91V可复制演示链接 https://jsfiddle.net/8tsj5vpb/描述一下那个虫子 我在使用 GrapesJS 时遇到了一个问题,即在重新加载编辑器后,为自定义组件定义的特征没有显示出来。这些特征在组件刚添加时正常工作,但重新加载编辑器(例如刷新页面)后,特征不再出现在特征面板中。 繁殖步骤:使用编辑器定义自定义组件类型。DomComponents.addType,包含默认值部分中的特征。将自定义组件添加到画布中。重新加载编辑器(例如,刷新页面或重新初始化编辑器)。在编辑器中选择自定义组件。 预期行为: 自定义组件定义的特征应在重新加载...

mohamedsalem401

@Alababdiy 我无法通过提供的链接重现问题。 不过,问题似乎在于 GrapesJS 不允许在组件初始化后添加或定义它。

mohamedsalem401

嘿,@Alababdiy, 我没能重现你在JSFiddle中描述的问题。

ClaudeCode

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

#60472024年8月7日作者 danstarns1 个回答
0 个反应

释放流程

GrapesJS 仓库构建工件发布过程中存在以下问题: 工件应直接来自开发者的机器。- https://github.com/GrapesJS/grapesjs/pull/6041 该过程没有文档 我们有多个软件包要发布,也需要完善的文档。该工单旨在标准化并记录 GrapesJS OSS 仓库的发布流程,使其与行业标准工作流程保持一致。这项工作将确保所有贡献者的一致性、可靠性和易用性。

ClaudeCode

谢谢你举报,@danstarns。 关于发布流程的建议真棒!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件进行细致跟踪 构建一个插件...

#60242024年7月30日作者 yashvi20262 个回答
0 个反应

无法隐藏某些特定组件类型的RTE功能

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://codepen.io/Harshsne/pen/xxoOyXO 描述一下那个虫子 https://github.com/GrapesJS/grapesjs/issues/6019 关于此点, 我想只为某一特定类型隐藏。 示例:当组件属于链接类型时隐藏 rte行为准则 [X] 我同意遵守本项目的行为准则

artf

https://github.com/GrapesJS/grapesjs/issues/6019#issuecomment-2267466020 请避免制造重复问题。

ClaudeCode

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

#59822024年7月2日作者 ihatov082 个回答
1 个反应

诸如 md:flex-row(tailwind) 等组件样式被移除

葡萄JS版本[x] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 126.0.6478.127可复制演示链接 https://jsfiddle.net/6m53pwy7/4/描述一下那个虫子 如何复现这个漏洞? 我想用 [Tailwind](https://tailwindcss.com/) 搭配 GrapesJS,但这个框架使用 Utility-First CSS 类来构建快速布局。问题在于它还使用[“特殊”类](https://tailwindcss.com/docs/state-variants/#app)来定义样式变体,例如:hover:bg-blue 或 md:w-full 等。 包含冒号的样式...

artf

你需要正确地逃离CSS “''js .md\\:p-18 { 填充:4rem; } ```

ClaudeCode

谢谢你举报,@ihatov08。 关于像md:flex-row(tailwind)这样的组件样式被移除的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => consol...

#58982024年5月22日作者 afrinxnahar1 个回答
0 个反应

资产管理链接断裂

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 火狐 可复制演示链接 https://grapesjs.com/docs/modules/Assets.html#initialization 描述一下那个虫子 如何复现这个漏洞?前往 https://grapesjs.com/docs/modules/Assets.html#initialization点击下方截图所示的链接 ![葡萄声2](https://github.com/GrapesJS/grapesjs/assets/125039325/b1dbd167-16b2-4bbb-b4fe-0f1eaf3db3be) 该页面重定向至此页面: !...

ClaudeCode

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

#58912024年5月17日作者 shapley2 个回答
0 个反应

在Ubuntu 24.04 LTS上安装Grapesjs和yarn

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 125.0.3,Brave 1.66.110 可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子 按照“git”指令在终端执行“yarn start”时安装Grapesjs: ~$ sudo apt install Nodejs NPM ~$ sudo apt install curl gnupg -y ~$ 卷发 -sS https://dl.yarnpkg.com/debian/pubkey.gpg |sudo apt-key 补充 - Echo “Deb https://dl.yarnp...

artf

谢谢@shapley,这其实和GrapesJS甚至Yarn没什么关系,你得[增加文件系统监视者](https://stackoverflow.com/a/65347277)。

ClaudeCode

谢谢你举报,@shapley。 错误 错误:ENOSPC:系统对访问文件监视者数量的限制,watch '/home/user/grapesjs/node_modules/@babel/traverse/lib/hub.js' 发生在 StyleManager 尝试访问属性时,尚未完全初始化组件生命周期。这是GrapesJS中常见的竞争条件。 立即解决办法: 如果你控制代码,可以用空检查包裹调用: “JavaScript if (component && typeof com...

#58032024年4月11日作者 rhoenerSBS3 个回答
0 个反应

过滤阻挡并不按文档中描述的方式工作

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v123 可复制演示链接 https://jsfiddle.net/7xu0efLc/3/ 描述一下那个虫子 GrapesJs 的文档显示,据说可以过滤这些块,并用过滤后的块列表重新渲染 BlockManager。(参见文档 https://grapesjs.com/docs/api/block_manager.html#render)你可以看到小提琴没用。只有文本块应该是可见的。 如何复现这个漏洞?打开Fiddel或在自己的项目中整合链接文档中的过滤代码。 预期的行为是什么? BlockManager应该能够用过滤的块列表来渲染。 目...

artf

这种方法只有在默认块管理器已经渲染完毕后才有效。 如果你需要在开始时重新渲染,可以订阅封块管理器激活事件。 “''js editor.on('command:run:open-blocks', () => { const 块 = 编辑器。BlockManager.getAll(); const filtered = blocks.filter(block => block.getLabel() == 'Text'); 编辑。BlockManager.render(filte...

rhoenerSBS

谢谢你@artf

ClaudeCode

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

#57682024年3月19日作者 rhoenerSBS1 个回答
0 个反应

BlockProperties 中“content”属性的类型错误

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v122 可复制演示链接 不适用 描述一下那个虫子 GrapeJs 文档表明,可以在块的“content”属性中添加混合内容(见 https://grapesjs.com/docs/modules/Blocks.html#mixed)。但该属性的类型定义是“字符串 |组件定义“(参见 https://github.com/GrapesJS/grapesjs/blob/dev/src/block_manager/model/Block.ts#L17)。 这会导致 TypeScript 项目编译时出现错误。 如何复现这个漏洞?定义混合值的块...

ClaudeCode

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

#57462024年3月12日作者 rhoenerSBS4 个回答
1 个反应

当面板不在编辑器容器时,ColorPicker 偏移不正确

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v122 可复制演示链接 https://grapesjs.com/docs/getting-started.html#style-manager 描述一下那个虫子 如何复现这个漏洞?访问GrapeJS的“入门指南”文档中的“StyleManager”部分尝试在编辑器中使用该部分的颜色选择器。即使你在 .editor-canvas 中添加“position:relative”,当面板不在编辑器容器外时,颜色选择器仍然会计算错误的偏移 预期的行为是什么? 颜色选择器会显示在对应的输入旁边 目前的行为是什么? 相对偏移计算错误,选色器显示在...

bernesto

你好,@artf, 根本问题是我们试图将弹出调色板绝对放置在页面任意位置的另一个元素之上。即使原点元素不在编辑器容器节点之外,我们也需要这样做。 为满足此要求,弹出调色板不能包含在“offsetParent”的任何位置,且必须处于最高的z指数。否则,它将受其“offsetParent”可见区域的影响,并按父节点的“z-index”排序。 在我之前的补丁中,这似乎是可行的,因为示例编辑器占用了整个窗口,因此编辑器元素内的“left: 0”和“top: 0”也在正体内部是“le...

artf

@bernesto你能检查一下这个吗?因为它似乎和[你的更改](https://github.com/GrapesJS/grapesjs/pull/5704)有关。

bernesto

是的,我明白问题所在。逻辑需要考虑父节点在容器外的情况。让我看看能不能做。

浏览所有主题