GrapesJS 问题

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

状态

排序

找到 743 个问题

🔍 bug

#48472023年1月15日作者 wunksert3 个回答

0 个反应

提问画布缺陷 style-manager keyboard

Css edits aren't persisted to the DOM

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 版本 109.0.5414.87 描述一下那个虫子如何复现这个漏洞？在 GrapesJS 画布上创建@keyframes动画在 JS 中，通过将以下字符串传递到编辑器中创建新的 CssRule。Css.addRules：将其添加到画布上： editor.Css.addRules(updatedRule) 预期的行为是什么？ DOM应该更新目前的行为是什么？ DOM没有更新。不过，如果我调用 editor.getCss()，我能看到不透明度的正确值正在返回。如果需要执行某些代码以重现该漏洞，请将其粘贴到下面：行为准则[X]...

artf

似乎与 CssGroupRuleView [这里]（https://github.com/artf/grapesjs/blob/e6a086afac77d8da73f225dd0aa84b3d178ec47b/src/css_composer/view/CssRulesView.ts#L64-L80）有关。对于像“@keyframes”这样的at规则，我们必须强制重新渲染父容器。

wunksert

@artf又遇到了“editor.”这个问题。CssComposer.remove（myCssRule）' 编辑器CSS会移除规则，但规则不会被冲入DOM。你建议我如何在保持编辑器状态不变的情况下强制重新渲染 DOM？“editor.refresh” 并没有把样式冲入 DOM

GJSBlock

谢谢你举报，@wunksert。关于CSS编辑不会持久保存到DOM的问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something...

查看详情

#48412023年1月14日作者 chaegumi1 个回答

0 个反应

提问组件缺陷

不要使用 component.addAttributes（{[traitName]：value}），有时应该使用 component.set（traitName， value）

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 108.0.5359.125 可复制演示链接 https://codesandbox.io/s/sweet-hugle-w00pqx 描述一下那个虫子如何复现这个漏洞？拖我的街区查看代码预期的行为是什么？不想要特征2=“特征2” 目前的行为是什么？具有特征2=“特征2” 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： ![图片]（https://user-images.githubusercontent.com/9654650/212448739-0f23d7b1-f8bf-49d2-a420-be02a1328...

GJSBlock

谢谢你举报，@chaegumi。关于不要用component.addAttributes（{[traitName]：value}），你有时应该用component.set（traitName，value），这是个很好的问题。GrapesJS 推荐的方法是使用事件驱动 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式...

查看详情

#48372023年1月10日作者 quentin-bettoum4 个回答

4 个反应

组件缺陷提问画布 typescript

HTML元素的ID会在projectData加载的不同页面上递增

GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ Firefox 109 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子你好，我注意到当我在 projectData 中加载多个 HTML 中使用相同id的页面时，grapes 会自动在每个页面上递增id，尽管这些页面是不同的。为了演示这个问题，下面有一段代码，我用包含两个页面的 projectData 初始化，grapesjs 页面在某些 HTML 标签上使用相同的 ID。在最终的HTML列表中，你可以看到body和main-title等id在第二页被递增到body-2和main-titl...

artf

嘿，@bgrand-ch，我认为有一天所有Grapesjs实体都会有一个全局“UID”，所以从长远来看，我预计这个问题会被修复 🤞

quentin-bettoum

起初，我想把所有页面一起生成，这样所有页面都能输出一个统一的CSS输出。但现在我尝试另一种风格方案。所以对于“id”问题，分别生成每个页面可能是解决方案。谢谢你的建议。

bgrand-ch

Grapes 使用一些数据属性（类似“data-grapes-id”）作为唯一标识符，以便让 id 留给某些前端脚本使用。我喜欢这个想法 💯

查看详情

#48172023年1月2日作者 sdimitrenco2 个回答

0 个反应

缺陷提问常规

如果 div 内部有标签 p >的 span，就无法在 div 内部编辑文本节点。

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 版本 108.0.5359.125，Mozilla 107.0可复制演示链接 https://jsfiddle.net/stanislavdimitrenko/d61cm4yg/14/描述一下那个虫子所以， grapes js. 如果你有那个结构体 “某些没有包装的文本”——你不能编辑那段文字。 Grapes 不能编辑...... 如果改变了这一点，那你就可以。或者，如果你给文本加装，同样可以编辑。也许需要设定剧本工作 grapesjs 或限制？行为准则[X] 我同意遵守本项目的行为准则

artf

是的，目前这是解析文本节点没有适当封装和文本组件作为兄弟节点的预期行为。所以为了让这些节点可编辑，你必须正确地用类似标签的范围包裹它们。

GJSBlock

谢谢你举报，@sdimitrenco。如果 div 在 page p > span 内有标签，无法在 div 内编辑文本节点的问题，似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：** 如果还没测试过，请用最新的GrapesJS版本测试提供最小可重...

查看详情

#48122022年12月27日作者 FaisalShaikhHA2 个回答

