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

GrapesJS 问题

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

找到 877 个问题

🔍 question
#66632025年11月26日作者 lexoyo4 个回答
0 个反应

符号在逐步加载页面时会断裂(实例丢失__symbol链接)

这里有一段展示这个bug的视频: https://github.com/user-attachments/assets/0fdc76ed-cee5-4481-98b1-cbbf52572b31 GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 最新版和 Chrome v141.0.7390.122 可复制演示链接 https://canary.silex.me/ 如果需要,我可以用小提琴或代码笔,或者你也可以用 https://canary.silex.me 复刻(你需要 gitlab.com 账号),不需要设置,bug会立即复制 甚至更简单,不用 gitlab.com 账号...

lexoyo

哦,如果你告诉我应该重点解决什么方案(比如重新连接实例的命令、像我在 silex 里做的那样用异步方法加载项目数据,我很乐意贡献......) CC @artf

artf

是的,看起来是这种加载🤔页面方式的问题 我这边(满载项目)没看到什么问题。为什么要用这种方式加载页面?

lexoyo

是的,看起来这种加载🤔方式确实有问题,我这边(满载项目)没看到问题。为什么要用这种方式加载页面? 这样可以避免主线程被阻塞太久。当用户加载真实网站时,通常会显示脚本冻结浏览器的警告。还是说有我不知道的机制可以加载这些网站?

#66592025年11月25日作者 NilLlisterri4 个回答
1 个反应

符号样式未同步

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 145.0(64位) 可复制演示链接 https://jsfiddle.net/arturarseniev/ta19s6go/ 描述一下那个虫子 如何复现这个漏洞? 进入官方的[Symbols演示](https://jsfiddle.net/arturarseniev/ta19s6go/),创建一个符号并更改主符号的文字颜色。实例符号不会更新。 预期的行为是什么? 符号样式应更新,如[公关视频](https://github.com/GrapesJS/grapesjs/pull/3165)所示。 目前的行为是什么? 样式不会更...

NilLlisterri

明白了,如果我想在符号里样式并分享更改,我应该给它添加类。 谢谢你们的帮助!

lexoyo

你好 这个颜色被应用到元素上,在 Grapesjs 中,这意味着它会生成一个 CSS,比如 '#compid { color: red; }但 ID 在 HTML 页面中是唯一的,因此另一个符号的 ID 不同 这对我来说也是个问题,我不确定该怎么处理......也许@artf有点想法

artf

抱歉,这不是bug,而是“功能”。 😅 依我看,组件样式不应该绑定在符号上;这是覆盖同一符号之间样式的简单方法(很常见)。如果你需要相同的风格,你只需利用这些职业。

#66552025年11月20日作者 yvoroniak-infusemedia3 个回答
1 个反应

我在正确换色时遇到了colopicker的卡顿问题

https://github.com/GrapesJS/grapesjs/blob/f59e981f76ff378f59c06cf706af88e502db098e/packages/core/src/utils/ColorPicker.ts#L2407C5-L2415C6 我追溯到这些线,发现当将HEXA转换成RGBA时,这些线条会导致结果混乱。 有没有特别的理由要刻意支持传统ARGB?

artf

谢谢你的报告。这本该在这里解决 https://github.com/GrapesJS/grapesjs/pull/6672

yvoroniak-infusemedia

例如: “#ff000077”(透明红色)正在转换为“#000077”(蓝色调)。 我试过用 Monkey Patch 它,但感觉 Grapes JS 内部使用自己的实现,而不是绑定在 Windows 上的那个。(对我来说很不幸) 如果能修复这个问题或者让这些功能自由定制就好了。 谢谢。

GJS Helper

