GrapesJS 问题

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

找到 466 个问题

🔍 components
#52742023年8月3日作者 wunksert4 个回答
1 个反应

Remix 中的解析器漏洞

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v114 可复制演示链接 https://github.com/wunksert/remix-grapes-error/tree/main 描述一下那个虫子 如何复现这个漏洞?上文的克隆仓库NPM INPM 运行开发 你会看到葡萄iframe和样板画已经被渲染进画布里。尝试导出,你会发现所有葡萄模板也在渲染到画布里打开开发工具,你会看到错误: 补充背景 预期的行为是什么? 编辑器应该正确地渲染它的样板,和它一样 目前的行为是什么? 解析器似乎不起作用。编辑器渲染的是用来封装编辑器DOM的iframe。它还导出所有葡萄JS模板。 如果需要...

artf

@wunksert看起来编辑器会多次初始化自己,你是否正确地用 destroy 清除编辑器实例(例如在 useEffect 中)?

wunksert

也许我编辑项目中的结构或命名规范,解决这个问题会更简单。如果比在 GrapesJS Core 里改动更快,我很乐意这么做。

artf

是的,绝对和核心无关

#52682023年8月2日作者 SLain1233 个回答
0 个反应

YouTube或Vimeo的自动播放不行

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v115 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?将视频组件拖放到画布上。选择YouTube或Vimeo并添加视频ID。激活自动播放复选框。发布或预览页面。 预期的行为是什么? 视频必须在用户打开页面后自动播放。 目前的行为是什么? 视频无法启动。行为准则 [X] 我同意遵守本项目的行为准则

SLain123

我自己能修复这个bug,但我无法用fix把分支推送到仓库。看起来我没有推送或创建新分支的权限。

artf

@SLain123你必须从分支 https://stackoverflow.com/questions/38918942/pull-request-from-a-different-repository 创建一个PR

ClaudeCode

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

#52632023年7月28日作者 pittleCheung4 个回答
3 个反应

如果删除组件但不删除其对应样式,之后添加新组件会导致样式冲突吗?

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 最新版本的Chrome浏览器 可复制演示链接 无效 描述一下那个虫子 如何复现这个漏洞? <img width=“1666” alt=“image” src=“https://github.com/GrapesJS/grapesjs/assets/114127651/c37e339a-e14f-486b-85fb-34c170b855dd”> 预期的行为是什么? 目前的行为是什么? 我用的是 rewrite ctrl + c 和 ctrl + v 的逻辑 <img width=“681” alt=“image” src=“https://github...

pittleCheung

是的,你说得对,我复制了所有匹配的样式,这样我可以粘贴到任何地方,甚至跨浏览器粘贴,我觉得这非常有用。当我删除组件时,对应的样式不会被移除。这是一个大问题,当我在同一个网站上多次复制粘贴时,会导致大量重复的样式,容易引发样式冲突。 所以我不能指望那些风格被简单删除。如果可能的话,我会很感激一些建议。 “如果你复制了所有匹配的样式,它还会包含其他元素使用的样式,所以你不能指望那些样式被简单删除。”

pittleCheung

这仍然是个问题

artf

我不明白这怎么会是核心漏洞。 你用的是自己的复制粘贴逻辑,感觉也不对,你应该注意每个组件/规则的唯一ID。删除这些子组件后,它们的样式依然保留。 如果你复制了所有匹配的样式,它还会包含其他元素使用的样式,所以不能指望那些样式被简单删除。 请,如果你提交了bug,务必提供可复现的演示。

#52452023年7月16日作者 riteshdalal4 个回答
0 个反应

带有 editable:false 的组件内容仍然是可编辑的

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 114.0.5735.198 可复制演示链接 https://jsfiddle.net/riteshdalal/obnx7sg3/22/ 描述一下那个虫子 如何复现这个漏洞?在模型中创建一个带有 editable:false 的组件将组件放置在画布上 预期的行为是什么? 不可编辑组件的内容不应被GJS解析 目前的行为是什么? 不可编辑组件的内容会被解析并可编辑 请查看附带的演示链接行为准则 [X] 我同意遵守本项目的行为准则

artf

“可编辑”属性默认没有意义,只有其他扩展组件如“文本”或“图像”在内部使用。

riteshdalal

@artf我们如何创建一个组件,使 GJS 不解析这些子节点。

riteshdalal

“可编辑”属性默认没有含义,只被其他扩展组件如“文本”或“图像”内部使用。 这在旧版GJS上是有效的。0.21.3 版本就完全不工作了

#52412023年7月14日作者 hanzuken2 个回答
0 个反应

在缩放画布中移动时,元素的绝对位置与光标位置不同

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 114.0.5735.199(官方构建)(64 位) 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?启用绝对拖拽模式 'editor.editor.set('dmode', 'absolute')''将变焦调至50 “编辑。Canvas.setZoom(50)'选择一个组件。按下工具栏上的移动按钮 预期的行为是什么? 光标与元素之间的距离与画布缩放为100时相同。 目前的行为是什么? 光标与元素之间的距离相对较远。行为准则 [X] 我同意遵守本项目的行为准则

artf

与绝对模式相关的问题在此 https://github.com/GrapesJS/grapesjs/issues/3770

ClaudeCode

