GrapesJS 问题

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

找到 743 个问题

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

#57152024年3月4日作者 afrinxnahar1 个回答
0 个反应

API 文档中的链接断裂

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 版本 123.0(64 位) 可复制演示链接 不在 描述一下那个虫子 我猜大多数.js文件都已经变成打字稿了,但可能还有像下面这个那样的坏链接...... ![GJS3](https://github.com/GrapesJS/grapesjs/assets/125039325/a42d8156-13e5-4ba0-9cd5-6249ded1d75a)行为准则 [X] 我同意遵守本项目的行为准则

ClaudeCode

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

#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)——这有助于团队更快识别根本...

#57052024年2月26日作者 bernesto4 个回答
0 个反应

编辑器大小调整时组件工具会出现错位

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v122 可复制演示链接 https://jsfiddle.net/Lk2bwhp4/ 描述一下那个虫子 如何复现这个漏洞?将编辑器放入容器中,然后通过程序调整容器的宽度。 预期的行为是什么? 编辑器及其所有子节点应相应调整大小。 目前的行为是什么? 编辑器中所有组件的画布位置都保留了画布调整前的偏移。注意,窗口大小调整会重置位置。这必须在窗口中以程序形式完成。用例是编辑者在一个页面上,有其他面板可以调整编辑可用空间大小。在下面的示例中,可以看到在将编辑器调整为更大宽度后,工具如何与相关元素对齐。工具会留在原来的位置,直到某个事件触发更...

artf

感谢@bernesto报告,但由于我们无法检测程序布局的变化而不影响性能,在这种情况下,你必须通过 ['editor.refresh()]](https://grapesjs.com/docs/api/editor.html#refresh) 手动更新编辑器布局(例如,在你的例子中,调用直接放在 resizeEditor 函数的末尾)

bernesto

你好,@artf,我其实不小心把这个混在你最后接受的拉取请求里(src/canvas/model/Frame.ts)。你可以看看我添加的内容,看看是否造成了问题。我们现在正在测试中,没有看到性能下降,而且它解决了问题。

artf

我其实把这个误混在你上次接受的拉取请求里了 我实际上删掉了,因为看起来没什么关系 🤣 补充回来没问题,但要考虑你的例子只有桌面设备才会有效。宽度填充了容器,这会触发iframe窗口的缩小(然后触发新增事件)。如果你换成更小的设备,这个方法就不行了,那时不会触发调整大小事件,所以你仍然需要刷新调用。

#57032024年2月25日作者 bernesto1 个回答
0 个反应

颜色选择器相对于编辑器容器的偏移

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v122 可复制演示链接 https://jsfiddle.net/v4e5d90z/ 描述一下那个虫子 如何复现这个漏洞?将编辑器放入任意容器中。 预期的行为是什么? 颜色选择器应该相对于打开该选项的输入显示。 目前的行为是什么? 选择器是相对于窗口的,而不是编辑器容器。这导致拣选器的开启偏移量由所有偏移父容器的累计偏移量相加。 行为准则 [X] 我同意遵守本项目的行为准则

ClaudeCode

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

#57002024年2月24日作者 upadhyay88442 个回答
0 个反应

=

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 镀铬可复制演示链接 无法提供数据敏感描述一下那个虫子 如何复现这个漏洞?在编辑器/Canvas中放置一页。将高度设定为ex-600pt,并且四边各加10pt的缓冲。现在在页面内放置两个部分。将最小高度设为某一部分,比如30点,高度为另一部分。现在,100%高度的部分与页面/父页面重叠 预期的行为是什么? 该部分不应与页面重叠,只应覆盖父页面的可用空间,包括填充边距等。 目前的行为是什么? ...它在页面上重叠 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 你的代码在这里 ```行为准则[X] 我同意遵守本项目的行为准则

upadhyay8844

@artf你能帮我看看吗?

ClaudeCode

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

#56912024年2月21日作者 codei202 个回答
0 个反应

通过颜色选择器切换背景或文本颜色时,撤销不工作

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 122.0.1 可复制演示链接 https://grapesjs.com/demo-mjml.html 描述一下那个虫子 如何复现这个漏洞? 官方演示版:https://grapesjs.com/demo-mjml.html在画布上添加一列选择章节进入装饰区,在颜色选择器中选择背景色(注意:不要点击确定按钮)。步骤3后,点击撤销按钮,但不要点击其他地方。 预期的行为是什么?点击撤销按钮后,背景颜色应恢复到之前的颜色 目前的行为是什么?背景色保持不变。 同样的行为也出现在文字颜色上。行为准则 [X] 我同意遵守本项目的行为准则

artf

这大概和mjml插件有关,不是核心,因为我无法复现它(建议你打开相关仓库的问题)。

ClaudeCode

谢谢你举报,@codei20。 关于在通过颜色选择器切换背景或文本颜色时取消功能的问题非常好。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethin...

#56892024年2月20日作者 mitcht4 个回答
0 个反应

<> 在开头引入 editor.getHtml()

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 版本 121.0.6167.185(官方构建)(64 位)可复制演示链接 https://jsfiddle.net/ja50kzne/4/描述一下那个虫子 如何复现这个漏洞?我之前有个 grapesJS 版本的网页,可以正确加载到 Grapes。 你可以从小提琴上看到这一点。 GrapesJS 最新版本“创建”了小提琴中看到的 JSON。 我没有操控它。注意grapesJS确实能加载,控制台里没有错误。 执行 editor.getHtml(用于数据库存储)时,我看到有一个空元素 '<>' 正在被引入注意console.log 预期的行为是什...

mitcht

我把json删减了不少,发现输出中可能有一些可能无效的JSON? 就像是“逃脱双引号”的引入有点不对劲。 JSON.stringify 和 JSON.parse 似乎不在意它,但肯定有问题。

artf

页面的根组件应该是一个“封装器”,在你的情况下是“textnode”(例如,这可能会破坏很多东西),其中有一个空的“tagName”(这就是“<>”的原因),并且不知为何是“content: ”undefined“(?) <img width=“377” alt=“截图 2024-02-22 00 44 33” src=“https://github.com/GrapesJS/grapesjs/assets/11614725/0e76b02e-097b-463f-a921-...

mitcht

这是从Grapes 0.18.4中输出的,因此它是由Grapes生成的。 我预计如果内容是“未定义”的,葡萄要么会剥离它,要么忽略它。 目前我只是在自己这边剥离<>,但我想和你分享一下。

#56832024年2月15日作者 JonathanRiche2 个回答
0 个反应

Commands.runCommand 在内置命令中无法使用

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 克罗姆V121 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?进入 graepesjs.com/demo 页面,打开控制台,使用全局编辑器对象 运行editor.runCommand('sw-visibility')方法——内置网格线 而且即使面板上设置了命令,命令也运行不了,我在项目里设置过这个,最近从0.20.3升级到最新的v0.21.8,发现editor.runCommand('sw-visibility',{force:true})也无法使用,但还是没用 预期的行为是什么?...

JonathanRiche

首先需要运行visualEditor.stopCommand('sw-visibility'),不确定这是不是新用来切换的runCommand,之前需要运行停止

ClaudeCode

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

浏览所有主题