GrapesJS 问题

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

找到 877 个问题

🔍 question
#51312023年5月20日作者 sdimitrenco2 个回答
0 个反应

JSON.stringify 之后,组件并非所有字段都存在

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 铬可复制演示链接 https://jsfiddle.net/sdimitrenco/rn8u4pc0/7/描述一下那个虫子 我不确定这是不是bug,但对我来说,这种行为看起来很奇怪 我有一个组件列表,包含组件ol和组件LI。 那个代码,代表阻挡 组件列表的模型 这个模型用于 ol 分量 以及锂分量的模型 如你所见,所有模型都包含类型和标签名称,在 Grapes 内部也正常,但如果我尝试转换成 json,比如 JSON.stringify(this.grapesInstance.getComponents()),我有 json 丢失了带标签名的所有字段,看...

artf

如果属性的值与默认定义相同,则跳过。这由 ['avoidDefaults'](https://github.com/GrapesJS/grapesjs/blob/e217dc75d463a84333ee4d9f37216f4f56c77024/src/editor/config/config.ts#L250-L256) 配置选项控制,强烈建议尽量保持 JSON 小。

ClaudeCode

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

#51122023年5月14日作者 putzwasser4 个回答
0 个反应

GrapeJS/拖放在 Linux 和 Wayland 上的 Brave 上不起作用

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 1.51.110 Chromium:113.0.5672.77(Offizieller 版本)(64位) 可复制演示链接 https://grapesjs.com/docs/getting-started.html#add-blocks 描述一下那个虫子 在Linux、Wayland(Arch Linux和Gnome)上,使用Brave时你不能添加块。如果你拖放方块,松开鼠标后它们会消失,这让GrapeJS变得失效或无用。 我试过禁用勇气护盾和无痕模式,确保没有干扰JS。结果一样 如何复现这个漏洞?打开 Grapejs 文档页面尝试通过拖放添加...

artf

通过用同一个 Brave 版本(Mac 版)检查,拖放功能似乎正常,所以看起来不像是 GrapesJS 本身或浏览器的问题。 如果有其他人有类似经历或对这个问题有更多了解,请告诉我们。

gxanshu

我在Tauri上也遇到同样的问题。他们用的是WebGTK,拖放功能也没用

putzwasser

通过用同一个 Brave 版本(在 Mac 上)检查,拖放似乎正常,所以看起来不像是 GrapesJS 本身或浏览器的问题。 我觉得这支票不算有效。用Mac会得到完全不同的配置。我本以为这个问题可能和我的具体设备有关,但这并不意味着葡萄那边完全没办法。 我不指望你去解决,因为这可能是个角落情况,资源有限。也许这甚至和在Wayland上使用Brave有关。

#51072023年5月11日作者 siddhi13972 个回答
0 个反应

安装像 grapesjs basic block 或 tui-image-editor 这样的插件时,会在命名空间中出现错误node_modules。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 匿名 描述一下那个虫子 如何复现这个漏洞?NPM 安装 Grapesjs-BASIC-Blocks 中的任意插件之后运行应用程序,就像我用的是 Angular 应用一样 预期的行为是什么? 应该能正常运行 目前的行为是什么? 它会报错,比如命名空间 grapesjs 未找到或 namespace tui-image-editor 找不到行为准则 [X] 我同意遵守本项目的行为准则

artf

如果你没有可重复的链接,请避免制造错误问题

ClaudeCode

谢谢你举报,@siddhi1397。 关于安装像grapesjs basic block或tui-image-editor这样的插件时,node_modules中会出现命名空间错误,这个问题非常好。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript...

#51052023年5月11日作者 Baghunts2 个回答
1 个反应

用(prop,value)来添加style o component,是不正确的工作。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome@latest 可复制演示链接 https://no-link.com 描述一下那个虫子 ![图片](https://github.com/GrapesJS/grapesjs/assets/133208978/3a5ce51a-fedf-4fd7-9063-a5af519690b9) ![图片](https://github.com/GrapesJS/grapesjs/assets/133208978/0b990b40-94b1-48c1-94dc-c4d81adf0368)行为准则 [X] 我同意遵守本项目的行为准则

artf

谢谢@Baghunts,发现得很好。目前的解决方法是 '.addStyle({ 'border-left': '...' })`

ClaudeCode

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

#50902023年5月3日作者 FaisalShaikhHA2 个回答
1 个反应

组件脚本函数在保存页面后运行两次

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 112.0.5615.137(官方配置)(arm64) 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 组件定义: 丢弃、保存和重新加载时,有两个地方调用的是同一个脚本。一个在保存的 HTML/JSON 里,另一个是 Grapesjs 自己添加的。 如何复现这个漏洞?添加带有脚本函数的自定义组件类型。放下它并保存页面。重新加载页面时,脚本函数运行两次。 预期的行为是什么? 脚本函数应该只运行一次。 目前的行为是什么? 脚本函数运行两次。行为准则 [X] 我同意遵守本项目的行为准则

artf

正如[这里](https://grapesjs.com/docs/modules/Storage.html#project-data)解释的,编辑项目时不应重新导入输出HTML,只需导入JSON。

ClaudeCode

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

#50892023年5月2日作者 davidrhoderick3 个回答
0 个反应

在SCSS中导入codemirror库时出现错误

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 112.0.1 可复制演示链接 https://github.com/davidrhoderick/grapesjs-test 描述一下那个虫子 如何复现这个漏洞?跟随入门(你可以用Typescript和SCSS看到我用一个基础的Parcel项目来理解的结构)当你进入“主题”步骤时,尝试导入Grapes SCSS时会报错。 预期的行为是什么? 只要我按照“入门教程”操作,一切都能正常工作。 目前的行为是什么? 当我进入应该允许我用SCSS自定义应用外观的步骤时,出现了以下错误: “壳” @parcel/transformer-sass...

davidrhoderick

有趣的是,基于CSS的样式确实有效。

artf

看起来 Parcel 变换器试图导入的是 'codemirror/lib/codemirror.js',而不是 'codemirror/lib/codemirror.css': “''CSS @import“codemirror/lib/codemirror”; ``` 所以我建议你在相关包裹上开启问题

ClaudeCode

谢谢你举报,@davidrhoderick。 关于在SCSS中导入codemirror库出错的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“cha...

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

浏览所有主题