#53722023年9月8日作者 uncldrw1 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Windows、Chrome、React 可复制演示链接 / 描述一下那个虫子 当尝试添加自定义 atRules 如 @container 或 @font-face 时，CSS 总是编译成 @media。我尝试过各种方法，包括使用 Css.setRules 和 Css.addRules，以及插入 HTML 字符串，但都无济于事。 这是我给的代码： 行为准则 [X] 我同意遵守本项目的行为准则
ClaudeCode
谢谢你举报，@uncldrw。 无法添加自定义AtRule（@container，@font面）的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）...
#53462023年8月30日作者 pittleCheung3 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 最新版本的Chrome浏览器 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？ <img width=“1665” alt=“image” src=“https://github.com/GrapesJS/grapesjs/assets/114127651/657cbaf6-7e87-4702-ac7f-36c710464728”> 预期的行为是什么？ 风格可能会被简化， 目前的行为是什么？ 首先，我的编辑只用一页。每次切换页面，它都会用后端的页面替换当前配置。因此，当我实现公开头部和...
pittleCheung
https://github.com/GrapesJS/grapesjs/issues/1855 的扩展想法
artf
这里讲解了如何创建具有相关样式的组件 https://grapesjs.com/docs/modules/Components.html#components-css 只有在那种情况下，编辑者才会安全地删除相关的样式。
ClaudeCode
谢谢你举报，@pittleCheung。 关于删除组件而不删除对应样式的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something...
#53392023年8月26日作者 rozek2 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ 版本 1.56.20 Chromium：115.0.5790.171（Offizieller 构建）（arm64）可复制演示链接 没有描述一下那个虫子 我希望编辑器中的组件可以通过拖动来移动。经过一些研究，我发现 “JavaScript let Editor = grapesjs.init（{ dragMode：“绝对”， ``` 实现此功能是必要的。至少，我的组件现在可以移动了......但由于编辑器使用包裹器包裹实际组件视图，包装器位置可能是正确的，但视图位置是相对于包装器测量的，这是错误的： <img width=“284” alt=“moving...
rozek
抱歉——这是我这边的问题，在编辑器里才显现出来——抱歉打扰了！
ClaudeCode
谢谢你举报，@rozek。 dragMode：“absolute”行为怪异的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别...
#53192023年8月18日作者 AFriboulet-ii2 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome V116.0.5845.96 可复制演示链接 https://jsfiddle.net/AdrienFriboulet/npdkshaf/8/ 描述一下那个虫子 https://github.com/GrapesJS/grapesjs/assets/128728949/e85b65c4-53ad-43d0-9f5f-74dc0a181dd0 如何复现这个漏洞？开放提供的小提琴 [此处]（https://jsfiddle.net/AdrienFriboulet/npdkshaf/8/）删除一个组成部分的“段落”选择之前的组件，下放并点击工...
artf
谢谢@AFriboulet-ii，我会在下次发布时修复。
ClaudeCode
谢谢你举报，@AFriboulet-ii。 关于Undo不会在组件上刷新类，这个问题问得很好。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somethin...
#52972023年8月10日作者 FahemAhmad2 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ 版本 115.0.5790.171（官方构建）（64位）可复制演示链接 https://codesandbox.io/s/1r0w2pk1vl?file=/index.html描述一下那个虫子 如何复现这个漏洞？...添加此表单类型和表单块 预期的行为是什么？ ...在 getJS 中，我希望编辑器中有相关的 js 代码，我不确定我的期望是否正确，如果不正确，请告诉我该如何实现 目前的行为是什么？ ...getJS（{component}） 返回空字符串 '' 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： “''js 你的代码在这里 Compon...
artf
'getJs' 返回的是你组件模型的 JS（你会放在 'model.defaults.script' 里的那个），而不是组件视图。 请仔细阅读 [组件与JS]（https://grapesjs.com/docs/modules/Components-js.html）
ClaudeCode
谢谢你举报，@FahemAhmad。 关于getJS无法使用的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something chan...
#52932023年8月10日作者 craigharman2 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 篇章 1.1.1 可复制演示链接 https://jsfiddle.net/3bprucnv/3/ 描述一下那个虫子 如何复现这个漏洞？ 为 .gjs-selected 添加自定义 CSS 规则，例如：把边框颜色改成红色。 .gjs-selected { 轮廓颜色：红色; } 预期的行为是什么？ 在 grapesjs 编辑器中选择元素时，选区边框应为红色。 目前的行为是什么？ 边框/轮廓保持蓝色。 注意：所有与选择/高亮相关的其他 CSS 覆盖均已成功覆盖（例如 highlighter、highlighter-sel）行为准则 [X] 我同意遵守本项...
artf
请参考 https://github.com/GrapesJS/grapesjs/issues/3515
ClaudeCode
谢谢你举报，@craigharman。 关于无法覆盖GJS选中的职业，这是个很好的问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somet...
#52742023年8月3日作者 wunksert4 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v114 可复制演示链接 https://github.com/wunksert/remix-grapes-error/tree/main 描述一下那个虫子 如何复现这个漏洞？上文的克隆仓库NPM INPM 运行开发 你会看到葡萄iframe和样板画已经被渲染进画布里。尝试导出，你会发现所有葡萄模板也在渲染到画布里打开开发工具，你会看到错误： 补充背景 预期的行为是什么？ 编辑器应该正确地渲染它的样板，和它一样 目前的行为是什么？ 解析器似乎不起作用。编辑器渲染的是用来封装编辑器DOM的iframe。它还导出所有葡萄JS模板。 如果需要...
artf
@wunksert看起来编辑器会多次初始化自己，你是否正确地用 destroy 清除编辑器实例（例如在 useEffect 中）？
wunksert
也许我编辑项目中的结构或命名规范，解决这个问题会更简单。如果比在 GrapesJS Core 里改动更快，我很乐意这么做。
#52692023年8月2日作者 sannila1 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome 115.0可复制演示链接 https://jsfiddle.net/varyqjo7/描述一下那个虫子 如何复现这个漏洞？创建一个新的 Angular 项目（版本 16.1.3）Install grapesjs 最新版本 （npm i grapesjs）在angular.json（脚本和样式）中添加css和js添加面板 预期的行为是什么？ el 应该接受面板中的对象。 目前的行为是什么？ el 不接受面板的对象 请见下方附件： ![图片]（https://github.com/GrapesJS/grapesjs/assets/4197981...
ClaudeCode
谢谢你举报，@sannila。 关于Object literal可能只指定已知属性，而'el'不存在于类型'PanelProps'中，这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'cha...
#52632023年7月28日作者 pittleCheung4 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 最新版本的Chrome浏览器 可复制演示链接 无效 描述一下那个虫子 如何复现这个漏洞？ <img width=“1666” alt=“image” src=“https://github.com/GrapesJS/grapesjs/assets/114127651/c37e339a-e14f-486b-85fb-34c170b855dd”> 预期的行为是什么？ 目前的行为是什么？ 我用的是 rewrite ctrl + c 和 ctrl + v 的逻辑 <img width=“681” alt=“image” src=“https://github...
pittleCheung
是的，你说得对，我复制了所有匹配的样式，这样我可以粘贴到任何地方，甚至跨浏览器粘贴，我觉得这非常有用。当我删除组件时，对应的样式不会被移除。这是一个大问题，当我在同一个网站上多次复制粘贴时，会导致大量重复的样式，容易引发样式冲突。 所以我不能指望那些风格被简单删除。如果可能的话，我会很感激一些建议。 “如果你复制了所有匹配的样式，它还会包含其他元素使用的样式，所以你不能指望那些样式被简单删除。”
artf
我不明白这怎么会是核心漏洞。 你用的是自己的复制粘贴逻辑，感觉也不对，你应该注意每个组件/规则的唯一ID。删除这些子组件后，它们的样式依然保留。 如果你复制了所有匹配的样式，它还会包含其他元素使用的样式，所以不能指望那些样式被简单删除。 请，如果你提交了bug，务必提供可复现的演示。
#52492023年7月24日作者 pittleCheung3 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 最新版本的Chrome浏览器 可复制演示链接 无效 描述一下那个虫子 如何复现这个漏洞？ 编辑？Css.addRules（targetCss）; 预期的行为是什么？ 编辑？Css.addRules（targetCss）; 它为结尾增添了风格 <img width=“826” alt=“image” src=“https://github.com/GrapesJS/grapesjs/assets/114127651/28425b0a-b9f7-46a8-b8bc-736aa112cc3c”> 目前的行为是什么？ 我帮忙编辑吗？Css.addRules（...
artf
这不是个bug，'Css.addRules'没有任何选项参数。 你可以就这个话题展开讨论，我们可以看看是否有必要引入它
pittleCheung
好的，我明白了，我需要在数组前面添加样式，而不是在最后。比如 arr.unshift（css）。我该怎么做？我可能需要你帮帮我
ClaudeCode
谢谢你举报，@pittleCheung。 关于编辑？的好问题。Css.addRules（targetCss）;.推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => consol...