你提到的 GrapesJS ColorPicker 在正确颜色转换时遇到困难的问题,特别是从 HEXA 到 RGBA,以及你对潜在遗留 ARGB 支持的观察,都反映了对十六进制色彩格式的普遍误解。你提到的 GrapesJS ColorPicker 工具(packages/core/src/utils/ColorPicker.ts#L2407C5-L2415C6)是用 alpha 通道解析标准 CSS 十六进制颜色值,这些通道遵循 #RRGGBBAA 格式。在此格式中: RR...

#66542025年11月19日作者 zjt-dev4 个回答
0 个反应

富文本编辑器无法激活

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬V91 可复制演示链接 https://codepen.io/asenper/pen/QwNMwpV 描述一下那个虫子 我本以为点击文本时RTE会打开,但什么都没发生。 这是个bug,还是我漏掉了额外的配置? 行为准则 [x] 我同意遵守本项目的行为准则

artf

默认情况下,文本部分通过双击激活 https://github.com/GrapesJS/grapesjs/blob/f59e981f76ff378f59c06cf706af88e502db098e/packages/core/src/dom_components/view/ComponentTextView.ts#L22

zjt-dev

<img width=“1382” height=“393” alt=“Image” src=“https://github.com/user-attachments/assets/6a3850b9-91ed-43de-b9ae-1a2f703e6f02” /> <img width=“695” height=“468” alt=“Image” src=“https://github.com/user-attachments/assets/2a62ad3b-ed7a-4d8...

artf

导入通用HTML时,很难准确检测文本成分。如果你有编辑 HTML 的能力,可以通过 gjs 属性 '<div data-gjs-type=“text”>Insert...' 来强制执行。

#66512025年11月17日作者 DavidHarvey2 个回答
0 个反应

将可文本组件移动到文本时,可丢弃功能被忽略

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 142.0.7444.61 可复制演示链接 https://codepen.io/DavidHarvey-the-lessful/pen/ZYWeMbG 描述一下那个虫子 当将“可丢弃”组件移动到“文本”组件时,组件“可丢弃”状态会被忽略。 如何复现这个漏洞? 尝试将可文本组件拖拽到文本组件中,使用“droppable: false”。 预期的行为是什么? 作为用户,我认为将 droppable 设置为 false 可以防止内部组件丢失。 目前的行为是什么? 放弃是允许的。 行为准则 [x] 我同意遵守本项目的行为准则

artf

https://github.com/GrapesJS/grapesjs/pull/6652#issuecomment-3551018995

GJS Helper

你遇到的问题是,当textable组件被拖入GrapesJS text组件时,droppable: false会被忽略,这是GrapesJS集成富文本编辑器(RTE)并处理textable组件时已知的行为。 根本原因 在GrapesJS中,组件上的droppable属性主要控制在GrapesJS组件树结构中是否可以作为子组件添加其他GrapesJS组件。例如,如果你有一个div组件,droppable: false,你不能将另一个div组件作为子组件拖入该组件。 然而,Gr...

#66462025年11月11日作者 soul-media3 个回答
0 个反应

当我想添加填充时出现JavaScript错误

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 与 Firefox 可复制演示链接 描述一下那个虫子 如何复现这个漏洞? Chrome 和 Firefox: 为图片/文本添加填充 有时会出现错误,有时不会发生。 https://github.com/user-attachments/assets/01270f08-974d-4898-bde0-83233f9258e0 目前的行为是什么? 铬 错误如下:Uncaught InvalidCharacterError:未能在“Element”上执行“setAttribute”:“0”不是有效的属性名。 这是我添加填充前的文字样子。...

trebor94

我也遇到了同样的问题,同时也在使用grapesjs-mjml插件。显然,只有在加载一个项目时,且该项目在组件attributes上存在style属性时才会出现。每次在编辑器中做了一次更改后,style属性都会被扩展,old value会加上最新的值,项目的JSON会呈指数增长。 我尝试了不同版本的 grapesjs,从版本 0.22.2 开始往上。到了版本 0.22.6 时问题开始出现,所以在发布 0.22.5 到 0.22.6 之间某个时候,这个 bug 应该被引入了。在...

trebor94

很遗憾,我没能弄清楚在导出之前加载的项目数据时,'style'属性会在哪里、什么时候被添加到组件的'style'里。也许有人能找出问题的原因。 @soul-media:顺便说一句,给“mjml”组件补丁“init”方法作为变通方法似乎有效,并且阻止了“style”属性在项目数据导出时添加(即使加载了之前保存的项目)。这似乎即使在“0.22.14”版本下也能正常工作,JSON输出会和你截图右侧的差不多。 要修补该函数,可以使用 'grapesjs-mjml' pluginsO...

GJS Helper

看起来你在 GrapesJS遇到了一个bug,特别是在使用MJML组件并应用样式(如填充)时,导致生成和存储无效属性。这个问题似乎是回归,因为它在旧版本(0.22.2)中有效,但在新版本中失败。 根本原因分析 问题的核心在于 GrapesJS 如何序列化和反序列化组件属性,尤其是针对MJML元素。当你添加填充或其他样式时, GrapesJS 有时会错误地生成纯数字名称的属性(例如, 0="font-size:30px", 1="font-size:30px"),覆盖在 mj...

#66412025年11月8日作者 bilogic2 个回答
0 个反应

在设置扩展模型默认值时出现错误

GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 版本 141.0.7390.123(官方构建)(64位) 可复制演示链接 https://codesandbox.io/p/sandbox/jovial-elion-js8zgy?file=%2Findex.js%3A1%2C1-15%2C1 描述一下那个虫子 上述方法在 0.15.x 中有效,但在 0.22.13中不行。有人知道问题出在哪里吗? 行为准则 [x] 我同意遵守本项目的行为准则

artf

嘿,@bilogic你的演示似乎用的是正确的 API 来扩展组件,那个依赖 '.extend(' 的 API 早就被放弃了

GJS Helper

你在扩展GrapesJS组件模型,特别是“链接”类型时遇到的问题,并试图通过直接引用linkType.model.prototype.defaults设置其defaults属性,是 0.15.x 和 0.22.13 之间的行为GrapesJS变化。这种变化很可能是由于 Backbone 的 extend 方法(GrapesJS组件基于它构建)或 GrapesJS组件系统本身在模型继承过程中处理 defaults 属性的方式进行了内部更新。 根本原因 在较早的GrapesJS...

#66342025年10月28日作者 ssteele3 个回答
0 个反应

无障碍错误

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 141.0.7390.123 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 我们的应用服务于要求所有页面对所有用户均可访问的客户。我正在运行最新的 Grapesjs 库: “package.json “grapesjs”: “0.22.13”, “grapesjs-blocks-basic”: “1.0.2”, “grapesjs-preset-webpage”: “1.0.3”, <img width=“1728” height=“1117” alt=“Image” src=“...

niemyjski

我也看到了这种行为。

artf

这与 https://github.com/GrapesJS/preset-webpage 相关 你可以自由地在插件上更新样式,或者提交带有修复的PR。

GJS Helper

在像GrapesJS这样复杂、动态的网页编辑器中实现完全无障碍合规需要仔细考虑和定制。WAVE评估工具经常会发现缺少ARIA属性、对比度不足以及交互组件中使用的非语义元素等问题。虽然GrapesJS提供了坚实的基础,但一些默认UI元素可能缺乏获得满分所需的明确无障碍属性。 以下是WAVE等工具报告的常见无障碍问题的详细说明,以及如何在您的 GrapesJS 实施中解决这些问题: 1.缺少ARIA属性和角色(例如面板按钮、标签页) GrapesJS UI中的许多互动元素,如面...

#66292025年10月14日作者 paolotozzo1 个回答
0 个反应

默认组件样式错误应用到v0.22.10+ 中的设备特定媒体查询

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 最新版本 可复制演示链接 https://app.grapesjs.com/studio 描述一下那个虫子 如何复现这个漏洞? 初始化 GrapesJS 编辑器,使用默认设备配置 切换到平板或移动设备视图 添加文本块组件(或任何带有默认样式的组件,例如边距:10px) 切换回桌面视图 注意默认样式不会应用到桌面 预期的行为是什么? 默认组件样式应始终应用于基础CSS规则(不使用媒体查询),无论编辑器当前选择的是哪种设备。 目前的行为是什么? 默认样式应用于当前选择设备的媒体查询,导致: 在平板/移动端添加组件时,桌面缺少样式 在...

GJS Helper

你描述的问题是 GrapesJS v0.22.10+ 引入的一个已知行为变化,即当添加组件时,默认组件样式会错误地应用到设备特定媒体查询中,而非桌面设备视图正在激活。这导致样式在切换设备时消失或不一致。 根本原因 过去, GrapesJS 通常会将默认组件样式应用到基础CSS规则上(不使用任何媒体查询),确保它们是全局活跃的。设备特定的样式随后会作为覆盖添加。然而,在最近的版本中,当组件在编辑器中选择特定设备(例如平板、移动端)时, GrapesJS的内部样式处理似乎会隐式...

#66232025年10月10日作者 zhengtulymGh1 个回答
0 个反应

自定义动态列表在绑定数组并展开行以匹配长度后会冻结

GrapesJS版本 [x] 我确认使用最新版本GrapesJS 你用的是什么浏览器? 140.0.7339.214(正式版本) (x8664) 可复制演示链接 https://codesandbox.io/p/devbox/d27l6n 描述一下那个虫子 我想基于GrapesJS创建一个自定义的动态列表组件(默认为3行)。它可以绑定到数组变量,并根据数组长度动态改变容器中的行数。现在我遇到了冻结问题。重现步骤如下: 点击左侧的变量标签,创建一个长度为4的新数组变量。 [![请输入图片描述][1]][1] 回到组件标签,将动态列表容器组件拖到画布上。 选择你刚拖入的动态列表组件。右侧的样式标签页会显示一个下拉菜单,用于绑定数组变量...

GJS Helper

你在GrapesJS中遇到的自定义动态列表组件冻结的问题,是典型的事件反馈循环。这是因为负责更新行计数的事件监听器过于宽泛,导致它在无限循环中重新触发。 根本原因 你的editor.on('component:update:attributes', ...)监听器设计成在组件的任何属性被更新时做出反应。当你将数组变量绑定到动态列表组件时,其DLATTRARRAYVAR属性会发生变化,正确触发监听器并随后ensureRowCountByArray。 ensureRowCoun...

浏览所有主题