谢谢你举报,@hanzuken。 关于元素绝对位置和光标位置在缩放画布中移动时不同的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something...

#52362023年7月11日作者 joukhar2 个回答
0 个反应

内容为“null”的TextNode被渲染为“null”,而不是空白

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 版本 114.0.5735.199(官方构建)(64位)可复制演示链接 无描述一下那个虫子 抱歉又提起这个问题了,但你的提交功能不起作用 我用“npm install GrapesJS/grapesjs#dev”安装了开发版本 问题依然存在。 请您检查以下内容: /葡萄酱/src/dom_components/view/ComponentTextNodeView.ts “''js render() { const { model, el } = this; 如果 (model.opt.temporary) 返回此值; el.textCont...

artf

@joukhar“npm install GrapesJS/grapesjs#dev”是不够的,我还没在开发分支里创建构建,所以如果你想本地解决这个问题,必须先自己构建。 无论如何,即使相关问题关闭了,也没必要新建,你仍然可以在那里添加更新,问题没有被锁定。

ClaudeCode

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

#52322023年7月11日作者 bgrand-ch4 个回答
5 个反应

工作者 - 无头“文档未定义”

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 114.0.5735.133 可复制演示链接 不可能添加工蚁来繁殖。 描述一下那个虫子 如何复现这个漏洞?添加一名网页工作人员。在工作者内部初始化 GrapesJS,并设置“无头”选项。添加一个带有“编辑器”的插件。DomComponents.addType“ + ”styles“。给员工发消息。参考文献错误:文档未定义。 预期的行为是什么? 在工作程序中使用 GrapesJS 时,可以避免出现“ReferenceError: document is not fined”错误。 目前的行为是什么? 参考错误:文档未定义。 如果需要执行某些代码以重现该...

artf

你好,@bgrand-ch,不幸的是,所有涉及解析器(HTML/CSS)的内容都需要使用与DOM相关的API。对于CSS,也许你可以试试用[parser-postcss插件](https://github.com/GrapesJS/parser-postcss),我预计它能在工作环境下工作

bgrand-ch

你好,@artf,非常感谢你的快速回复😄,我这周会试试看。

bgrand-ch

@artf Post CSS 解析器插件在 Web Worker 中运行得非常完美!谢谢你的帮助。

#52292023年7月10日作者 joukhar4 个回答
1 个反应

内容为“null”的TextNode被渲染为“null”,而不是空白

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 版本 114.0.5735.199(官方构建)(64位)可复制演示链接 无描述一下那个虫子 如何复现这个漏洞?丢弃该组件 '<div class=\“flex items-center rounded shadow-md overflow-hidden max-w-xl relative dark:bg-gray-900 dark:text-gray-100\”> <div class=\“self-stretch flex items-center px-3 flex-shrink-0 dark:bg-gray-700 dark:text...

artf

大概是在八月的第一周

artf

你好@joukhar最新版本是不是也这样? 如果我用你的 JSON 示例,我能在导出代码中看到“null”(这应该可以修复),但我无法用你的 HTML 示例生成带有 “null” 的 “textnode”,你能为这个用例创建一个可复现的演示吗? 不确定在哪种情况下textnode可能是“null”,但我们可以肯定能防止这种情况......

joukhar

谢谢你的重玩,如果你需要试玩版,请给我点时间,等我做完会再评论 问题只在存储和加载时出现,但第一次丢弃组件时却没有反应

#52112023年7月2日作者 Zafermushtaha973 个回答
1 个反应

漏洞

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? v9.2 可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子 我在 Vue3 项目中使用它 当我想添加新组件时,页面会挂机且没有响应 这是我的代码: 行为准则 [X] 我同意遵守本项目的行为准则

gxanshu

你好!😊 我不认为这是GrapesJS的bug。我查看了你的复制链接,尝试在画布中添加组件,完全没问题。👍

artf

你必须绕过Vue的代理观察者 https://github.com/GrapesJS/grapesjs/issues/4497#issuecomment-1213078160

ClaudeCode

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

#52072023年6月28日作者 gxanshu3 个回答
1 个反应

创建多页面时的重复CSS

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome最新款 可复制演示链接 https://codesandbox.io/s/withered-bush-wv29dx?file=/index.js 描述一下那个虫子 如何复现这个漏洞?...在 grapesjs.init() 中创建多页面...检查每页的样式 预期的行为是什么? 每个页面都包含自己的样式,不包括其他页面的CSS ... 目前的行为是什么? 目前所有页面的CSS将合并并应用于所有页面。欲了解更多详情,请访问复制链接并查看所有页面的代码 ... 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 简单的演示代码 从...

artf

这是有意为之,我不打算改变这种行为,因为如果你需要每页不同的样式,可以很容易地创建特定的 CSS 选择器。 这种方法的最大好处是允许在不同页面间重复使用选择器。

hasan-aa

我觉得我遇到了这种方法的问题。 我把页面保存到服务器上是这样: “JS const component = page.getMainComponent(); const css = editor.getCss({ component, avoidProtected: true }) saveToBackendApi(component,css) 针对 ID 的 CSS 规则运行正常,但带类的规则即使加载在不同页面时也会重复。 例如,'.gjs-row' 类的 #s 规则在每...

ClaudeCode

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

浏览所有主题