#57462024年3月12日作者 rhoenerSBS4 个回答
GrapesJS 版本 [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
是的，我明白问题所在。逻辑需要考虑父节点在容器外的情况。让我看看能不能做。
#57202024年3月6日作者 bernesto2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 https://jsfiddle.net/n38vbktg/ 描述一下那个虫子 如何复现这个漏洞？创建一个组件，传播包含可分层=true的默认值。 在“有能力”下引入一条评论。 预期的行为是什么？ 评论要么保持隐藏，要么不会导致错误。 目前的行为是什么？ 编辑器将该注释视为 HTMLElement。当编辑器尝试从节点读取不存在的属性（如 getComputedStyle 或 getClientRects）时，会触发多个错误。这两种方法都应先进行检查。或者——应为注释引入一个新类型，覆盖从父节点传播的默...
GJS Helper
这是一个有效的错误报告。问题出在GrapesJS的组件系统，尤其是传播layerable: true时，试图将HTML注释节点当作标准HTML元素来处理。这会导致在HTMLElements上调用特定于s的方法，如getComputedStyle或getClientRects时，Comment节点上出现错误。 根本原因 当组件默认中有layerable: true（或继承）时，GrapesJS期望其子节点在图层面板中可渲染。在解析DOM时，GrapesJS遍历所有子节点Nod...
#57182024年3月4日作者 mitcht2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 122.0.6261.95（官方版本）（64 位） 可复制演示链接 https://jsfiddle.net/n4x6L1v0/2/ 描述一下那个虫子 如何复现这个漏洞？保存早期版本 grapejs （0.18）的组件数据尝试将 grapesjs 作为项目数据导入到最新版本 预期的行为是什么？ Grapes 可以简单地替换旧的“textnode”条目，并更新为“封装”式。 目前的行为是什么？ 控制台会触发偏移错误 这段代码并非重现该漏洞的必要条件，但它目前让我能够绕过这个问题。 这里附上了我现有 grapesjs 拖动文...
artf
谢谢@mitcht，但正如我之前提到的，主组件根本不可能是 textnode，所以在核心处理这种情况或开启这个问题都没有意义。 总之，如果逻辑对你有效，就直接在编辑器里用它。
GJS Helper
你遇到的问题是一个已知的破坏性变更，涉及GrapesJS内部组件架构的演进，特别是帧根组件的处理方式。在旧版本（比如0.18）中，帧的默认根组件类型可能是textnode或类似，而在最近版本中，它已被标准化为wrapper。 根本原因 GrapesJS 经历了大规模重构，以提升其核心组件模型、渲染和操作能力。作为这些变化的一部分，wrapper 组件被引入为一个特殊的、不可渲染的容器，作为GrapesJS帧内所有内容的根元素。该wrapper组件对编辑器的内部逻辑至关重要，...
#56772024年2月12日作者 soundharya23252 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子 如何复现这个漏洞？插入带有链接的<a>标签。将浮点数向桌面单元格（td）赋予左或右。 预期的行为是什么？ 在表格单元格中添加浮点右/左后，对齐应该只会改变 目前的行为是什么？ 表格单元格被改成了表格行/表格正体 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： ![表格行]（https://github.com/GrapesJS/grapesjs/assets/159787750/8f713b75-b3d8-4f40-a9f8-be9784...
GJS Helper
你遇到的问题是，当应用float: right或float: left时，<td>元素的显示行为（表现为table-row或table-body）并不是GrapesJS特有的bug。相反，这是CSS float与HTML表元素内在显示模型交互的基本行为。 根本原因解释 HTML 表格元素（<table>， <tbody>， <tr>， <td>）具有独特且严格的显示模型（display: table， display: table-row-group， display: t...
#56682024年2月6日作者 addlistener2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 121.0.6167.139（官方构建）（x86_64） 可复制演示链接 没有。 描述一下那个虫子 如何复现这个漏洞？添加自定义断点并设置断点点击步出直到进入组件文本视图的逻辑 预期的行为是什么？ 源图加载 目前的行为是什么？ ComponentTextView 的 sourcemap 未加载，但已加载于 RichTextEditorModule <img width=“557” alt=“image” src=“https://github.com/GrapesJS/grapesjs/assets/4531670/7b110b3d-...
artf
我只能建议你仔细检查源地图路径 <img width=“346” alt=“截图 2024-02-12 08 45 32” src=“https://github.com/GrapesJS/grapesjs/assets/11614725/ee135460-a758-4aef-96fa-1d1b463c934d”> 例如，如果你尝试通过 CDN 加载 Grapesjs，比如像 'https://unpkg.com/grapesjs'（这里发生重定向），因为这种情况下 URL...
GJS Helper
看起来你遇到的问题是浏览器的开发者工具中ComponentTextView的源阵图无法加载，尽管RichTextEditorModule的源阵图似乎正常工作。这是调试捆绑JavaScript库时常见的困惑点，比如GrapesJS。 理解GrapesJS源地图 GrapesJS，当为分发而构建（如 grapes.min.js），会将其所有模块打包到一个 JavaScript 文件中。对应的 grapes.min.js.map 文件是一个单一的源码映射，包含所有原始源文件（包括...
#56132024年1月12日作者 SachinPuthiyoth1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 没有 描述一下那个虫子 如何复现这个漏洞？根据 https://github.com/GrapesJS/grapesjs/blob/5c890449a52f526bc480d6dc649ff5e01ec59140/src/stylemanager/index.ts#L310 属性的类型 属性类型https://github.com/GrapesJS/grapesjs/blob/5c890449a52f526bc480d6dc649ff5e01ec59140/src/stylemanager/config/config.t...
GJS Helper
你准确指出了GrapesJS中的类型定义不一致。问题源于src/stylemanager/config/config.ts中StyleManagerConfig.sectors.properties声明的类型与其实际用法及预期类型不匹配，意图类型是PropertyTypes（Property对象数组），如 src/stylemanager/index.ts所示。 根本原因 StyleManagerConfig接口，特别是sectors性质，定义为SectorProps[]。...
#55832023年12月26日作者 ronaldohoch4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Edge 最后版本 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 如何复现这个漏洞？打开演示链接点击页眉 ![图片]（https://github.com/GrapesJS/grapesjs/assets/2287371/c166B071-699d-4438-a3bf-0fb07607b45d）切换视图为手机或平板。尝试从头部移除背景。 预期的行为是什么？ 那个编辑器把 background：none 的头部设置成了 目前的行为是什么？ GrapesJS 继承自“桌面”版本，所以无法从移动端移除背景。 使...
artf
这不是bug，而是缺失的功能，我们需要用新的配置扩展栈类型，以实现“空”值。 我会尽量在下一个版本里加入。
artf
de 属性 Background 中的清除图标会完全移除所选设备的属性，使其再次继承桌面设置中的值。 正确图层行中的清除图标会重置栈值，将所选设备的属性设为默认值，移除背景，且不会继承桌面设置。在同一个清除图标中再次点击，该图层会完全移除。 我不确定这是否完全是我想的，但想法是让它按原样工作，但加入一个额外的逻辑，当我移除最后一层时，如果存在新的属性（例如“emptyValue”），我会应用。 这是一种可能的属性类型 “''js emptyValue？： string |（...
gustavohleal
我已经为栈类型插入了一个解。我打算做一个PR，但我想先问你一个问题。我添加的行为是： ![图片]（https://github.com/GrapesJS/grapesjs/assets/22385451/31b5aa67-1de4-4430-a439-e41d6b1cbb21）图层行中的清除图标会重置堆栈值，将所选设备的属性设为默认值，移除背景，且不会继承桌面设置。在同一个清除图标中再次点击，该图层将完全移除。de 属性 背景中的 clear 图标会完全移除所选设备的属性，...
#55702023年12月20日作者 prateekkumar-ec3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 最新版本 可复制演示链接 无（如有需要，我可以分享视频以便进一步交流） 描述一下那个虫子 如何复现这个漏洞？假设你当前页面上有一些内容，上面有一些样式。现在在同一项目中创建一个新页面。点击编辑器标题上的导入按钮，弹窗保持空，然后点击弹窗的导入按钮。现在去检查第一页。它会丢失所有的CSS。 预期的行为是什么？ 如果你在其他页面导入内容，第一页应保持不变。 目前的行为是什么？ 一个页面的样式会因另一个页面没有导入任何内容而受到影响。 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则 [X] 我同意遵守本项目的行为准则
afrinxnahar
如果你能附上一个视频，那就太好了。我不太确定弹出窗口的空功能
artf
@prateekkumar-ec，这不是核心相关的问题。
GJS Helper
这是与 GrapesJS core:import-code 命令处理空CSS输入时的一个已知问题，尤其是在多页面设置中。当点击导入按钮且弹窗中的CSS输入字段为空时，命令内部执行 editor.setStyle('')。此操作清除 GrapesJS CssComposer中当前活跃页面的所有CSS规则。 根本原因 core:import-code 命令设计用于导入 HTML 组件和 CSS 样式。当你将 CSS 输入留空并点击导入时，命令会收到一个空字符串作为 css 选项...
#55252023年11月19日作者 duydvu2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Edge v119.0.2151.72 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 你好，感谢你创建了一个了不起的项目。我想报告使用 GrapesJS时发现的一个问题。 如何复现这个漏洞？选择一个组件添加任意名称的类，直到组件超过20个类。选择另一个组件并重新选择该组件。 预期的行为是什么？ 不应该有性能问题。 目前的行为是什么？ 浏览器会明显卡死一段时间。添加的类越多，卡死的时间越长。当组件有23个类时，我的浏览器会卡顿10秒。 这是使用 TailwindCSS 时常见的问题，因为类很多...
artf
同意建议，我会相应更新。谢谢@duydvu
GJSBlock
谢谢你举报，@duydvu。 关于在单个组件中添加超过20个职业时性能问题的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'somethi...
#54872023年10月28日作者 MaxDBenson3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 可复制演示链接 https://jsfiddle.net/497zkrpm/1/ 描述一下那个虫子 如何复现这个漏洞？选择“Hello World”组件打开样式管理器，确保在类部分勾选了“myclass”检查“高度”和“背景颜色”属性的值 预期的行为是什么？ 样式管理器应反映与所选类相关的所有规则（此处为 .myclass {height: 100px} 和 .myclass {background-color: green} 目前的行为是什么？ 样式管理器只反映与所选类相关的第一个规则（此处为： .myclass {hei...
artf
这不是bug，样式管理器一次只处理一条规则，如果你想要更高级的使用，可以用API实现功能（比如用同一选择器选择不同规则）。
MaxDBenson
这不是个bug，样式管理器一次只处理一条规则，如果你想要更高级的使用，可以用API实现你的功能（比如用同一个选择器选择不同规则）。 我明白了。 你介意详细说说该怎么做吗？ 而且，风格管理器似乎一次只处理一条规则;因为当我选择类时，我会看到属性/值设置被应用到ID上，反之亦然。
GJS Helper
你遇到的 GrapesJS 样式管理器无法显示同一类所有规则的问题，是由于编辑器内部CssComposer和StyleManager与 CSS 规则的交互方式，这是已知的行为。虽然 CSS 本身允许同一选择器使用多个规则块（浏览器会根据级联正确应用所有规则块），但GrapesJS样式管理器的界面主要反映的是与某个选择器关联的单个 CssRule 模型的属性。 根本原因 当GrapesJS解析你的CSS时，它会为每个不同的CSS规则块创建独立的CssRule模型。所以，针对你...