GrapesJS 问题

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

找到 336 个问题

🔍 style-manager
#57462024年3月12日作者 rhoenerSBS4 个回答
1 个反应

当面板不在编辑器容器时,ColorPicker 偏移不正确

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v122 可复制演示链接 https://grapesjs.com/docs/getting-started.html#style-manager 描述一下那个虫子 如何复现这个漏洞?访问GrapeJS的“入门指南”文档中的“StyleManager”部分尝试在编辑器中使用该部分的颜色选择器。即使你在 .editor-canvas 中添加“position:relative”,当面板不在编辑器容器外时,颜色选择器仍然会计算错误的偏移 预期的行为是什么? 颜色选择器会显示在对应的输入旁边 目前的行为是什么? 相对偏移计算错误,选色器显示在...

bernesto

你好,@artf, 根本问题是我们试图将弹出调色板绝对放置在页面任意位置的另一个元素之上。即使原点元素不在编辑器容器节点之外,我们也需要这样做。 为满足此要求,弹出调色板不能包含在“offsetParent”的任何位置,且必须处于最高的z指数。否则,它将受其“offsetParent”可见区域的影响,并按父节点的“z-index”排序。 在我之前的补丁中,这似乎是可行的,因为示例编辑器占用了整个窗口,因此编辑器元素内的“left: 0”和“top: 0”也在正体内部是“le...

artf

