GrapesJS 问题

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

找到 3,464 个问题

#62812024年10月30日作者 sumasal3 个回答
1 个反应

图层管理器不允许在同一层级重新排序。只有在顶部(正下方)的旧版本(例如:0.21.8)上方才允许嵌套。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 最新的Chrome、Firefox、Edge 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 如何复现这个漏洞?在图层管理器中拖动一个组件,尝试将其置于本体下方的其他物品之间不允许。允许筑巢 预期的行为是什么? ...嵌套和重新排序都应被启用 目前的行为是什么? ...顶层仅启用嵌套行为准则 [X] 我同意遵守本项目的行为准则

artf

下次版本会修复。 感谢@sumasal的报告,也感谢@mohamedsalem401的修复 🙇 ♂️

sumasal

期名被删减了。我的意思是,它似乎能在较旧版本如0.21.8及以下运行

ClaudeCode

谢谢你举报,@sumasal。 关于图层管理器不允许在同一层重新排序的建议很棒。只有在顶部(正下方)的旧版本(例如:0.21.8!)上方才允许嵌套。虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法:* 听取“selector:add”以获取CSS选择器更改 使用“selecto...

#62712024年10月25日作者 padcom4 个回答
1 个反应

在最新的Firefox上,组件拖放功能无法使用

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Linux和Mac上的Firefox 131.0(64位) 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 如何复现这个漏洞?开始拖动“悬停我”按钮尽量把它放在“所有文本块都可以轻松编辑......”的上面。 预期的行为是什么?按钮可以随处放置图层管理器可用于重新组织元素 目前的行为是什么?按钮只能在容器开头放置图层管理器内的拖拽也有同样的限制行为准则 [X] 我同意遵守本项目的行为准则

padcom

你们太棒了!正是时候,正好及时:)我今天下午有个演讲,现在我也能演示它在Firefox上的工作了!

padcom

我已经追踪到Firefox版本109.0的重大变更。这是第一个有问题的。108.0.2版本运行良好。希望这些信息对你有帮助。

padcom

我也测试了2024-10-24-21-16-15-mozilla-central的133.0a1,问题依然存在。

#62692024年10月25日作者 bt-mkt4 个回答
3 个反应

组件模型和视图每次被拖拽到Canvas中所有可以放置的组件时都会加载

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 130.0.6723.59(官方版本)(arm64) 可复制演示链接 https://codepen.io/btmkt/pen/QWeOJRB?editors=1111 描述一下那个虫子 如何复现这个漏洞?打开控制台。在画布内放置多个组件(例如用三列方便复现)。将“额外”类别末尾添加的“测试-合成”组件拖拽到新增组件上。 预期的行为是什么? 组件“模型”和“视图”初始化事件(至少不确定是否有其他事件)应该只在将组件放入画布时触发,而不是每次拖动到可丢弃组件上方时触发。 目前的行为是什么? 组件的“模型”和“视图”初始化事件每次拖动...

artf

