PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验

GrapesJS 问题

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

找到 336 个问题

🔍 style-manager
#64582025年3月20日作者 accvi4 个回答
1 个反应
提问style-manager组件缺陷文档

Sector.setName 不工作

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://jsfiddle.net/qbpodnm4/ 描述一下那个虫子 如何复现这个漏洞？ 在画布中选择一个组件。 访问风格管理器，检查“General”是否被重命名为“Allgemein”。 预期的行为是什么？ 画面显示了“Allgemein”。 目前的行为是什么？ 画面显示“将军”。 例如sector.setOpen（true）即可。 行为准则 [x] 我同意遵守本项目的行为准则

mosh-tudor

@accvi https://github.com/GrapesJS/grapesjs/discussions/6031#discussioncomment-10234496

accvi

难道是我在代码里做错了什么吗？AI帮不上忙。

artf

[@accvi]（https://github.com/accvi） [#6031（回复帖中）]（https://github.com/GrapesJS/grapesjs/discussions/6031#discussioncomment-10234496） ☝️

查看详情
#64072025年2月16日作者 gopukinapp2 个回答
0 个反应
组件缺陷提问style-managertypescript

自定义特征不会在自定义块内加载

GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 133.0.6943.98 可复制演示链接 https://codesandbox.io/p/sandbox/loving-breeze-mdls43?file=%2Findex.js%3A77%2C6 描述一下那个虫子 我正在尝试给我的方块添加一些自定义 triats，但很遗憾我只能看到默认的 triats [id，title] 我的方块里有很少的 HTML 代码，但如果我移除所有 HTML 代码，只在组件属性里放一个字符串，比如 Hellow World，没有任何 html，triats 就会显示出来 行为准则 [x] 我同意遵守...

artf

你的组件有内部的“组件”，所以如果你选择其中一个，你会看到这些组件的特征，而不是“事件块”。 如果你正确选择“事件块”，你会看到你的特质。 <img width=“856” alt=“Image” src=“https://github.com/user-attachments/assets/a0913237-02f9-44f8-af51-6d151b618a37” /> 顺便说一句，这个 “''js this.view.el.querySelector（“[data-ev...

GJS Helper

你遇到的问题是，当自定义块的components属性包含复杂 HTML 但能加载简单字符串时，自定义特征不会加载，这是与 GrapesJS 解析和管理组件结构相关的已知行为，尤其是在处理 components 属性作为原始 HTML 字符串时。 根本原因 当你用一个原始HTML字符串定义组件的components属性，导致多个子元素（例如<h2>...</h2><p>...</p>），GrapesJS会将该字符串解析成子组件的树。在这种情况下，你的event-block组件...

查看详情
#63762025年1月18日作者 Harshsne261 个回答
0 个反应
提问style-manager缺陷

将最小值设置为StyleManager Config

GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://codepen.io/Harshsne/pen/ZYzjaYe 描述一下那个虫子 预期的行为是什么？ 当最小值设为1时，边框宽度应从1开始递增。 目前的行为是什么？ 但边界宽度的值默认设置为0。（如果是这种情况，可以做什么，将默认值设为“”，并且当我递增时，值应从1开始。） 行为准则 [x] 我同意遵守本项目的行为准则

GJS Helper

你遇到的 min 值不影响 border-width 0 初始显示的问题是常见的混淆点。GrapesJS 风格管理器中的 min 属性主要影响步进/滑块控制和验证，防止值低于指定最小值。它本身并不决定样式属性的初始值或默认值“，尤其是当该属性浏览器默认值为 0（比如 border-width）。 让我们拆解实现你期望行为的解决方案。 根本原因 当组件被添加到画布时，其样式最初是空的。随后应用浏览器的默认样式，意味着border-width实际上会被0（或medium，在许多...

查看详情
#63692025年1月14日作者 hubermat2 个回答
0 个反应
提问style-manager缺陷typescript

边框半径的显示顺序不正确

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v130 可复制演示链接 https://grapesjs.com/demo-newsletter-editor.html 描述一下那个虫子 如何复现这个漏洞？在编辑器中选择任意元素在样式部分，前往边界半径 预期的行为是什么？ 四个角落的边界半径设置显示如下： 左上右上 左下至右 目前的行为是什么？ 底部角落的边框半径设置互换了： 左上右上 右下-左下 <img width=“217” alt=“Bildschirmfoto 2025-01-14 um 11 47 36” src=“https://github.com/use...

