#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...
#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...
#46692022年10月18日作者 micker2 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬与火狐 可复制演示链接 https://codepen.io/artf/full/bYwdQG/ 描述一下那个虫子 Implément gradiant plugin produce js error https://github.com/artf/grapesjs-style-gradient https://github.com/artf/grapesjs-style-gradient/issues/24 行为准则 [X] 我同意遵守本项目的行为准则
artf
是的,这次发布里有说明 https://github.com/artf/grapesjs/releases/tag/v0.18.1 我还没找到时间更新那些插件(任何帮助都非常感谢)
ClaudeCode
感谢你报告,@micker。 Gradient插件在1.20上不起作用的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤:** 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更快识...
#46012022年9月21日作者 bit-ocean4 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬104 可复制演示链接 https://jsfiddle.net/aw8p0h9j/ 描述一下那个虫子 如何复现这个漏洞?打开 jsfiddle 链接。点击两个div之间,然后在任一div和背景之间点击。 预期的行为是什么? 在较早的 grapesjs 版本(0.17.26)中,更新会被触发,控制台记录点击,执行 update() 代码。 目前的行为是什么? 在 grapesjs 0.20.1 版本中,切换不同目标时更新不会触发,至少在 1 个目标之间是这样。组件无房产价值,2.组件价值相同,...... JS: “''js const edito...
ronaldohoch
和这里描述的一样,没问题:https://github.com/artf/grapesjs/issues/4350
artf
是的,但即使是自定义UI,如果值没变,更新也会被跳过,因为没必要。
bit-ocean
我粘贴的代码是用标准API,基本上是从文档里复制粘贴的。显然,更新的机制在不同版本之间已经发生了变化。 之前如果目标元素被更改,更新会被触发,我们可以运行代码在特定条件下重新渲染组件。@artf你现在会提出什么最佳替代策略?我应该添加自定义监听器来针对变更事件吗?你有什么建议的实现方式,才能确保更好地跟进Grapesjs的核心变更? 简而言之,当目标被更改时,我需要能够调用可调用的对象,同时获取并设置自定义类型输入的值。
#45762022年9月12日作者 benryanwilliams4 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 104.0.5112.101可复制演示链接 https://jsfiddle.net/7cLr0xt2/3/描述一下那个虫子 如何复现这个漏洞? 不知为何,我无法在上面链接的小提琴里重现这个bug,因为第34行“selectedComponent.components('<span liquid=”if contact.id“>jhbjhhgjj</span> <span liquid=”else“>qwewqeqwe</span>')''并不能替换组件的内部组件,所以我只能分享一个项目中发生的情况视频,步骤如下:双击“Hello Worl...
artf
RTE在编辑时依赖于DOM内容,所以如果你故意用类似的程序删除它 “''js onRender() { this.el.innerHTML = this.model.get(“displayedText”) }, ``` 编辑完成后,内部组件将被移除。
benryanwilliams
好的,谢谢@artf,这说得通。 然而,那些代码行,以及 必须在画布内渲染正确的选中状态(包括组件最初渲染时以及用户选择不同的“if”状态,从而改变“displayedText”): https://user-images.githubusercontent.com/67364267/189854125-9544d34b-2f71-4b0c-872e-dbdfb2232fd9.mov 你能想到用RTE编辑后保留内部组件的方法吗?也许我可以把这些内部组件存储在“条件文本”组件...
benryanwilliams
我还需要做更多测试,但看起来我通过在创建/编辑组件时保存内部组件,然后使用'rte:disable' 钩子,如下,解决了这个问题: 这看起来有点老套,如果你能想到更好的方法,请告诉我。
#45732022年9月9日作者 ahmafi3 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Firefox 104.0.1可复制演示链接 https://codesandbox.io/s/grapesjs-parsestyle-bug-13h771描述一下那个虫子 如何复现这个漏洞?创建一个带有“style”属性的自定义组件,在它的“model”中。在组件“model”init“函数中使用”this.addAttributes“。将该组件添加到编辑器中。 基本上,当我在组件“model”定义中有一个“style”属性时,使用'this.addAttributes',我就遇到了这个问题。 我在v0.19.4时也遇到过同样的问题。 你可以在浏览器中...
Singwai
这表现得很正常。有两个类似的按键可以改变组件的样式。(“风格”和“风格”) “styles”会用CSS字符串,并一次性附加到最终有效载荷上。我通常会为组件定义一个特定的状态的默认CSS。 “style”会接收CSS哈希,并直接用ID附加到该特定组件上。 你可以导出 HTML,看看它们的表现。 以下是相关文件:  寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something cha...