GrapesJS 问题

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

找到 3,464 个问题

#50862023年5月2日作者 SagarMaria3 个回答
0 个反应

Style:property:update 和 Property onChange 都被过度触发

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 112.0.5615.137(官方版本) 可复制演示链接 https://jsfiddle.net/SagarMaria/sunygp2f/3/ 描述一下那个虫子 如何复现这个漏洞?在 jsfiddle 中只需点击“Hello World”组件。观察大量控制台日志。点击画布上其他地方,重复。 预期的行为是什么? “style:property:update” 只应该在所选组件的某些样式属性更改时触发 目前的行为是什么? “style:property:update” 事件反而会多次触发,即使只是选择了某个组件 如果需要执行某些代码...

artf

该行为是正确的,因为“style:property:update”会在风格管理器[属性](https://grapesjs.com/docs/api/property.html#property)的任何更新时触发(不仅仅是其值)。所以针对你的具体情况,你需要以这种方式更新回调 “''js Editor.ON('style:property:update', ({ property, to }) => { 检查房产名称,以及更新是否与价值相关 如果 (property.get...

SagarMaria

你好,@artf感谢你的快速回复,但实际上问题的一部分仍然是,即使你做了更改,比如点击“中心”对齐无线电选项和你建议的 if 语句,后续选择该组件时,'style:property:update' 值仍然会被 loging 出去,'property' 和 'to' 仍是现有值(即使你不改动,只选择组件)。下面有个简短的视频,我也根据你的建议更新了 jsfiddle。 有没有办法直接监听收音机值的变化,或者在样式管理器里点击不同的收音机选项?我也尝试使用属性的“onChang...

ClaudeCode

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

#50832023年4月29日作者 DanavsSite4 个回答
0 个反应

方块不能拖到画布上

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 陶瑞 可复制演示链接 描述一下那个虫子 如何复现这个漏洞?... 预期的行为是什么? ... 目前的行为是什么?** ... 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js “使用客户端” import { useEffect, useRef, useState } from “react” import { usePathname, useSearchParams } from “next/navigation” 从 “@/atoms/projects” 导入 { Project, ProjectsAtom } import {...

DanavsSite

![2023-04-29 143431-Greenshot](https://user-images.githubusercontent.com/109663198/235335067-0d202a20-e26e-4fce-8d4d-168504175239.png)

DanavsSite

我刚发现是因为 WebView2。Webview2 的支持??!

artf

我觉得这更多是因为Tauri配置的问题,而不是GrapesJS,因为我们用的是原生的HTML5拖放功能

#50792023年4月28日作者 TO-JHummel2 个回答
0 个反应

用 Vue+Vite 拖入嵌套组件时会崩溃。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 112.0.2(64位) 可复制演示链接 https://github.com/TO-JHummel/grapesjs-issue 描述一下那个虫子 如何复现这个漏洞?启动最小的vue+vite页面。将capitalizedfor块放入编辑器中。将一列模块放入编辑器中,放置在另一个模块之外。将capitalizedfor块上的每个div拖拽到1列块中。 预期的行为是什么? 方块只需直接放入柱中即可。 目前的行为是什么? 浏览器在放下最后一个块时会卡死。 行为准则 [X] 我同意遵守本项目的行为准则

artf

这和这个[https://github.com/GrapesJS/grapesjs/issues/4497]类似,你必须把编辑器实例放在Vue实例之外,才能绕过它的代理

ClaudeCode

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

#50592023年4月19日作者 abubaker4172 个回答
0 个反应

第二次使用模板Grapes编辑器时不接受编辑器第一次创建的随机ID的CSS

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 111.0.5563.147(官方构建)(64位) 可复制演示链接 我在jsfilddle上无法实现Reproducible。我在下面提供了详细说明。 描述一下那个虫子 如何复现这个漏洞?这是我在Grapes上传的模板,头部有样式标签的内联CSS,正体标签也有内联样式 https://jsfiddle.net/spiral417/udye5ov1/首次Grapesjs从正体标签获取内联CSS,插入随机ID,并在这些ID中输入CSS。所以我保存了所有CSS样式,但当我第二次使用这个模板和Grapes提供的setStyle时,Grapes不接受第一...

artf

@Spiral1234如果你无法重现问题,很可能是你这边的问题,没有可复现的演示,很难判断问题所在

ClaudeCode

感谢你报告,@abubaker417。 关于第二次使用模板葡萄编辑器不接受编辑器第一次用随机ID创建的CSS的问题非常好。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => c...

#50532023年4月17日作者 ngoc1992 个回答
1 个反应

在 v0.21.1 中,类型被改为“任意”

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? FireFox 112.0(64位) 可复制演示链接 没有演示链接 描述一下那个虫子 我最近从v0.20.1升级到了v0.21.1。 很多在 v0.20.1 中存在的类型在 v0.21.1 中被改成了“任意”。 例如, v0.20.1中'Components.addType'的类型是'AddComponentOptions' ![图片](https://user-images.githubusercontent.com/53241275/232444631-243b6872-1655-490b-b5b4-5c5ad546a315.png) 类型“组件...

artf

谢谢@ngoc199如果之前版本还有其他缺少声明的话,请告诉我

ClaudeCode

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

#50522023年4月16日作者 innothetechgeek2 个回答
0 个反应

通过Vue入口加载的样式无法工作

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 无 描述一下那个虫子 我正在把grape.js插件集成到vue.js。我有一个预构建页面,里面有预构建的HTML和CSS。 当我把页面vue.js组件加载到编辑器时,所有vue.js样式都会丢失。但如果我移除 grapeJs 初始化方法,我的样式就正常工作了。 请帮帮我。我想把通过vue.js入口加载的样式加载到编辑器里 行为准则 [X] 我同意遵守本项目的行为准则

artf

@innothetechgeek遇到真正的bug问题,你应该做一个可复现的演示,因为通常会有一些与核心本身无关的问题。无论如何,根据你的描述,你可能想通过['canvas' options](https://grapesjs.com/docs/modules/Components-js.html#template-related)定义你的样式条目。

ClaudeCode

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

#50492023年4月13日作者 ronaldohoch4 个回答
2 个反应

拖拽由图片和链接组成的组件时出现的问题

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 勇敢的最后版本 可复制演示链接 https://jsfiddle.net/rp7oc96v/1/ 描述一下那个虫子 嗨,亚瑟! 我正在创建一个新组件,一个链接中的图片,就像“mj-image”组件一样,但我卡在一个配置里,或者说是个bug...... 如何复现这个漏洞?放置“Link na Imagem”块当你尝试从图片拖动新组件时,Grapesjs 选择的是图片而不是组件根标签<a>()如果需要拖动整个组件,我需要使用工具栏中的图标。 预期的行为是什么?子组件没有父元素就不会。 目前的行为是什么?如果子节点 img 元素没有属性 'data-gjs...

gustavohleal

嗨! 我测试过你的方案。它确实能正确更改图像,且将图像锁定在主组件内,你可以移动它。模型中的“src”属性会被更改,但当你移动组件时,它会回到占位符图像。如果你更改图片然后打开视图代码模态,你会发现“src”属性不像模型中那样发生变化。我认为这是因为Grapes在导出代码中没有为图片设置“id”。 检查打印件: 在组件丢弃时不设置图像: ![图片](https://user-images.githubusercontent.com/22385451/232051993-20...

artf

@gustavohleal我的错误,你必须直接更新'src'属性,而不是属性'image.set({ src: asset.getSrc() });'

artf

使用 'data-gjs-locked=“true”属性忽略图片,正确更新你的自定义组件 “''js 移除runCommand(“open-assets”); 因为在模型端运行它没什么意义 你可以通过方块激活组件(https://grapesjs.com/docs/api/block.html#properties) 通过使用“激活”属性 init(){ editor.runCommand(“open-assets”); } 在视图中处理资产更新 浏览量:{ 事件:{ db...

#50462023年4月12日作者 abubaker4174 个回答
0 个反应

有没有办法在选定默认值 Float、Position 和 text-align 时移除交叉 svg

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 111.0.5563.147(官方构建)(64位) 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞? 这是你可以查看的图片链接 https://ibb.co/0Qg7nTK 预期的行为是什么? 点击默认值时,叉图标应该会被移除;如果选择float值为零,那么十字图标应该会显示non 目前的行为是什么? 当前行为的十字图标在选择默认值时不会被移除行为准则 [X] 我同意遵守本项目的行为准则

artf

@Spiral1234默认值和定义值之间有很大区别(即使默认值和默认值相同)。比如在桌面端你定义了“float: right”,在移动端定义“float: none”,你仍然需要在移动端上移除“ne”这个值。

abubaker417

@artf,让我再给你定义一次。 我的问题是,如果我点击任何模块的默认值,比如float,我选择“none”,那么“cross svg”应该是“display: none”,就像我对其他模块“position”、“text-align”的设置一样。 如果有人选择默认值,那么在即将重置的“交叉SVG”上方应标注为“显示:无”。 我截图里提到了重置的跨SVG,默认值应该是“display: none”。谢谢

artf

@Spiral1234选择默认值时不应该是“显示:无”,请仔细阅读上述使用场景,默认值和选择默认值是不同的。

#50452023年4月12日作者 ronaldohoch2 个回答
1 个反应

重复元素会失去父元素的引用

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 勇敢的最后版本可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 如何复现这个漏洞?发布一张图片。选择掉落的图片。运行上面的代码。复制图像选择掉落的图像。运行上面的代码。集合为零'image.view.modelOpt.at' 是从原元素到的位置。 预期的行为是什么?重复元素不得失去对父元素的引用。 目前的行为是什么?被重复的元素失去了父元素的引用。 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js (function(){ let position = editor.getSelected()....

artf

@ronaldohoch请使用正确的[文档API](https://grapesjs.com/docs/api/component.html) “''js editor.getSelected().parent(); editor.getSelected().index(); ```

ClaudeCode

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

#50422023年4月11日作者 pittleCheung2 个回答
0 个反应

每次调用 editor.loadData(data, opts) 时,都会触发编辑器中定义的存储方法。Storage.add(“api-remote”, {...}),该文件记录“api-remote store”消息

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 最新版本的Chrome浏览器 可复制演示链接 无效 描述一下那个虫子 如何复现这个漏洞? 很简单 预期的行为是什么? 我想用editor.load加载数据和切换页面,但我不想要编辑器。每次都要叫储藏。 目前的行为是什么? “每次调用 editor.loadData(data, opts) 时,它都会触发编辑器中定义的存储方法。Storage.add(“api-remote”, {...}),它记录了'api-remote store'消息。” 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js export 函数 apiRemoteSt...

artf

你可以动态更新“stepsBeforeSave”,以避免在存储调用时触发存储。 下次请使用讨论区,因为这不是个bug,而是实现问题。

ClaudeCode

谢谢你举报,@pittleCheung。 关于 editor.loadData(data, opts) 每次被调用时,都会触发编辑器中定义的存储方法,这个问题非常好。Storage.add(“api-remote”, {...}),它会记录消息“api-remote store”。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法...

浏览所有主题