DarrenHou1993

这个改动解决了界面问题，但也带来了数值问题。设置左下角半径时，实际上是修改了右下角。

GJS Helper

你提到的 GrapesJS 风格管理器中 border-bottom-left-radius 和 border-bottom-right-radius 显示顺序互换的问题，是旧版 GrapesJS 或特定演示设置默认配置中的已知异常。你已经正确观察到 GrapesJS Studio 已经解决了这个问题，表明新设置或自定义实现中配置已修正。 根本原因 GrapesJS 风格管理器通过结构化配置定义 CSS 属性，包括像 border-radius这样的复合属性。border-...

查看详情
#63652025年1月8日作者 MLMarxx4 个回答
0 个反应
style-manager缺陷提问文档画布

样式管理器未能正确解释后裔选择器

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 131.0.6778.205 可复制演示链接 https://codesandbox.io/p/sandbox/naughty-microservice-5hp3h4 描述一下那个虫子 如何重现该漏洞：将 dark-style 类添加到正文中： js editor.CssComposer.addRules(".dark-style .test-block { margin-top: 50px; }"); 预期行为是什么： 在样式管理器中解释为margin-top： 50px; 当前行为如何： 在样式管理器中没有显示，但在...

artf

是的，这不支持，因为试图匹配任何可能的规则可能会影响性能。 不过你可以通过 [styleManager.select]（https://grapesjs.com/docs/api/style_manager.html#select） 选择任意规则。

MLMarxx

好的，谢谢你的澄清——我现在用的是select，有什么办法用这种方式定位媒体标签吗？

artf

你可以获取你需要的CSSRule（['getRule']（https://grapesjs.com/docs/api/css_composer.html#getrule）），然后传给styleManager.select

查看详情
#63572024年12月13日作者 Harshsne261 个回答
0 个反应
提问style-manager组件缺陷画布

!important is added to every component styles

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://codepen.io/Harshsne/pen/YPKwRBg 描述一下那个虫子 如何复现这个漏洞？从 blockmanager 添加行组件。在样式管理器中更改其宽度。（！重要性是因为默认宽度是100% ！important）。现在添加文本框，改变其宽度。 预期的行为是什么？ 宽度不应加上！important。 目前的行为是什么？ 宽度加上了！important。 在更改行宽度后，如果我们更改画布中任意组件的宽度，宽度会被添加为 ！importance 。 ![20]（https://github.com...

GJSBlock

谢谢你举报，@Harshsne26。 关于！重要性会被添加到每个组件样式，这个问题非常好。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'some...

查看详情
#63182024年11月20日作者 tonypapousek4 个回答
3 个反应
提问style-manager缺陷typescript

无法在Block media svg中使用透明填充

GrapesJS 版本[X] 我确认使用最新版本 [email protected] 本问题提交时间你用的是什么浏览器？ Firefox 132，Chrome 131可复制演示链接 https://jsfiddle.net/x54f9v68/1/描述一下那个虫子 如何复现这个漏洞？添加一个自定义方块， media 属性设置为带有透明填充的SVG查看方块标签，然后 注意填充会自动设置为 currentColor 预期的行为是什么？ 填充应该是透明的 ![截图 2024-11-20 10 38 00]（https://github.com/user-attachments/assets/4e1b546c-9b65-47ec...

samex

我认为这取决于具体使用的SVG。如果你检查其他SVG图标，你会发现它们主标签上没有填充属性（内联），<svg>而是在子<path>标签上。通过在该SVG的两个元素上设置fill=“none”属性<path>，图标应该会正确显示。希望这些建议能帮你解决这个问题！

tonypapousek

@samex 指定“fill=”none“后解决了问题，谢谢！这肯定能让我的自定义内容更可预测地工作。 除此之外，我觉得主要的痛点是尝试使用第三方SVG（比如“反应图标”）或所见即所得输出，但这些输出没有明确设置“填充”属性。考虑到这些用例，除非维护者希望关闭，否则我暂时会保持这个漏洞开放。

artf

是的，我会关闭这个，因为它和核心本身关系不大，但谢谢你指出

查看详情
#62482024年10月22日作者 Frubl2 个回答
1 个反应
提问画布style-managertypescript缺陷

