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

GrapesJS 问题

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

找到 877 个问题

🔍 question
#66182025年10月1日作者 mohamedsalem4011 个回答
0 个反应

提升编辑器性能并修复内存泄漏

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 修复如果不需要传递“collectionsSourceMap”的问题 确保所有听众在不需要时都被清洁 提升“Editor.loadProject”速度 行为准则 [x] 我同意遵守本项目的行为准则

GJS Helper

提升 GrapesJS 编辑器性能和防止内存泄漏对于流畅的用户体验至关重要,尤其是在复杂应用中。让我们来分解一下提出的要点: 1.如果不需要,可以直接传 collectionsSourceMap collectionsSourceMap 一词不是公开的 GrapesJS API 或配置选项。它很可能指的是 GrapesJS 核心内部的数据结构或优化,可能与组件、样式及其他集合的管理和序列化/反序列化有关。如果你在分析过程中观察到这一点,说明大型或复杂的项目数据可能在内部处理...

#66062025年9月12日作者 MisterKeyboard4 个回答
2 个反应

编辑器加载时间很长(有时超过1分钟)

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 描述 编辑器加载时间非常慢。 在复杂的页面(例如包含众多元素和插件如旋转木马的首页),完全加载可能需要长达1分20秒。 但即使是只有少量元素的页面,加载速度仍然明显很慢(几秒钟)。 这种性能问题使编辑器在制作中使用变得困难。 繁衍步骤 打开 GrapesJS 编辑器,创建一个包含多个组件和插件(例如轮播)的页面。 等待编辑器加载。 也可以用只有几个块的简单页面进行测试。 预期结果 编辑器应在几秒钟内加载,无论页面复杂度如何。 实际结...

artf

感谢@MisterKeyboard提供JSON。 你的项目包含了10K风格的规则,数量不少,但我不认为负载会受到太大影响。 @mohamedsalem401我认为我们需要确认数据源相关的更改(例如“StyleableModel.set”)是否对数据🤔源影响过大

mohamedsalem401

@artf会看看并更新情况。

artf

@MisterKeyboard你能分享项目的JSON吗?这样我们可以验证

#66032025年9月4日作者 nanto2 个回答
1 个反应

属性值中不逃避 & 符号

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v142.0.7392.0 (canary) 可复制演示链接 https://jsfiddle.net/xce183nm/1/ 描述一下那个虫子 如何复现这个漏洞? 创建一个编辑器实例,加载包含字符引用的 HTML 代码。 “''js const editor = Grapesjs.init({ 组件: '<body>&lt;p title=“&lt; &amp; &gt;”&gt;</p></body>', }); 预期的行为是什么? 属性值中的符号通过字符引用转义。“p”元素的“title”属性值被解析为“< &amp; >...

artf

谢谢你提供的所有信息和细节,这很有帮助。也谢谢你的宣传。

GJS Helper

你发现了GrapesJSHTML序列化过程中关于属性值转义的一个关键漏洞。问题源于Component模型的renderAttributes方法,它直接将属性值插入HTML字符串,而没有正确的HTML实体转义。这导致输出中出现未转义字符,如&、<和>,破坏往返一致性,并可能导致其他工具的解析问题。 根本原因 当GrapesJS解析HTML,浏览器的DOM解析器会正确解释HTML实体(例如,&lt;变为<,&amp;amp;变为&amp;)。这些未转义的值随后存储在内部Comp...

#65912025年8月20日作者 CES-TechAdmin2 个回答
0 个反应

在 Safari 中,自 v0.22.1 起,拖放方块功能不再正常工作

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Mac 版 Safari 18.5 可复制演示链接 https://codepen.io/jmulik/pen/LEpdjZq 描述一下那个虫子 如何复现这个漏洞? 在Chrome中查看 https://codepen.io/jmulik/pen/LEpdjZq - 支持拖放方块。 在Safari中查看。- 无法放置和放下方块。 预期的行为是什么? 变装和变装在Safari里应该能行。就像Chrome一样。 目前的行为是什么? 在Safari中,方块的拖放功能不起作用。 观察 Safari 中的拖拽功能在 GrapesJS v0.21.13...

them7d

是的,它不能用,因为代码和Safari浏览器不完全兼容 要解决这个问题,你需要在NextJS中使用 grapes ,比如这个页面 https://grapesjs.com/demo.html