@mohamedsalem401这很可能是因为编辑器太肤浅了。 我觉得利用canMove中的“临时”选项(我们已经用它跳过部分动作)是合理的。你怎么说? “''js const wrapper = this.getShallowWrapper(); srcModel = wrapper?.附录(来源,{ 临时:真实})[0] ||无效; ```

mohamedsalem401

@artf 是的,我怀疑这和“浅层编辑器”有关。希望临时方案能奏效,然后我再开永久居民申请

bt-mkt

@mohamedsalem401这很可能是因为编辑器太浅了。我觉得利用canMove中的“临时”选项(我们已经用它跳过部分动作)是合理的。你怎么说?“''jsconst 包装器 = this.getShallowWrapper();srcModel = wrapper?.附录(来源,{ 临时:真实})[0] ||无效;``` 你好,@artf, 上面看到的改动(我看到已经实现了)似乎并没有解决我遇到的问题。它和0.22.1版本一样。 我已经把手写笔升级到了0.22.3(ht...

#62632024年10月24日作者 yashvi20264 个回答
1 个反应

重复链接通过RTE添加

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 铬可复制演示链接 https://codepen.io/Harshsne/pen/xxoOyXO描述一下那个虫子 如何复现这个漏洞?使用 RTE 添加词语链接,添加链接组件现在在链接组件后输入一个不留空格的词,再次选择该词,添加链接。添加后,点击文本框外。 预期的行为是什么? 第二个新增链接应包裹在第一个链接和文本上。 目前的行为是什么? 新增了两链接组件。 代码 var URL = window.prompt('输入链接链接的URL:'); rte.insertHTML('<a class=“link” href=${url}>${rte.select...

sirbeagle

点燃——唯一的坏处是我们可能永远不知道最终的修复结果。 @artf - 我觉得我们可以结束这个问题了。

sirbeagle

我已经玩了不少,能在@yashvi2026提供的Codepen上重现出这个错误。我大多数情况下的繁殖步骤非常相似: 在文本框中输入两个单词,中间有许多空格。 双击单词或用鼠标手动选择单词,选中第一个单词 使用自定义RTE添加链接 跳出框框点击 在现有文本中的链接后双击返回 在链接后高亮单词,并用鼠标将高亮扩展为包含第一个链接的首字母 使用 RTE 添加另一个链接 点击文本框外 然而,我在开发环境中无法复现这种效果。经过多次反复试验,我发现Codepen使用的是GrapesJ...

yashvi2026

是的,升级到最新版本后,这个问题就不出现了。

#62602024年10月24日作者 hr12012 个回答
0 个反应

当我在组件中使用 component:clone 时出现错误

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Microsoft Edge 130.0.2849.46可复制演示链接 https://jsfiddle.net/uwybfd98/描述一下那个虫子 如何复现这个漏洞?选择旋转木马组件点击图片右上角或左下角的空格并选择 div;克隆二次 预期的行为是什么? 克隆只触发一次 目前的行为是什么? 它递归,导致卡壳 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js onRender({ el, model }) { model.getChildAt(0).forEachChild(child => { child.on('component:c...

artf

@hr1201 onRender可以多次触发,如果你不好好清理,就绝不应该在那里附加监听器。 你的逻辑也完全是模型相关的,所以它不应该出现在视图里,只需在“model.init”方法中移动代码

ClaudeCode

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

#62502024年10月23日作者 maxming23332 个回答
0 个反应

克隆页面提示“将循环结构转换为 JSON”

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 129.0.6668.101可复制演示链接 https://grapesjs.com/demo描述一下那个虫子 如何复现这个漏洞? 开放 https://grapesjs.com/demo 在 DevTools 中运行这个脚本: “''js const page = 编辑。Pages.getSelected(); const component = page?.getMainComponent()?clone(); 编辑。Pages.add({ 名称:“11111”, 组成部分, }, { 选择:真, }); TypeError:将循环结构...

maxming2333

除了上述方法,还有其他复制页面的方法吗?

ClaudeCode

谢谢你举报,@maxming2333。 关于Clone页面提示“将循环结构转换为JSON”,这个问题非常好。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethin...

#62492024年10月23日作者 yashvi20263 个回答
0 个反应

最初的定制色彩选择器

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 铬可复制演示链接 ---描述一下那个虫子 editor.getModel().initBaseColorPicker(DomElement, { / spectrum options / }); 在内化之后,当 palete 打开时,我想给它设置一个颜色?@artf行为准则[X] 我同意遵守本项目的行为准则

NeonLexie

这看起来很有趣。我倒是愿意试试看。

yashvi2026

ClaudeCode

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

#62482024年10月22日作者 Frubl2 个回答
1 个反应

当iframe身体有缩放时,showOffsets bug出现

葡萄JS版本 [x] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://jsfiddle.net/a2hbxg0y/1/ 描述一下那个虫子 如何复现这个漏洞?打开开发工具,编写 iframe 正体元素样式 - 缩放:n; 目前的行为是什么? 当鼠标悬停在元素上时,蓝色边框会正常工作,而偏移量则不然。它们的大小与变焦时相同:1; 附言:我无法分享完整复制演示的链接,因为CSS的更改需要在Canvas内完成。 附言: 可能已经有合适的缩减内容的方法,但我只找到了整个画布的缩放。我想让其中一种设备的缩放更小 行为准则 [X] 我同意遵守本项目的行为准则

artf

你不应该编辑iframe的缩放,应该用[原生API](https://grapesjs.com/docs/api/canvas.html#setzoom)

ClaudeCode

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

#62112024年10月11日作者 jlafosse4 个回答
0 个反应

递归过多

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 131.0.2 可复制演示链接 https://grapesjs.com/demo-newsletter-editor.html 描述一下那个虫子 如何复现这个漏洞?进入 grapesjs 演示,然后导入以下 html: '''html <div class=“foobar”> <img data-gjs-locked=“true” width=“500” src=“https://cdn.pixabay.com/photo/2021/12/16/15/26/forest-68747171280.jpg”> </div> 我怀疑问题来...

artf

嘿,@jlafosse谢谢你的报告。 我不认为最新版本会有这个问题: <img width=“123” alt=“截图 2024-10-21 19 00 04” src=“https://github.com/user-attachments/assets/ff074a31-cd19-4547-bb27-596c92e16d64”> 你能再试着再检查一次吗?

jlafosse

果然,这似乎解决了问题!谢谢!

artf

🙌 那就关门了,谢谢 🙇 ♂️

#62022024年10月9日作者 klipto-inc2 个回答
0 个反应

Javascript CDN 在 Grapejs Canvas 上无法使用

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 129 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 const newEditor = grapesjs.init({ fromElement: true, // 允许HTML中的组件 容器:“#editor”, 画布:{ 剧本:[ “https://cdn.jsdelivr.net/npm/[email protected]/dist/preline.min.js”, ], }, 高度:“100VH”, 插件:[ gjsPreset网页, GjsBlockBasic, gjsForms, pluginTooltip...

artf

@klipto-inc,请制作带有正确且可复现的实时演示的错误报告

ClaudeCode

感谢你报告,@klipto-inc。 Javascript CDN 在 Grapejs Canvas 上无法工作的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeS...

浏览所有主题