当iframe身体有缩放时，showOffsets bug出现

GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://jsfiddle.net/a2hbxg0y/1/ 描述一下那个虫子 如何复现这个漏洞？打开开发工具，编写 iframe 正体元素样式 - 缩放：n; 目前的行为是什么？ 当鼠标悬停在元素上时，蓝色边框会正常工作，而偏移则不然。它们的大小与缩放时相同：1; 附言：我无法分享完整复制演示的链接，因为CSS的更改需要在Canvas内完成。 附言： 可能已经有合适的缩放方法，但我只找到了整个画布的缩放。我想让其中一种设备类型的缩放更小 行为准则 [X] 我同意遵守本项目的行为准则

artf

你不应该编辑iframe的缩放，应该用[原生API]（https://grapesjs.com/docs/api/canvas.html#setzoom）

GJS Helper

你发现了GrapesJS中与showOffsets特性相关的特定bug，当iframe身体应用了CSS zoom属性时。这是一个合理的观察，我可以确认你描述的行为。 问题确认 当zoom应用到GrapesJS画布iframe的body时，视觉内容会正确缩放（或放大）。蓝色选区边框（轮廓）也会相应缩放，因为它通常是直接应用于元素的CSS属性。然而，showOffsets指示器（显示填充和边距值的蓝色/橙色框）不会缩放;它们的大小与应用zoom: 1相同，相对于缩放内容显得异常...

查看详情
#61522024年9月18日作者 stpp24 个回答
1 个反应
提问组件缺陷style-managertypescript

通过自定义代码添加的CSS在移除自定义代码组件后依然存在

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 任何 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 如何复现这个漏洞？添加带有HTML + CSS的自定义代码组件删除自定义代码组件。 预期的行为是什么？ 所有代码都应被删除，包括CSS 目前的行为是什么？ 自定义CSS不会被移除，但其他部分已经被移除。 [gjs.webm]（https://github.com/user-attachments/assets/3fbd9a6d-ad0e-4fc6-add8-7cf31ae9293c） 行为准则 [X] 我同意遵守本项目的行为准则

artf

这与核心无关，应在[插件]（https://github.com/GrapesJS/components-custom-code）层面处理。请在那里发布问题，我们会尽力找出合适的方法。

mosh-tudor

@stpp2 这其实不算是个bug;它更像是一种功能。:) 试试用“clearStyles”： https://github.com/GrapesJS/grapesjs/blob/d48e1e34a9fa363dcb83fdcca53a89563db17063/packages/core/src/editor/config/config.ts#L260-L272

stpp2

是的，我这里已经启用了“clearStyles”，但很多情况下效果不好。 无论如何，我预计“自定义代码”组件应该有一定的“容器化”，这样移除后文档里不会留下任何东西。

查看详情
#61222024年9月4日作者 mohamedsalem4013 个回答
3 个反应
style-manager组件typescript

修复和重构Sorter.ts

[x] 修正 StyleManager 中的排序器使用情况（包含排序属性层的回归） [x] 基于“Components.canMove”的重构分选器 [x] 更新“canMove”，检查将主符号丢弃在其自身实例内。

mohamedsalem401

这事结束了。

mohamedsalem401

其理念是重构分拣器以提升可维护性和可读性。我们可以实施以下改动：让“Sorter”类依赖抽象树结构，而不是依赖“Component”或“Layers”等具体实现，让“Sorter”类使用更通用、抽象的树结构。这样会让它更灵活、更易重复使用。将代码拆分为多个较小的类，每个类负责单一职责'ComponentManager.canMove': 使用 'ComponentManager.canMove' 方法来判断是否可以移动某个“组件”。这样可以避免代码重复，并确保应用不同部分的...

GJS Helper

此次修复和重构解决了GrapesJSSorter.ts和组件移动逻辑中的多个关键领域，解决了样式管理器中的回归问题，并提升了整体拖放体验，尤其是可重用组件（符号）方面。 1.修复StyleManager中排序器的使用（带有排序属性层的回归） 问题：引入了回归，StyleManager通过拖放排序属性层（例如多个box-shadow或text-shadow值）的能力被破坏。这通常发生在负责拖放重排序的Sorter组件配置错误或未正确集成样式管理器属性层的动态DOM结构时。 解...

查看详情

浏览所有主题