GJS Helper

你遇到的拖放功能自 v0.22.1 以来在 Safari 中无法正常工作GrapesJS是与框架存储管理变更相关的已知行为。 根本原因 GrapesJS v0.22.0 对其storageManager进行了重大更新,indexedDB成为默认存储驱动,以提升性能和容量。虽然 indexedDB 整体上很稳健,但 Safari,尤其是在某些情境下,比如 iframes(如你的 Codepen 演示所示)或启用了“防止跨站追踪”等隐私设置时,可能会有更严格的政策或针对inde...

#65902025年8月18日作者 yashvi20262 个回答
1 个反应

能够访问/删除/拖动图层管理器中锁定的组件

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 镀铬 可复制演示链接 https://codepen.io/Harshsne/pen/zxvREjB 描述一下那个虫子 如何复现这个漏洞? 拖拽文本组件 预期的行为是什么? 在图层管理器中不应该选择/拖拽它 目前的行为是什么? 在layermanager中选择/拖拽 甚至尝试过, 'const 图层 = 编辑器。层次; layers.setLocked(comp, true); console.log(layers.isLocked(comp));' 请提供一个解决办法,直到你尽快解决这个问题。@artf 行为准则 [x] 我同意遵守本项目的...

artf

你可以用“可分层:false”属性隐藏组件,或者创建自己的[自定义图层管理器界面](https://grapesjs.com/docs/modules/Layers.html#customization),包含所有需要的UI逻辑。

GJS Helper

你遇到的问题是,锁定的组件仍然可以在GrapesJS图层管理器中被选择、拖拽和删除,这是一个常见的混淆点。GrapesJS组件上的locked属性主要控制画布上的交互(例如,防止直接从画布中选择、拖拽、调整大小和删除)。默认情况下,图层管理器作为独立的UI组件,不会根据组件的locked状态本身限制这些操作。 根本原因 图层管理器的默认LayerView(图层面板中每个组件的可视化表示)在允许选择、拖拽或删除前,不会自动检查其关联组件的 locked 状态。要实现期望的行为...

#65892025年8月16日作者 mohammedmoulla1 个回答
0 个反应

更改根节点后,无法在 layerManager 中拖放元素

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Google Chrome v139.0.7258.128 可复制演示链接 https://codesandbox.io/p/sandbox/relaxed-payne-vt3pgc 描述一下那个虫子 如何复现这个漏洞? 在画布上添加一些元素 尝试在图层管理器中查找元素并拖动或移动它们 预期的行为是什么? 在0.20.2版本中运行得很完美 目前的行为是什么? 不能更改图层管理器树的根节点 ==> 只能更改主体 我尝试了所有方法,但都没用 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: 不,直接打开链接 行为准则 [x] 我同意遵守本项目...

GJS Helper

感谢你报告这个问题并提供了一个清晰可复现的演示。你在尝试更改根目录后遇到的拖放问题,是由于错误地使用了layerManager.root配置选项。 根本原因 GrapesJS初始化配置中的layerManager.root选项期望的是 GrapesJS组件实例,而不是 CSS 选择字符串。当你提供像 "#root"这样的字符串时,GrapesJS要么忽略它,要么无法正确解析到图层管理器拖拽机制可以绑定的组件实例。因此,图层管理器默认使用主包装组件(实际上是画布的 body)...

#65872025年8月13日作者 Sebbones1 个回答
0 个反应

在符号中添加文本会反复替换文本节点

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 开发者 142.0b9,Chrome 138.0.7204.184 可复制演示链接 https://jsfiddle.net/artur_arseniev/ta19s6go/ 描述一下那个虫子 如何复现这个漏洞? 将“文章”部分设为符号 在原始“文章”组件中添加文本组件 直接尝试编辑文本或将光标设在文本内部 预期的行为是什么? 光标并不总是重置到位置0,文本组件也没有闪烁,表现得像普通文本组件。 目前的行为是什么? 光标重置到位置0,几乎无法选择文本 执行恒定编辑器“component:add”事件 在“离开”文本组件并重新选...

GJS Helper

你描述的问题,即在原始符号实例中添加文本组件会导致光标重置、闪烁和持续 component:add 事件,这是 GrapesJS符号更新机制与富文本编辑器(RTE)之间已知的交互冲突。 根本原因 当组件被指定为 GrapesJS中的符号时,会跟踪其结构和属性。对原始符号组件所做的任何更改旨在更新符号定义并传播到其所有实例。问题源自以下事件序列: 动态组件添加: 你在原符号组件被制成符号后,将新文本组件作为子组件添加。 符号更新触发器: 这种结构性变化(添加新子节点)触发 G...

#65832025年8月5日作者 msftedad2 个回答
1 个反应

Windows中的“grapesjs”标志没有定义替代值。

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Edge 版本 135.0.2535.51(官方构建)(64 位),Chrome 版本 135.0.6422.112(官方构建)(64 位) 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 测试环境: 操作系统:Windows 11[版本24H2(操作系统构建版24631.3593)] Edge:版本 135.0.2535.51(官方版本)(64 位) Chrome:版本 135.0.6422.112(官方构建)(64位) 屏幕阅读器:NVDA(2024.4.2) 测试网址:https://grapesj...

artf

嘿,@msftedad网站仓库在[这里](https://github.com/GrapesJS/website),欢迎提交修复后的永久注册([file](https://github.com/GrapesJS/website/blob/main/src/app/(demos)/GrapesEditor.tsx))。我决定关闭这个问题,因为它和核心无关。

GJS Helper

这是一份有效且重要的无障碍漏洞报告,适用于GrapesJS演示页面。问题源于GrapesJS标志的<img>标签中alt属性为空,错误地向屏幕阅读器传达该图像纯属装饰性。对于同时作为首页链接的标志来说,这是一个有意义的元素,需要描述性替代文本。 根本原因 虽然alt属性存在于演示页面GrapesJS标志的HTML中,但它被设置为空字符串(alt="")。根据网页内容无障碍指南(WCAG),空alt属性应仅用于纯装饰性且不传递信息的图片。在这种情况下,GrapesJS标志是一...

#65822025年8月5日作者 msftedad2 个回答
0 个反应

不提供单指针操作模式用于编辑元素拖拽操作。

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Edge:版本 135.0.2535.51(官方构建)(64 位),Chrome 版本:版本 135.0.6422.112(官方构建)(64 位) 可复制演示链接 https://app.grapesjs.com/studio?utmsource=grapesjs&utmmedium=mainTopNav 描述一下那个虫子 测试环境: 操作系统:Windows 11[版本24H2(操作系统构建版24631.3593)] Edge:版本 135.0.2535.51(官方版本)(64 位) Chrome:版本 135.0.6422.112(官方构...

msftedad

大家好,这个问题有最新进展吗?

GJS Helper

你提到的问题凸显了大量依赖拖拽交互的网页构建者常见的无障碍挑战。 GrapesJS默认主要通过鼠标/触摸拖放手势实现块和组件操作,这些操作本身无法通过键盘导航或单指针模式访问,而某些无障碍标准(如 WCAG 2.1 成功标准 2.5.1 指针手势,暗示了路径手势的替代方案)。你看到的“拖放控制”是为鼠标操作设计的,而非键盘激活。 根本原因 GrapesJS 块管理器和添加新组件的画布交互基于指针设备(鼠标、触摸)的直接操作范式构建。没有内置机制仅通过键盘输入从块面板启动“拖...

#65702025年7月20日作者 nanto1 个回答
0 个反应

Parser ignores 'parser.optionsHtml.keepEmptyTextNodes' 选项

GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrom v140.0.7307.0 (金丝雀) 可复制演示链接 https://jsfiddle.net/y3gr69s4/ 描述一下那个虫子 如何复现这个漏洞? 创建编辑器实例,使用 'parser.optionsHtml.keepEmptyTextNodes' 选项集 'true'。 “''js const editor = Grapesjs.init({ 解析器:{ optionsHtml: { keepEmptyTextNodes: true, }, }, }); 获取HTML代码。 “''js const result = ed...

GJS Helper

你准确地发现了GrapesJS中keepEmptyTextNodes选项处理方式的差异,导致HTML输出中被剔除换行。这确实是与解析器配置及其TypeScript定义相关的bug。 根本原因 GrapesJS HTML 解析器(特别是 ParserHtml 模块)设计为直接从顶层 parser 配置对象读取 keepEmptyTextNodes 选项,而非从 parser.optionsHtml中读取。 当你初始化GrapesJS时,你提供的parser对象作为配置传递给内...

浏览所有主题