1 个反应

提问组件缺陷 typescript

分层属性在父子关系中无法正常工作。

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 107.0.5304.110（官方构建）（arm64）可复制演示链接 https://codepen.io/faisal-praella/pen/rNvOwgR 描述一下那个虫子当父组件设置为 layerable: false 时，它不可见，其所有子组件在图层管理器中也不可见。当其子组件被设置为 layerable: true 时，图层管理器中应该能看到。预期的行为是什么？父组件和子组件应该隐藏，但带有 layerable: true 的子组件应在图层管理器中可见。目前的行为是什么？带有 layerable: true 的子节...

artf

不幸的是，这就是目前“可分层”的机制，所以不是bug，但我很乐意接受一个PR以改善这种行为。

GJSBlock

谢谢你举报，@FaisalShaikhHA。 Layerable 属性在父子情景中未按预期工作的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：如果还没测试过，请用最新的GrapesJS版本测试提供最小可重复的示例（CodeSandbox）——...

查看详情

#48032022年12月25日作者 miladmeidanshahi1 个回答

0 个反应

提问组件 typescript 缺陷

Traits value type select doesn't fill value

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 108 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子如何复现这个漏洞？使用工具提示组件，通过 editor.getSelected().getTraits() 获取特质，你可以看到 data-tooltip-length 值是空的，设置面板设置后会填满该值，但重新刷新页面后值却是false。其他类型如布尔值和文本填充值，即使刷新页面后，我觉得所选类型出了问题。所有使用select-type特性的组件都会出现这种情况。 ![截图来自2022-12-25 12-45 12-45...

GJSBlock

谢谢你举报，@miladmeidanshahi。关于特质价值类型选择不填补价值的好问题。推荐的组件方法是使用事件驱动的API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed...

查看详情

#48012022年12月23日作者 eduardocalixtokorp2 个回答

1 个反应

提问组件缺陷 typescript

React components componentWillUnmount is not called

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 108.0.5359.125（Windows）可复制演示链接 https://codesandbox.io/s/white-meadow-o56l2d?file=/src/Chart/Chart.js:135-254 这个演示不在最新版本 grapesjs 里，但在本地使用最新版本时，我遇到了同样的bug。描述一下那个虫子如何复现这个漏洞？访问此[链接]（https://codesandbox.io/s/white-meadow-o56l2d?file=/src/Chart/Chart.js:135-254）打开控制台拖拽“图表...

eduardocalixtokorp

我注意到在我的组件定义中，我正在做 'reactRoot.render（<>{reactEl} </>）' 在onRender（）中，我之前遗漏了补充 'root.unmount（）' n remove（）方法

GJSBlock

谢谢你举报，@eduardocalixtokorp。关于React componentscomponentWillUnmount不叫的好问题。推荐的组件方法是使用事件驱动的API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => con...

查看详情

#48002022年12月23日作者 usmanqamar-int2 个回答

0 个反应

提问组件缺陷 typescript

移除或添加组件会改变其他组件位置，但用拖拽模式翻译，有什么解决办法吗？

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？铬可复制演示链接 https://zmzr3n.csb.app/ 描述一下那个虫子如何复现这个漏洞？在删除或添加多个组件时，其他组件的位置发生了变化。预期的行为是什么？这不应改变他们的立场行为准则 [X] 我同意遵守本项目的行为准则

artf

这就是翻译的原理，另一种选择是使用绝对模式

GJSBlock

感谢你举报，@usmanqamar-int。关于移除或添加组件会改变其他组件位置的拖拽模式翻译，有没有解决办法？推荐的组件方法是使用事件驱动的API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'somet...

查看详情

#47992022年12月23日作者 AgnRakul2 个回答

0 个反应

缺陷提问常规

Issues on setDragMode in version 0.20.2

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？铬可复制演示链接 https://jsfiddle.net/6c7xw3Lu/2/ 描述一下那个虫子 [截屏时间：2022-12-12 12：24：15 IST.webm]（https://user-images.githubusercontent.com/70213104/209287702-270827d7-57f3-4501-a89b-8b3d51cba2b2.webm）版本0.20.2的拖拽模式问题，视频中无法看到拖拽，请检查一次行为准则 [X] 我同意遵守本项目的行为准则

artf

这与[本期]（https://github.com/artf/grapesjs/issues/4792）相关，且已准备好下一次发布。

GJSBlock

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

查看详情

#47972022年12月21日作者 vaneatka1 个回答

0 个反应

style-manager 缺陷提问 typescript

Change type keepUnusedStyles?: 0;

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？任何可复制演示链接无描述一下那个虫子请修正的类型 keepUnusedStyles？： 0; https://github.com/artf/grapesjs/blob/dev/index.d.ts#L261 以避免这种代码保持未使用风格：如同任何事一样真实，谢谢。行为准则 [X] 我同意遵守本项目的行为准则

GJSBlock

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

查看详情

GrapesJS 问题

浏览所有主题