@bernesto你能检查一下这个吗?因为它似乎和[你的更改](https://github.com/GrapesJS/grapesjs/pull/5704)有关。

bernesto

是的,我明白问题所在。逻辑需要考虑父节点在容器外的情况。让我看看能不能做。

#57202024年3月6日作者 bernesto2 个回答
0 个反应

传播组件默认值在引入子注释时可能会破坏层

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v122 可复制演示链接 https://jsfiddle.net/n38vbktg/ 描述一下那个虫子 如何复现这个漏洞?创建一个组件,传播包含可分层=true的默认值。在“有能力”下引入一条评论。 预期的行为是什么? 评论要么保持隐藏,要么不会导致错误。 目前的行为是什么? 编辑将评论视为HTMLlement。当编辑器尝试从节点读取不存在的属性时,如 getComputedStyle 或 getClientRects,这会触发多个错误。两种方法都应该先进行检查。或者——应引入一种新的注释类型,覆盖从父节点传播的默认值。 错误发生在这...

artf

说得好@bernesto

ClaudeCode

谢谢你举报,@bernesto。 关于传播组件默认值在引入子注释时可能导致层层崩溃的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('som...

#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...

#56772024年2月12日作者 soundharya23252 个回答
0 个反应

[X] 我确认使用最新版本的GrapesJS

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子 如何复现这个漏洞?在<a>表单元格(td)内插入带有链接的标签。将浮点数向桌面单元格(td)赋予左或右。 预期的行为是什么? 在表格单元格中添加浮点右/左后,对齐应该只会改变 目前的行为是什么? 表格单元格被改成了表格行/表格正体 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: ![桌排](https://github.com/GrapesJS/grapesjs/assets/159787750/8f713b75-b3d8-4f40-a9f8-be...

artf

提供有效且可复现的演示

ClaudeCode

谢谢你举报,@soundharya2325。 关于*的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed'...

#56682024年2月6日作者 addlistener2 个回答
1 个反应

CompoentTextView 的源码图无法加载

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 121.0.6167.139(官方构建)(x86_64) 可复制演示链接 没有。 描述一下那个虫子 如何复现这个漏洞?添加自定义断点并设置断点点击步出直到进入组件文本视图的逻辑 预期的行为是什么? 源图加载 目前的行为是什么? ComponentTextView 的 sourcemap 未加载,但已加载于 RichTextEditorModule <img width=“557” alt=“image” src=“https://github.com/GrapesJS/grapesjs/assets/4531670/7b110b3d-4a19-...

artf

我只能建议你仔细检查源地图路径 <img width=“346” alt=“截图 2024-02-12 08 45 32” src=“https://github.com/GrapesJS/grapesjs/assets/11614725/ee135460-a758-4aef-96fa-1d1b463c934d”> 例如,如果你尝试通过 CDN 加载 Grapesjs,比如像 'https://unpkg.com/grapesjs'(这里发生重定向),因为这种情况下 URL...

ClaudeCode

谢谢你举报,@addlistener。 关于 CompoentTextView 的 {sourcemap 无法加载,这是个很好的问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', ()...

#56132024年1月12日作者 SachinPuthiyoth1 个回答
0 个反应

StyleManagerConfig.sectors.properties 的类型定义错误

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 没有 描述一下那个虫子 如何复现这个漏洞?根据 https://github.com/GrapesJS/grapesjs/blob/5c890449a52f526bc480d6dc649ff5e01ec59140/src/stylemanager/index.ts#L310 中扇区的定义,属性类型为https://github.com/GrapesJS/grapesjs/blob/5c890449a52f526bc480d6dc649ff5e01ec59140/src/stylemanager/config/config.ts#L...

ClaudeCode

谢谢你举报,@SachinPuthiyoth。 关于StyleManagerConfig.sectors.properties的类型定义错误,这是个很好的问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.o...

#55832023年12月26日作者 ronaldohoch4 个回答
3 个反应

在移动端版本中,无法用样式面板设置背景:无

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Edge 最后版本 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 如何复现这个漏洞?打开演示链接点击页眉 ![图片](https://github.com/GrapesJS/grapesjs/assets/2287371/c166b071-699d-4438-a3bf-0fb07607b45d)切换视图为手机或平板。尝试从头部移除背景。 预期的行为是什么? 那个编辑器把 background:none 的头部设置成了 “''CSS @media(最大宽度:480像素){ .header-banner{ 背景:无...

artf

这不是bug,而是缺失的功能,我们需要用新的配置扩展栈类型,以实现“空”值。 我会尽量在下一个版本里加入。

artf

de 属性 Background 中的清除图标会完全移除所选设备的属性,使其再次继承桌面设置中的值。 正确图层行中的清除图标会重置栈值,将所选设备的属性设为默认值,移除背景,且不会继承桌面设置。在同一个清除图标中再次点击,该图层会完全移除。 我不确定这是否完全是我想的,但想法是让它按原样工作,但加入一个额外的逻辑,当我移除最后一层时,如果存在新的属性(例如“emptyValue”),我会应用。 这是一种可能的属性类型 “''js emptyValue?: string |(...

gustavohleal

我已经为栈类型插入了一个解决方案。我打算创个人纪录,但我想先问你一件事。我现在补充的行为是: ![图片](https://github.com/GrapesJS/grapesjs/assets/22385451/31b5aa67-1de4-4430-a439-e41d6b1cbb21)层行中的清除图标会重置堆栈值,将所选设备的属性设为默认值,移除背景,且不会继承桌面设置。在同一个清除图标中再次点击,该图层会完全移除。de 属性 背景中的 clear 图标会完全移除所选设备的...

#55702023年12月20日作者 prateekkumar-ec3 个回答
0 个反应

导入按钮是从所有页面移除所有样式。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 最新版本 可复制演示链接 无(如有需要,我可以分享视频以便进一步交流) 描述一下那个虫子 如何复现这个漏洞?假设你当前页面上有一些内容,上面有一些样式。现在在同一项目中创建一个新页面。点击编辑器标题上的导入按钮,弹窗保持空,然后点击弹窗的导入按钮。现在去看看第一页。它会失去所有的CSS。 预期的行为是什么? 如果你在其他页面导入内容,第一页应保持不变。 目前的行为是什么? 一个页面的样式会因另一个页面没有导入任何内容而受到影响。 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 你的代码在这里 ```行为准则 [X] 我...

afrinxnahar

如果你能附上一个视频,那就太好了。我不太确定弹出窗口的空功能

artf

@prateekkumar-ec,这不是核心相关的问题。

ClaudeCode

感谢你举报,@prateekkumar-ec。 关于导入按钮会移除所有页面的所有样式,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log(...

#55252023年11月19日作者 duydvu2 个回答
3 个反应

在单个组件中添加超过 20 个类时,性能问题

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Edge v119.0.2151.72 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 你好,感谢你创建了一个了不起的项目。我想报告使用GrapesJS时发现的一个问题。 如何复现这个漏洞?选择一个组件添加任意名称的类,直到组件超过20个类。选择另一个组件并重新选择该组件。 预期的行为是什么? 不应该有性能问题。 目前的行为是什么? 浏览器会卡顿一段明显的时间。新增的职业越多,卡顿时间越长。当组件有23个类时,我的浏览器会冻结10秒。 这是使用 TailwindCSS 时常见的问题,因为课程很多。例如,...

artf

同意建议,我会相应更新。谢谢@duydvu

ClaudeCode

谢谢你举报,@duydvu。 关于在单个组件中添加超过20个职业时性能问题的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethi...

#54872023年10月28日作者 MaxDBenson3 个回答
0 个反应

样式管理器不会为同一类显示多个规则

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 可复制演示链接 https://jsfiddle.net/497zkrpm/1/ 描述一下那个虫子 如何复现这个漏洞?选择“Hello World”组件打开样式管理器,确保在类部分勾选了“myclass”检查“高度”和“背景颜色”属性的值 预期的行为是什么? 样式管理器应反映与所选类相关的所有规则(此处为'.myclass {height: 100px}'和'.myclass {background-color: green}' 目前的行为是什么? 样式管理器只反映与所选类相关的第一个规则(此处为:'.myclass {height:...

artf

这不是bug,样式管理器一次只处理一条规则,如果你想要更高级的使用,可以用API实现功能(比如用同一选择器选择不同规则)。

MaxDBenson

这不是个bug,样式管理器一次只处理一条规则,如果你想要更高级的使用,可以用API实现你的功能(比如用同一个选择器选择不同规则)。 我明白了。 你介意详细说说该怎么做吗? 而且,风格管理器似乎一次只处理一条规则;因为当我选择类时,我会看到属性/值设置被应用到ID上,反之亦然。

ClaudeCode

谢谢你举报,@MaxDBenson。 关于风格管理器不会显示同一类的多个规则,这是个很好的问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('s...

浏览所有主题