PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验
已收录 3,464 个 GitHub 问题 — 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。
找到 3,464 个问题
GrapesJS版本 [x] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ Chrome v133 可复制演示链接 https://jsfiddle.net/2hjdrb7L/1/ 描述一下那个虫子 如何复现这个漏洞？ 使用grapesjs v0.22.x 初始化一个 grapesjs 编辑器，并使用 grapesjs-touch 插件 v0.1.1。 预期的行为是什么？ 在移动端，使用工具栏的移动处理程序应该能像之前版本那样将组件移动到另一个位置。 [链接]（https://jsfiddle.net/h1nzadq0/）用grapesjs v0.21.13演示，运行正常。 目前的行为是什么？ 拖动组件时会出现下落指示...
bamiendev
同样的问题
federica-capobianco
你解决了吗？我也面临类似的问题
Shuja-Mahmood
问题在 v0.22.6 依然存在
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组件...
GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Safari 18.3 Macos 14.7.3 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？ 在右侧面板打开图层管理器 尝试隐藏“身体”，或者打开它 或者点击一个元素，图层显示在图层管理器列表中，然后尝试隐藏/打开/拖动 预期的行为是什么？ 隐藏、拖拽或打开图层的图标应该会出现 目前的行为是什么？ 没有图标显示，拖曳也没用 下面是Safari上的截图： <img width=“760” alt=“Image” src=“https://github.com/user-a...
GJS Helper
看起来你遇到了Safari特有的渲染问题，特别是它处理flexbox布局以及可能的图标字体的方式。GrapesJS图层管理器使用Flexbox结构来管理图层物品，Safari有时会误解或折叠这些布局中的元素，导致图标缺失和拖拽手柄失效。 根本原因 该bug的主要原因通常与Safari对flexbox属性的独特解释有关，特别是Flex item的flex-shrink和min-width计算方式。在GrapesJS图层管理器中，.gjs-layer-item-actions容...
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，在许多...
GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://codepen.io/Harshsne/pen/gbYjOWO 描述一下那个虫子 如何复现这个漏洞？ 我已经在单击下调用了 onactive，这样我就能在一键内编辑文本框。 光标应该放在我点击的位置，这也是双击事件中发生的情况（双击变成单点击时预期的效果）。 预期的行为是什么？ ...光标应该放在我点击的位置 目前的行为是什么？ ...光标指向文本框的起始位置 ![图片]（https://github.com/user-attachments/assets/3eccac92-94e7-4004-8034-...
mohamedsalem401
嘿，我检查过你的代码并尝试调试。在我看来，代码没有把鼠标事件传递给 onActive 方法，而 onActive 是必须的： “''js componentEl.addEventListener（'click'， （ev） => { component.view.onActive（ev）; });
GJS Helper
谢谢你举报，@Harshsne26。 关于光标位置错误的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组...
GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 131.0.6778.265 可复制演示链接 https://codepen.io/chipikaf/pen/KwPexjL 描述一下那个虫子 如何复现这个漏洞？ 将按钮组件放在中间部分 将按钮在该区域任意移动 元素调整大小 预期的行为是什么？ 将元素调整到其原始位置 目前的行为是什么？ 该元件被移到一个意想不到的位置 行为准则 [x] 我同意遵守本项目的行为准则
ChipiKaf
@artf我本地有解决办法。基本上我会检查元素是否有相对位置的父元素，然后如果存在且位置相对，则将矩形体偏移为父节点的高度。 如果可以的话，我可以帮它创建一个永久纪录？
GJSBlock
谢谢你举报，@ChipiKaf。 关于在启用绝对拖拽时，子节点调整大小时在父位置中出现了错误元素，但相对位置是错误的，这个问题很棒。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.l...
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-...
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
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v131 可复制演示链接 https://jsfiddle.net/0uaxn2vc/2/ 描述一下那个虫子 如何复现这个漏洞？打开小提琴链接选择可以添加组件的主体或其他组件尝试只通过点击方块添加组件，不要拖放以前能用，但现在即使在 BlockManager 配置里用 appendOnClick： true 也不能了 预期的行为是什么？ 组件应仅点击添加 目前的行为是什么？ 控制台错误：“BlockView.ts：58 未捕获类型错误：c.setDropContent 不是函数”，组件未被添加行为准则 [X] 我同意遵守本项目...
artf
感谢@rhoenerSBS问题已修复，[这里]（https://github.com/GrapesJS/grapesjs/pull/6346），并将在下一个版本中提供。
GJS Helper
GrapesJS的 BlockManager 中的appendOnClick选项在最近版本中确实坏了，导致了Uncaught TypeError: c.setDropContent is not a function错误。这个问题源于BlockView在启用appendOnClick时点击事件处理方式的变化。 根本原因 在GrapesJS中，当用appendOnClick: true点击一个方块时，BlockView尝试模拟一个掉落动作。它试图调用目标组件（错误信息中的c）...
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...