#47542022年11月30日作者 jasonliang-dev2 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 107.0.5304.122(64 位) 可复制演示链接 https://jsfiddle.net/j5khz1gm/ 描述一下那个虫子 如何复现这个漏洞?创建具有以下默认属性的自定义组件类型: “''js { someText: “<\/script><svg onload='alert(1)'>”, “脚本道具”: [“someText”], 脚本:function() { this.innerHTML = “”; } } 行为准则 [X] 我同意遵守本项目的行为准则
derciesto
@jasonliang-dev,有最新进展吗?我也遇到同样的问题。
ClaudeCode
谢谢你举报,@jasonliang-dev。 关于关闭“</script>'标签未逃脱脚本属性的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.lo...
#47522022年11月28日作者 FaisalShaikhHA3 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 107.0.5304.121(官方版本)(arm64)可复制演示链接 https://jsfiddle.net/artur_arseniev/aku70f5w描述一下那个虫子 如何复现这个漏洞?尝试拖拽可编辑组件或本身带有“指针事件:全部”CSS的组件。它会消失的。由于该操作执行无限循环,并在控制台上返回错误“未捕获范围错误:最大调用堆栈大小已超过”。即使将可拖拽的 false 设置为可编辑组件,它依然可以拖拽。 预期的行为是什么? 可编辑组件不应该像包装组件一样被拖拽到自己。 目前的行为是什么? 可编辑组件可以拖拽到自己。即使设置为可拖拽...
artf
演示本身有个问题,现在已经修复了(在包装组件中添加了“可拖拽:false”)
FaisalShaikhHA
getCSSS补丁让它始终返回可编辑组件的内容无法正常工作,你能帮我解决这个问题吗@artf 下面的代码(包含在可复现演示链接中)总是返回整个画布或包装器的CSS字符串。
ClaudeCode
谢谢你举报,@FaisalShaikhHA。 关于带指针事件的组件:“全部”(除了包装器)或可编辑组件可以拖拽到自己身上,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change',...
#47442022年11月23日作者 ronaldohoch2 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 勇敢的最后版本可复制演示链接 https://jsfiddle.net/ptzavm1b/描述一下那个虫子 如何复现这个漏洞?点击一个元素尝试用StyleManager UI添加这个CSS样式:“transform:scale(2);”你不能。 预期的行为是什么?变换类型栈应包含或允许“比例”和“旋转”来自类型栈 目前的行为是什么?变换类型栈没有“比例”和“旋转”属性。行为准则[X] 我同意遵守本项目的行为准则 这就是我想通过 StyleManager UI 实现的效果:https://jsfiddle.net/mr31jkhb/1/(悬停按钮)
artf
你应该已经能用默认变换属性实现同样效果,你的自定义变换还不完整。 请尽量参考完整的配置[这里](https://github.com/artf/grapesjs/blob/483ab96eff13687c4794a8474c7e8cffd7405912/src/stylemanager/model/PropertyFactory.js#L382)。如果你想更新属性,应该可以通过 [getBuiltIn](https://grapesjs.com/docs/api/style...
ClaudeCode
谢谢你举报,@ronaldohoch。 关于变换、缩放和旋转都不正常工作的建议很棒!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件进...
#47432022年11月23日作者 JonathanRiche1 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 107.0.5304.107(官方构建)(64 位) 可复制演示链接 https://jsfiddle.net/jonrobert/2gLdur9c/3/ 描述一下那个虫子 如何复现这个漏洞?在运行 grapesjs.init() 函数时,修改配置选项中任一选项的 stylePrefix 属性 即 “''js layerManager:{ stylePrefix:'customStylePrefix' }, blockManager: { stylePrefix:'customStylePrefix' } 行为准则 [X] 我同意遵守本项目的行...
ClaudeCode
谢谢你举报,@JonathanRiche。 关于stylePrefix属性没有覆盖大多数元素中的gjs-class,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', ()...
#47392022年11月20日作者 hemaltandel12 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Edge 版本 107.0.1418.52(官方构建)(64位)可复制演示链接 https://codesandbox.io/s/peaceful-glade-rbfbwt?file=/src/app/app.component.ts描述一下那个虫子 如何复现这个漏洞?用葡萄酱创建新应用调用 Grapejs 的初始化,使用默认配置。新增名为“test1/2”的新职业使用 developer toool 输入画布 html。它被重新命名为“test1-2”。 预期的行为是什么? 类别名称不应更改。它应该保持原名。例如test1/2 在之前的版本中,我们能够...
artf
你仍然可以使用“escapeName”选项 “''js 选择经理:{ escapeName: value => value }, ```
ClaudeCode
谢谢你举报,@hemaltandel1。 关于css类名中“/”转换为“-'的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something ch...
#47352022年11月17日作者 vaneatka3 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 无 可复制演示链接 无 描述一下那个虫子 如何复现这个漏洞?.去 https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js#L1839..去 https://github.com/artf/grapesjs/blob/dev/index.d.ts#L1747 预期的行为是什么? ...resetId 应声明为方法。 目前的行为是什么? ...在 类型中,resetId 是一个可被 bool 消除的属性行为准则 [X] 我同意遵守本项目的行为准则
artf
第一个是分量方法,第二个是块性质([此处使用](https://github.com/artf/grapesjs/blob/81295f637aa2542db9ba2aefb3ce34f0d6489d71/src/block_manager/index.ts#L166-L168))
vaneatka
我打开这个问题的原因是该方法不可见。 也许需要在类型中为方法声明创建一个新条目?比如setID /*在组件上设置新ID。 / setId(id: string): this;
ClaudeCode
谢谢你举报,@vaneatka。 关于resetId类型不匹配的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件生命...
#47322022年11月17日作者 Rilvatore4 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 107(MacOS) 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?将标签块拖放到编辑器内容中点击顶部的“导入”按钮修改HTML内容中的某些内容(例如重命名之前创建的标签页)点击“导入” 预期的行为是什么? 导入HTML后,标签页必须可以编辑(添加新标签并在标签间导航) 目前的行为是什么? 标签页不再是“标签”类型,无法编辑 导入HTML之前: ,并添加“isComponent”方法,让解析器识别组件。
#47272022年11月12日作者 dreamsight1 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 版本 107.0.5304.107(官方构建)(64位)Chrome可复制演示链接 没必要,任何人都能复制描述一下那个虫子 保存HTML和CSS时,程序格式转换为CSS 即“@keyframes滑动{” 致 “@media滑梯{” 这会让CSS滑块代码变得无用,你可以自己测试,只需在画布区域加载“@keyframes幻灯片”CSS,然后查看代码转换过程。 我还没找到原因,但如果有人有建议,请指点我:) 下面的示例 @keyframes 幻灯片 { 0%15%{margin-left:0%} 20%35%{margin-left:-100%} 40%55%...
ClaudeCode
谢谢你举报,@dreamsight。 * 的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤:* 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更快识别根本原因 在报告中包含 Gra...
#47192022年11月9日作者 ronaldohoch1 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 勇敢的最后版本 可复制演示链接 https://jsfiddle.net/qsd9zjrc/ 描述一下那个虫子 如何复现这个漏洞?打开链接(https://jsfiddle.net/qsd9zjrc/)尝试更改文字颜色尝试通过点击按钮更改绿色按钮颜色,然后进入排版你会注意到颜色里有“!important”。 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('some...
#47042022年11月2日作者 PaulSchult1 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 104.0.5112.101 可复制演示链接 https://codesandbox.io/s/awesome-dewdney-bwo5t1 描述一下那个虫子 如何复现这个漏洞?将文本块添加到编辑器内容中打开风格管理器,扩展装饰部门注意红色占位符,通常标准选色器所在的位置(该文本是基本的角度分量)接下来,向下滚动到“背景”标签页,添加一个新的背景再次注意红色占位符文字点击葡萄内容的主内容,样式管理器切换到主体设置现在再次点击文本块,向下滚动到背景标签页并展开注意颜色属性的占位符文本没有出现如果你查看浏览器的控制台,你会发现在选择另一个元素时,角...
ClaudeCode
谢谢你举报,@PaulSchult。 关于Angular组件作为自定义颜色选择器只创建一次的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“chan...