#53722023年9月8日作者 uncldrw1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Windows、Chrome、React 可复制演示链接 / 描述一下那个虫子 当尝试添加自定义 atRules 如 @container 或 @font-face 时，CSS 总是会编译成 @media。我尝试过多种方法，包括使用 Css.setRules 和 Css.addRules，以及插入 HTML 字符串，但都无济于事。 这是我给的代码： 行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
你遇到的自定义AtRules（如@container或@font-face）在使用editor.Css.addRules时被编译成@media的问题，是GrapesJS当前CssComposer中的已知限制。 根本原因 GrapesJS的CssComposer（负责管理 CSS 规则的模块）有一个内部解析器，主要用于处理标准 CSS 规则（带有属性的选择器）和一组特定的 AtRule，尤其是 @media 查询。当CssComposer遇到 AtRule 时，它没有显式识别...
#53462023年8月30日作者 pittleCheung3 个回答
GrapesJS 版本 [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 只有在那种情况下，编辑者才会安全地删除相关的样式。
GJS Helper
你遇到的问题是删除组件后无法移除其对应样式，导致 CSS 重复，这是像 GrapesJS这样的网页构建器常见的挑战。这种行为是 GrapesJS的CssComposer设计，原因有几个： 根本原因解释： 共享样式： CSS 类和规则通常设计为可跨多个组件重复使用。如果删除一个组件自动移除了与其类关联的所有样式，可能会无意中破坏共享这些类的其他组件的样式。 全局样式： 有些样式是全局的（例如，body { margin: 0; }或应用于HTML标签的样式，如p、h1）。这些...
#53392023年8月26日作者 rozek2 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 版本 1.56.20 Chromium：115.0.5790.171（Offizieller 构建）（arm64）可复制演示链接 没有描述一下那个虫子 我希望编辑器里的组件可以通过拖动移动。经过一些研究，我发现 实现此功能是必要的。至少，我的组件现在可以移动了......但是，由于编辑器使用包裹器包裹实际组件视图，包装器位置可能是正确的，但视图位置现在相对于包装器测量，这是错误的： <img width=“284” alt=“moving-component” src=“https://github.com/GrapesJS/grapesjs/...
rozek
抱歉——这是我这边的问题，在编辑器里才显现出来——抱歉打扰了！
GJS Helper
你描述的dragMode: 'absolute'导致组件偏移的问题，确实源自一个根本性的HTML违规：DOM内复制id属性。你的分析和截图准确地定位了根本原因。 根本原因分析 当GrapesJS启用dragMode: 'absolute'时，编辑器会对组件的主包装元素（例如<div class="gjs-comp-wrapper" data-gjs-id="c123">）应用position: absolute并更新top/left CSS属性，以实现自由形式拖拽。这正是预...
#53192023年8月18日作者 AFriboulet-ii2 个回答
GrapesJS 版本 [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，我会在下次发布时修复。
GJS Helper
你描述的问题是GrapesJS中已知的行为，撤销管理器会正确还原组件的模型属性（包括其classes集合），但负责渲染组件的ComponentView在撤销操作后并不总是视觉上重新同步其DOM元素的classList。这导致视觉上的差异，组件仍然显示与已移除的类相关的样式。 根本原因 当你向组件添加类时，GrapesJS会更新组件的内部classes属性（即Selector模型的集合）。ComponentView监听该集合的变更，并调用其syncClasses方法更新实际D...
#52972023年8月10日作者 FahemAhmad2 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 版本 115.0.5790.171（官方构建）（64位）可复制演示链接 https://codesandbox.io/s/1r0w2pk1vl?file=/index.html描述一下那个虫子 如何复现这个漏洞？...添加此表单类型和表单块 预期的行为是什么？ ...在 getJS 中，我希望编辑器中有相关的 js 代码，我不确定我的期望是否正确，如果不正确，请告诉我该如何实现 目前的行为是什么？ ...getJS（{component}） 返回空字符串 '' 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： @ar 行为准则[X] 我同意...
artf
'getJs' 返回的是你组件模型的 JS（你会放在 'model.defaults.script' 里的那个），而不是组件视图。 请仔细阅读 [组件与JS]（https://grapesjs.com/docs/modules/Components-js.html）
GJS Helper
你遇到的问题是，尽管自定义表单组件的view.events里定义了submit事件处理程序，editor.getJs({ component })却返回空字符串，这是预期行为，而不是GrapesJS中的bug。 根本原因 GrapesJS的getJs方法旨在提取 JavaScript 代码，这些代码旨在独立于 GrapesJS 编辑器运行于导出页面。然而，组件view.events对象中定义的事件处理程序主要用于使组件在 GrapesJS 编辑器的 iframe 上下文中保...
#52932023年8月10日作者 craigharman2 个回答
GrapesJS 版本 [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
GJS Helper
你遇到的 .gjs-selected 类不接受你的 CSS 覆盖的问题，是因为 GrapesJS对该类的默认样式使用了 !important 规则。GrapesJS 对 .gjs-selected 应用outline: 3px solid #3b97e3 !important;，确保其选择边界在编辑器中一致显示，防止因不那么具体的 CSS 规则而意外覆盖。 当CSS属性标记为!important时，它优先于所有没有!important标志的其他声明，无论它们的具体性如何。你...
#52742023年8月3日作者 wunksert4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v114 可复制演示链接 https://github.com/wunksert/remix-grapes-error/tree/main 描述一下那个虫子 如何复现这个漏洞？上文的克隆仓库NPM INPM 运行开发 你会看到 grapes iframe和样板都被渲染到了画布里。尝试导出，你会发现所有 grapes 样板也都渲染到画布里打开开发工具，你会看到错误： 补充背景 预期的行为是什么？ 编辑器应该正确地渲染它的样板，和它一样 目前的行为是什么？ 解析器似乎不起作用。编辑器渲染的是用于封装编辑器DOM的iframe。它还...
artf
@wunksert看起来编辑器会多次初始化自己，你是否正确地用 destroy 清除编辑器实例（例如在 useEffect 中）？
wunksert
也许我编辑项目中的结构或命名规范，解决这个问题会更简单。如果比在 GrapesJS Core 里改动更快，我很乐意这么做。
#52692023年8月2日作者 sannila1 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 115.0可复制演示链接 https://jsfiddle.net/varyqjo7/描述一下那个虫子 如何复现这个漏洞？创建一个新的 Angular 项目（版本 16.1.3）安装 grapesjs 最新版本（npm i grapesjs）在angular.json（脚本和样式）中添加css和js添加面板 预期的行为是什么？ el 应该接受面板中的对象。 目前的行为是什么？ el 不接受面板的对象 请见下方附件： ![图片]（https://github.com/GrapesJS/grapesjs/assets/41979819...
GJS Helper
你遇到的问题是，“对象字面可能只指定已知属性，'el' 不存在于类型 'PanelProps'”，是 TypeScript 编译错误。它表明 el 属性在 PanelProps 接口中不是有效或识别的属性GrapesJS。 根本原因 el属性不包含在GrapesJS的PanelProps界面中。GrapesJS中的面板设计为由编辑器的UI系统内部管理和渲染。PanelProps界面定义了诸如id、content、buttons、visible、className和attri...
#52632023年7月28日作者 pittleCheung4 个回答
GrapesJS 版本 [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://g...
pittleCheung
是的，你说得对，我复制了所有匹配的样式，这样我可以粘贴到任何地方，甚至跨浏览器粘贴，我觉得这非常有用。当我删除组件时，对应的样式不会被移除。这是一个大问题，当我在同一个网站上多次复制粘贴时，会导致大量重复的样式，容易引发样式冲突。 所以我不能指望那些风格被简单删除。如果可能的话，我会很感激一些建议。 “如果你复制了所有匹配的样式，它还会包含其他元素使用的样式，所以你不能指望那些样式被简单删除。”
artf
我不明白这怎么会是核心漏洞。 你用的是自己的复制粘贴逻辑，感觉也不对，你应该注意每个组件/规则的唯一ID。删除这些子组件后，它们的样式依然保留。 如果你复制了所有匹配的样式，它还会包含其他元素使用的样式，所以不能指望那些样式被简单删除。 请，如果你提交了bug，务必提供可复现的演示。
#52492023年7月24日作者 pittleCheung3 个回答
GrapesJS 版本 [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.add...
artf
这不是个bug，'Css.addRules'没有任何选项参数。 你可以就这个话题展开讨论，我们可以看看是否有必要引入它
pittleCheung
好的，我明白了，我需要在数组前面添加样式，而不是在最后。比如 arr.unshift（css）。我该怎么做？我可能需要你帮帮我
GJS Helper
你观察到的 editor.Css.addRules() 行为实际上是 GrapesJS CSS API预期且预期的功能。默认情况下，当你使用 editor.Css.addRules(targetCss);时，新的CSS规则会附加在由 GrapesJS管理的样式表末尾。这是许多CSS管理系统中常见的模式，新规则是顺序添加的。 不过， GrapesJS 提供了一个灵活的选项来控制CSS规则的插入点。你正确识别并使用了 at 选项，它允许你指定新规则在样式表中插入的准确索引。当你...