GrapesJS 问题

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

找到 203 个问题

🔍 enhancement
#57432024年3月11日作者 davidgabrichidze4 个回答
5 个反应

Iframe 属性 src 中的 XSS 漏洞

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Edge v122 可复制演示链接 https://jsfiddle.net/bwreyq29/1/ 描述一下那个虫子 如何复现这个漏洞? 打开此链接 [https://jsfiddle.net/bwreyq29/1/](https://jsfiddle.net/bwreyq29/1/),附带在“src”属性上的 JavaScript 代码将自动执行。 预期的行为是什么? 这段代码不应该运行 目前的行为如何? 存在XSS漏洞行为准则 [X] 我同意遵守本项目的行为准则

bernesto

我觉得预读解析师这个选项是个很好的主意。它坚持“按功能插入”的概念。 那更新“fromElement”以接受字符串元素ID或布尔值怎么样?如果 bool == true,则和现在一样,解析容器 HTML。 如果字符串 ID,它会使用元素的内容,容器则像现在一样成为编辑器。然后我们可以更新文档,支持HTML脚本模板用于开发。这样可以防止刹车变化,并促进正确的使用。 “''js const editor = Grapesjs.init({ 容器:“#gjs”, fromElem...

artf

完全同意@bernesto的观点,无论我们多么努力让它安全,都永远不够,我也不想让人觉得库“非常安全”,以至于缺少服务器端验证。 当前选项(例如“allowUnsafeAttr”、“allowUnsafeAttrValue”)只避免了基本的常见内容。

bernesto

使用“fromElement”从激活的DOM元素加载时,这种情况是不可避免的。页面元素同步加载和执行。GrapesJS 永远没有机会处理和解除 XSS 的 html。 这个问题需要通过阻止恶意代码永远加载来解决。这应该在服务器存档时处理。但如果客户端需要处理,可以通过用脚本标签包裹代码,然后在加载到编辑器前对代码进行净化,就像这样: https://jsfiddle.net/bernesto/5gcxa0jm/1/ 我确实看到,在初始化时通过“components”属性加载...

#57182024年3月4日作者 mitcht2 个回答
0 个反应

可能存在升级路径问题,“textnode”从0.18到>版本被改为“wrapper”。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 122.0.6261.95(官方版本)(64 位) 可复制演示链接 https://jsfiddle.net/n4x6L1v0/2/ 描述一下那个虫子 如何复现这个漏洞?保存早期版本 Grapejs(0.18) 的组件数据尝试将 grapesjs 作为项目数据导入到最新版本 预期的行为是什么? Grapes 可以简单地替换 watch 以替换旧的 'textnode' 条目,并更新为“wrapper”输入。 目前的行为是什么? 控制台会触发偏移错误 这段代码并非重现该漏洞的必要条件,但它目前让我能够绕过这个问题。 “''js 修复...

artf

谢谢@mitcht,但正如我之前提到的,主组件根本不可能是 textnode,所以在核心处理这种情况或开启这个问题都没有意义。 总之,如果逻辑对你有效,就直接在编辑器里用它。

ClaudeCode

谢谢你举报,@mitcht。 关于可能的升级路径问题,比如“textnode”从0.18到>最新版本变成了“wrapper”,这建议很棒!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法:* 听取“selector:add”以获取CSS选择器更改 使用“selector:cus...

#57082024年2月27日作者 ravisaxena2 个回答
0 个反应

能够同时更改所有边距、填充等属性

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome最新 可复制演示链接 我们现在运行在本地机器上 描述一下那个虫子 你好,目前 grapesjs 内置了属性,比如边际、填充,允许用户逐一更改每个属性(margin-top、margin-bottom等)。 如果能同时更改所有这些属性会很不错。比如说,有个锁定按钮,启用后会同时更改所有属性,而不是一个一个。 行为准则 [X] 我同意遵守本项目的行为准则

artf

请避免在未阅读模板中漏洞问题的具体目的前打开BUG问题。

ClaudeCode

谢谢你举报,@ravisaxena。 能够将所有边距、填充等属性合并的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更快识别根本...

#56182024年1月15日作者 Ashwinvalento3 个回答
0 个反应

导入时旧组件脚本不会被删除。导致脚本重复

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Edge v120.0.2210.121 可复制演示链接 https://codepen.io/ashwinvalento/pen/jOJMPqx 描述一下那个虫子 如果我们设置了 'config.parser.optionsHtml.allowScripts: true',并用脚本创建组件,那么当我们用 'grapesjs-preset-webpage' 插件导入代码时,脚本标签会被重复。 如何复现这个漏洞? 在演示链接(https://codepen.io/ashwinvalento/pen/jOJMPqx)将“重复脚本块”投放到画布上。(本组件...

artf

直接将 JS 导入为组件从来不可能,所以它被视为一个新的组件。

Ashwinvalento

有没有办法识别现有组件的脚本并在导入时删除它们?我们无法移除所有脚本标签,因为需要保留手动添加的脚本。

ClaudeCode

谢谢你举报,@Ashwinvalento。 关于导入时旧组件脚本不会被删除的建议很棒。导致脚本重复出现!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“ch...

#55632023年12月18日作者 leo-budgetsimple1 个回答
0 个反应

脚本标签的属性正在画布上被移除。

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 最新版本的Chrome浏览器可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 如何复现这个漏洞? 用这段代码用 grapesjs 渲染一个 html 字符串(我启用了 allowScripts) 这是渲染好的画布 ![图片](https://github.com/GrapesJS/grapesjs/assets/107002063/21087a5d-348b-4e16-a349-43243ac8f2e1) 这是可以导出的HTML字符串图片 ![图片](https://github.com/GrapesJS/gr...

ClaudeCode

谢谢你报告,@leo-budgetsimple。 关于脚本标签的属性正在画布上被移除,这是个很棒的建议。!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“c...

#54412023年10月3日作者 padcom2 个回答
0 个反应

没有ID,显示没有样式但带有“script”的元素,导致脚本无法运行这些元素

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome最新款可复制演示链接 https://github.com/padcom/grapesjs-no-id-for-element-example描述一下那个虫子 在创建自定义 GrapesJS 组件时,如果这些组件带有 'script()'(组件的运行时行为)且该组件没有样式,那么根元素没有 'id' 属性,这会导致 'document.querySelectorAll('#<id-goes-here')' 失败,运行时脚本不会被调用。 在给出的例子中,我创建了一个特殊的自定义元素,称为“<content-preview>'(https://g...

artf

问题源于'jsInHtml: false'的使用以及内部JS生成器的处理方式。 我会尽量在下一个版本里修复这个问题。

ClaudeCode

谢谢你举报,@padcom。 没有样式但带有“脚本”的元素ID导致脚本无法运行的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更快...

#53342023年8月24日作者 DreamCloudProject4 个回答
1 个反应

在画布中选择自定义组件类型无法正常工作

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome、Opera、Edge 等 可复制演示链接 https://jsfiddle.net/crszh0jo/6/ 描述一下那个虫子 我正在尝试让它像这里描述的那样工作[[问题] Canvas #951](https://github.com/GrapesJS/grapesjs/issues/951)无法选择自定义组件,但还是没成功。 我怎样才能让画布中的选择功能和图层管理器的选择功能一样?因为这里描述的解决方案对我来说不适用。我需要允许用户从画布中选择自定义组件,而不是每次都打开图层管理器。 行为准则 [X] 我同意遵守本项目的行为准则

DreamCloudProject

@artf 是的,你说得对。我阻止了点击传播,所以编辑器无法接收点击事件,因此无法执行选择元素的逻辑。 我尝试通过在组件内将“e.stopPropagation()”替换为“e.preventDefault()”,将点击传播设置为仅对当前元素进行,现在编辑器中的元素选择逻辑正常了。问题似乎已经解决了。谢谢!

DreamCloudProject

https://github.com/GrapesJS/grapesjs/assets/7961936/12180b41-4c29-489d-9bcd-1ea025a96a8f 这个例子展示了它在我的编辑器中的工作原理。

yatoogamii

你好@DreamCloudProject,看起来你的组件MSC头锁住了。这是一个属性,允许从图层点击组件,但不能从Canva本身点击 你能分享或验证你的组件定义,并检查“锁定”属性是否设置为true吗?

#53122023年8月17日作者 srinivas9772 个回答
0 个反应

列表的富文本编辑器缩进操作的问题

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome V115可复制演示链接 https://jsfiddle.net/srinivas977/ahgLxv6e/10/描述一下那个虫子 如何复现这个漏洞?在提供的JSFiddle中,包含一对文本行和选择列表。接着,添加一个子列表,然后添加子列表。之后,点击选定元素外的选项会使子列表中的某个物品消失。 这个现象也在这个视频链接中看到(从视频第30秒开始注意): https://github.com/GrapesJS/grapesjs/assets/49796104/59de9aa5-5f3f-43ae-9ed1-358b86ac8b27 预期的行...

artf

不幸的是,由于默认实现依赖于 [deprecated execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand),导致太多边缘情况难以处理,已经不值得再花时间去处理了。 我建议只用它来处理基本格式(例如加粗、斜体、下划线等),对于更复杂的元素,我强烈建议创建[自定义组件](https://grapesjs.com/docs/modules/Components.htm...

ClaudeCode

谢谢你举报,@srinivas977。 关于列表富文本编辑器缩进操作的问题的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件进...

#51992023年6月23日作者 rmadeiraneto3 个回答
0 个反应

组件属性的变化会在所有实例中重现,而不仅仅是一个实例

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v114 可复制演示链接 https://jsfiddle.net/rmadeiraneto/t659usxv/39/ 描述一下那个虫子 如何复现这个漏洞?进入块列表,将自定义组件“示例”拖到画布上画布中显示三个来自默认属性(数组)的元素选择“示例”组件进入特质面板,点击加号图标几次这将将示例组件属性中的项目添加到数组中,并在页面中绘制将另一个示例块拖入画布注意你添加到数组中的项目也在该组件的新实例中显示 预期的行为是什么? 在更改第一个组件的属性后创建第二个组件实例时,通常第二个组件的属性应是默认值 '[1,2,3]' 中定义的第一个...

artf

感谢@rmadeiraneto的报告。是的,不幸的是,如果你以这种方式变异数组/对象属性,这就是个问题,为了避免这种情况,你有两个选择:避免直接变异(更新时分配新引用)将“默认值”定义为函数 “''js 默认值: () => ({ customArray: [1,2,3] }), ``` 但不幸的是......第二个选项现在😅不行,我会在下一个版本修复它

rmadeiraneto

@artf使用默认值作为函数是可行的,感谢你的快速回复和提供解决这个问题的替代方案。 关于第一个建议,我认为问题不在于人们是否应该变异或不变异对象,因为我们讨论的是使用提供的方法(集合)。抱歉我没时间看源代码,但你很可能在“set”方法里变了默认对象,可能是因为引用来自组件生命周期的早期。同样,没有深入看代码,我假设当你将默认值与组件属性合并时,你保留了对默认对象的引用,而不是使用会返回副本的合并方法,比如 from immutable。 我会尽量找时间研究代码,并提出更具...

ClaudeCode

谢谢你举报,@rmadeiraneto。 关于组件属性的变化在所有实例中重现,而不仅仅是一个实例的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“c...

#51562023年5月31日作者 loclovepop3 个回答
0 个反应

手机屏幕上拖放不了,连加葡萄触摸都做不到

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome,IOS可复制演示链接 https://www.lovepoptestsite.com/products/disney-s-hocus-pocus-black-flame-candle-pop-up-card?variant=40356218077273&previewlink=124907487321 密码:ilovecards描述一下那个虫子 如何复现这个漏洞? 我试过用 Grapejs 编辑器在手机屏幕拖放,一切都没问题。但我尝试在注入编辑器测试存储后做,结果并没有达到预期效果。 预期的行为是什么? ...它应该允许拖放组件 目前的行为...

loclovepop

[screencast-www.lovepoptestsite.com-2023.06.01-001711.webm](https://github.com/GrapesJS/grapesjs/assets/124012807/a171fbbb-dd8b-45a6-901c-d0c2519c8304) 这是关于bug的视频

artf

我看到触摸插件是正常工作的,确保加载时启用移动设备(比如加载后不要模拟),这样聚合物填充才能正确加载。

ClaudeCode

谢谢你举报,@loclovepop。 关于手机屏幕无法拖放,连加葡萄-触摸都不能的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”...

浏览所有主题