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

GrapesJS 问题

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

找到 743 个问题

🔍 bug
#65432025年6月15日作者 Zedonboy1 个回答
0 个反应

面板未拆除

GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 镀铬 可复制演示链接 没有 描述一下那个虫子 如何复现这个漏洞? 来自教程 我的CSS风格 预期的行为是什么? 一块空白画布 目前的行为是什么? ... ![图片](https://github.com/user-attachments/assets/254211eb-876a-496c-b392-48543947df22) 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: 行为准则 [x] 我同意遵守本项目的行为准则

GJS Helper

你遇到的问题是,尽管设置了panels: { defaults: [] },“方块”面板仍然可见,这是一个常见的混淆点。panels: { defaults: [] }配置选项确实是为了防止GrapesJS初始化其核心默认面板(比如“图层”或“样式”面板)。 然而,“方块”面板通常是由grapesjs-blocks-basic插件添加的,该插件默认包含并启用GrapesJS。该插件会添加自己的面板和组件,独立于核心panels.defaults设置。因此,仅仅禁用默认面板并...

#65352025年6月6日作者 MikeCraig4183 个回答
0 个反应

BUG(v 1.0.48):粘贴丰富内容会将属性值拆分为单个属性

GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 把你的版本从 1.0.48 改到 1.0.47 描述一下那个虫子 如何复现这个漏洞? 从Word复制丰富的内容 粘贴到 Grapes 我正在使用自架选项 预期的行为是什么? 内容应在编辑器中持续存在 目前的行为是什么? 内容错误 行为准则 [x] 我同意遵守本项目的行为准则

MikeCraig418

补充说明,Grapes 的 HTML 格式内容会消失。HTML存储字符串如下:

artf

你用的是什么富文本编辑器? 你能提供复现它的方法吗(比如我能复制相同的文本)?

GJS Helper

你在 v1.0.48 GrapesJS 遇到的问题,就是粘贴丰富内容(尤其是来自 Microsoft Word 等来源)会导致属性值分裂成单个属性,这是一种已知的回归现象。这通常表现为 style="color: red; font-size: 12px;" 属性被错误解析成 color="red" 和 font-size="12px"等独立属性,导致内容损坏和渲染错误。 根本原因 根本原因很可能是 GrapesJS内部HTML解析或净化逻辑的回归,该逻辑是在1.0.47和...

#65272025年5月22日作者 tim-prom2 个回答
1 个反应

内联样式变形导致编辑器冻结

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 138.0.4 可复制演示链接 https://codesandbox.io/p/sandbox/exciting-lalande-98d5vw 描述一下那个虫子 如何复现这个漏洞? 添加带有内联样式错误组件的页面 编辑器无法加载,整个页面变得无响应。Firefox显示“此页面正在使Firefox变慢”警告 预期的行为是什么? 如果编辑器无法解析CSS,最好在控制台里记录错误,而不是屏蔽整个应用 目前的行为是什么? 编辑器变得无响应 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 编辑。Pages.add({...

artf

谢谢你的报告@tim舞会

GJS Helper

你遇到的问题是因为内联样式变形导致GrapesJS冻结,这是个关键bug,源于编辑器内部CSS解析器处理无效语法,特别是未关闭的评论。 根本原因 问题在于你h3元素的 style属性:<h3 style="text-align: center; / margin-top: 20px;">Test</h3>。 在style属性中,你有一个未封闭的CSS注释:/ margin-top: 20px;。CSS注释必须明确关闭,*/。由于不关闭,GrapesJSCSS解析器(在添加或...

#65182025年5月14日作者 jaredtmartin2 个回答
0 个反应

入门指南没有按原文显示模块

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 136.0.7103.93 可复制演示链接 https://jsfiddle.net/j826eL51/ 描述一下那个虫子 如何复现这个漏洞? 按照“入门指南”页面的步骤操作 当你进入添加方块时,方块不会出现。 预期的行为是什么? 方块应该会出现 目前的行为是什么? 他们没有出现 这可能和另一个问题有关: https://github.com/GrapesJS/grapesjs/issues/2186 但不知为何,入门功能即使更新了CDN,也无法按原文操作。 行为准则 [x] 我同意遵守本项目的行为准则

artf

谢谢你的报告@jaredtmartin

GJS Helper

你遇到的问题,就是按照GrapesJS“入门指南”操作时没有显示区块,这其实是因为你grapesjs.init选项的配置错误,特别是与blockManager和panels设置有关。 根本原因分析 你提供的JSFiddle(https://jsfiddle.net/j826eL51/)包含两种主要配置,防止块在默认GrapesJSUI中显示: blockManager.appendTo: '#blocks':你明确告诉GrapesJS将块附加到带有 ID blocks的 H...

#65152025年5月13日作者 jsxOverdose2 个回答
0 个反应

调整元素大小会影响所有具有相同类的元素

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 136.0.7103.93 可复制演示链接 https://jsfiddle.net/L4pu0tzc/ 描述一下那个虫子 如何复现这个漏洞? 向编辑器添加多个图像元素。 为每张图像赋予相同的类名(例如,class=“shared-class”)。 选择并调整其中一张图片的大小。 预期的行为是什么? 只有选定的图片应该被调整大小,无论共享的类名或其他属性如何。 目前的行为是什么? 所有同类元素都会同时调整大小,即使只选中一个。 系统似乎在设置样式时优先考虑类名而非 ID,导致无意中出现全局样式更改。 行为准则 [x] 我同意遵守...

artf

确保开启此选项:https://grapesjs.com/docs/modules/Selectors.html#component-first-selectors

GJS Helper

你遇到的问题是,在 GrapesJS中,用共享类调整元素大小会影响所有该类元素,这是 中已知的行为,源于它管理和应用 CSS 样式的方式。默认情况下,GrapesJS 通常会通过在类选择器下将样式分组来优化 CSS。当你调整组件大小时,GrapesJS可能会把这解读为关联类的样式变化,而不是对具体组件实例应用内联样式。 根本原因: 当组件大小被调整时,GrapesJS会更新其width和height属性。如果组件有一个或多个类,GrapesJS的内部样式管理逻辑可能会决定更...

#65022025年4月25日作者 jsxOverdose2 个回答
0 个反应

内联样式覆盖基于ID的CSS规则

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v135.0.7049.96 可复制演示链接 https://jsfiddle.net/bqkLwt8j/ 描述一下那个虫子 当元素具有内联样式且匹配基于ID的CSS规则时,ID选择器的样式会被移除——即使内联样式不会覆盖这些属性。然而,基于类的 CSS 规则不会出现这个问题,因为它们的行为符合预期。 如何复现这个漏洞? 为特定ID添加CSS规则,例如“#frame2 { color: red; }` 添加带有该ID和内联样式的元素,例如'<div id=“frame” style=“font-size: 14px;”>'” 注...

artf

谢谢你的报告@jsxOverdose 下次版本会修复

GJS Helper

你准确识别了GrapesJS中内联样式似乎完全覆盖基于ID的CSS规则,即使是对无冲突属性的属性。这确实偏离了标准CSS专一性规则,可以看作GrapesJS内部样式管理处理内联样式与ID选择器交互时的一个bug。 根本原因分析 在标准CSS中,特异性要求内联样式(style="...")具有最高的特异性,其次是ID选择器(#id),然后是类选择器(.class),最后是元素选择器(tag)。当一个元素适用多条规则时,具有较高特异性的规则优先用于冲突属性,而低特异性规则中的非...

#64942025年4月15日作者 yashvi20261 个回答
0 个反应

反复创建和摧毁会判错

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://codepen.io/Harshsne/pen/QwwLjBQ 描述一下那个虫子 如何复现这个漏洞? 点击创建,然后快速且反复地摧毁。 调试时,我发现错误由以下代码引起: 未定义的“allcomponents”错误由:(editor.select 代码)引起。 未定义的“最后组件”错误: 将样式添加到组件会触发 stylable:change 事件,如果你的侧面函数仍在运行并且在此期间点击 Destroy,会报错。 ![图片](https://github.com/user-attachments/asse...

GJS Helper

你遇到的 GrapesJS问题,即反复快速创建和销毁编辑器导致 undefined 'allcomponents' 和 undefined 'lastcomponent'等错误,是异步操作或快速生命周期变更中竞赛条件和状态不一致的经典例子。这通常发生在新编辑器实例初始化时,而前一个实例仍在被销毁过程中,或者内部GrapesJS事件监听器或计划任务试图对部分或完全销毁的编辑器实例进行操作。 根本原因分析 editor.select(wrapper)与undefined 'al...

#64852025年4月10日作者 yashvi20262 个回答
0 个反应

ShowSelectionPalette 无法与自定义色彩选择器配合使用

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://codepen.io/Harshsne/pen/GgRbMyg 描述一下那个虫子 如何复现这个漏洞? 添加文本框。启用RTE。 点击最后一个选项。 变色 点击 好 预期的行为是什么? 重新打开颜色选择器时,选中的颜色应该是可见的。 目前的行为是什么? 重新打开选色器时,选中的颜色不会显示。 ![图片](https://github.com/user-attachments/assets/e5f02996-120b-486c-ade6-f75e7d2e776f) 行为准则 [x] 我同意遵守本项目的行为准则

mosh-tudor

@yashvi2026 你的代码有很多问题,这就是它无法正常工作的原因。 这和GrapesJS无关。 如果你不确定问题出在哪里,可以考虑用AI工具检查代码。

GJS Helper

你遇到的问题,GrapesJS的富文本编辑器(RTE)中的自定义颜色选择器在重新打开时不会显示之前选中的颜色,这源于自定义颜色选择器的onOpen实现没有正确初始化其界面,并未正确初始化GrapesJS当前的颜色值。 根本原因 当GrapesJS打开通过rte.colorPicker定义的自定义颜色选择器时,它调用onOpen函数,传递一个包含当前选中文本(如果有)color的opts对象,一个onSelect回调来应用新颜色,以及一个el(选择器应渲染的DOM元素)。你当...

#64582025年3月20日作者 accvi4 个回答
1 个反应

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) ☝️

#64472025年3月15日作者 brighterfrog2 个回答
0 个反应

故障报告:导航菜单无法响应

描述 导航菜单无法正确响应移动设备上的屏幕尺寸变化。 繁殖步骤 打开页面构建器 添加导航菜单组件 在移动设备上预览或调整浏览器窗口大小 观察菜单行为 预期行为 菜单在移动端应合并为汉堡菜单 菜单项应合理间隔 下拉菜单应适用于触摸设备 当前行为 菜单在移动端扩展 项目重叠 触碰响应差 环境 浏览器:Chrome 120 设备:iPhone 13 操作系统:iOS 17

artf

@brighterfrog遵守漏洞报告模板很重要。 请开启一个有效的bug报告(附带可复现的演示)。

GJS Helper

你遇到的GrapesJS导航菜单在移动设备上不响应是常见的挑战,因为GrapesJS主要提供结构组件。实现一个完全响应式、可折叠的导航菜单(通常称为“汉堡菜单”)需要自定义的媒体查询CSS和切换功能的JavaScript。GrapesJS并不会自动将这种复杂行为注入默认组件中。 根本原因 GrapesJS导航栏组件默认提供基本的nav结构,通常使用 flexbox 进行水平排列。然而,它不包含隐藏完整菜单并在小屏幕上显示汉堡图标的具体 CSS 媒体查询,也不包含在点击汉堡图...

浏览所有主题