#66512025年11月17日作者 DavidHarvey2 个回答
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...
#66412025年11月8日作者 bilogic2 个回答
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...
#66292025年10月14日作者 paolotozzo1 个回答
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 个回答
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...
#66062025年9月12日作者 MisterKeyboard4 个回答
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 个回答
GrapesJS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v142.0.7392.0 (canary) 可复制演示链接 https://jsfiddle.net/xce183nm/1/ 描述一下那个虫子 如何复现这个漏洞? 创建一个编辑器实例,加载包含字符引用的 HTML 代码。 “''js const editor = Grapesjs.init({ 组件: '<body><p title=“< & >”></p></body>', }); 预期的行为是什么? 属性值中的符号通过字符引用转义。“p”元素的“title”属性值被解析为“< & >...
artf
谢谢你提供的所有信息和细节,这很有帮助。也谢谢你的宣传。
GJS Helper
你发现了GrapesJSHTML序列化过程中关于属性值转义的一个关键漏洞。问题源于Component模型的renderAttributes方法,它直接将属性值插入HTML字符串,而没有正确的HTML实体转义。这导致输出中出现未转义字符,如&、<和>,破坏往返一致性,并可能导致其他工具的解析问题。 根本原因 当GrapesJS解析HTML,浏览器的DOM解析器会正确解释HTML实体(例如,<变为<,&amp;变为&)。这些未转义的值随后存储在内部Comp...
#65902025年8月18日作者 yashvi20262 个回答
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 状态。要实现期望的行为...
#65872025年8月13日作者 Sebbones1 个回答
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...
#65822025年8月5日作者 msftedad2 个回答
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(官方构...
GJS Helper
你提到的问题凸显了大量依赖拖拽交互的网页构建者常见的无障碍挑战。 GrapesJS默认主要通过鼠标/触摸拖放手势实现块和组件操作,这些操作本身无法通过键盘导航或单指针模式访问,而某些无障碍标准(如 WCAG 2.1 成功标准 2.5.1 指针手势,暗示了路径手势的替代方案)。你看到的“拖放控制”是为鼠标操作设计的,而非键盘激活。 根本原因 GrapesJS 块管理器和添加新组件的画布交互基于指针设备(鼠标、触摸)的直接操作范式构建。没有内置机制仅通过键盘输入从块面板启动“拖...
#65702025年7月20日作者 nanto1 个回答
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对象作为配置传递给内...