#62022024年10月9日作者 klipto-inc2 个回答
葡萄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...
#61432024年9月10日作者 rhoenerSBS2 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome v128 可复制演示链接 https://jsfiddle.net/fjyk6n4a/2/ 描述一下那个虫子 你好，@artf， 我目前正在尝试将一个组件包裹在一个截面组件中，如果它还没有被包裹的话。我正在连接 component：mount 事件，并用 section 组件替换新增组件（该组件子节点为新增组件）。 我的代码大致是这样的： “''js editor.on（'component：mount'， （component） => { if （component.parent（）.attributes.tagName ！== 'b...
jasonvijayy
你好，@artf， [可复制链接]（https://codepen.io/Logeshwaran-codepen/pen/raLJpYb） 我用'component.replaceWith（）'和UndoManager一起运行时也遇到崩溃。 这只发生在编辑器生命周期事件中触发“replaceWith（）” （例如 'change：status'， 'component：selected'， 'component： deselect'） 在撤销时，GrapesJS 尝试恢复旧...
ClaudeCode
谢谢你举报，@rhoenerSBS。 关于BUG/[问题]：如何在添加/挂载时正确包装组件？的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'some...
#60962024年8月30日作者 kanaihyakumar4 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://jsfiddle.net/kanaihyakumar/oedg76nt/ 描述一下那个虫子 描述 当选择画布上的任何组件时，它会根据设置高亮底部的缩小框。但是，当再次点击同一个组件时，调整大小框就会消失。繁殖步骤使用提供的HTML代码打开GrapesJS。选择画布上的任意组件以查看底部的缩放框。再次点击同一个组件。注意缩小框消失了。预期行为 底部的缩放框即使在重新选择相同组件后仍应保持可见。实际行为 重新选择同一个组件后，底部的缩放框会消失。代码 '''html <！DOCTYPE html> <html lang...
kanaihyakumar
之前，我需要更清楚地说明重现问题的步骤。以下是制作该期的精细步骤。 重现问题的步骤：直接点击该部分。观察显示的可调整大小选项。点击该部分中有列组件的区域（我为视频中所有元素添加了边框以便清晰）。注意，已选中分区组件，但底部可调整大小选项未显示。 [视频链接]（https://drive.google.com/file/d/1YUEYZxjpD1Un-xaBRUybuKDZO0_Xffmu/view） 实际行为：直接点击该部分时，底部可调整大小选项如预期显示。然而，当点击有列...
kanaihyakumar
相信我，我很幸运能找到这种点击不同地方的悲惨行为，虽然表现不同，但表现不同。
artf
我觉得如果不是按点击键，它不会消失，但这是预料之中的，因为它准备被拖动
#60862024年8月23日作者 jdkcoder3 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Edge v128可复现演示链接https://codesandbox.io/p/devbox/github/jdkcoder/cv-builderhttps://stackblitz.com/github/jdkcoder/cv-builder描述一下那个虫子 我在Nuxt.js 3项目中使用GrapesJS，每次在/components/common/LeftSidebar.vue运行clearAll（）函数后，都会出现“无法读取未定义属性（读取'lastComponent'）”的错误。 “''js const { 实例， reRender， out...
artf
你可以跳过移除组件（'instance.value.Components.clear（）'），因为你本来就会破坏编辑器 “''js if （确认（'你确定要清理画布吗？'）{ localStorage.clear（） reRender（） } ``` 这不应该产生任何错误
WilliamDASILVA
@jdkcoder 通过注释“reRender”功能，这个问题就解决了。 “lastComponent”错误源于编辑器中的“this.get（'selected'）”在某个节点未定义。通过检查调试器，当调用 reRender 时，确实会变成未定义，因为它重新初始化了葡萄。 关于调整尺寸，我没看到你举的Stackblitz例子有什么问题。我觉得你应该单独开一期，详细说明你的行为和预期。
ClaudeCode
谢谢你举报，@jdkcoder。 无法读取未定义属性（读取“lastComponent”）和可调节大小功能不工作的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeS...
#60642024年8月18日作者 mannyyang4 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ V126 可复制演示链接 https://jsfiddle.net/r5062suy/1/ 描述一下那个虫子 如何复现这个漏洞？运行演示链接（https://jsfiddle.net/r5062suy/1/）我尝试通过 'editor.getWrapper（）.find（'.test-text'）[0].set（'content'， 'test'）' 将 div 中的文本从“Hello world！！” 更新为“test”。但它实际上是清除文本。 预期的行为是什么？ 它会正确更新文本内容。 目前的行为是什么？ 而是把它清理干净。行为准则 [X] 我同...
danstarns
试试用“.getEl”方法在组件上，然后直接设置元素。 “''js const editor = Grapesjs.init（{ 容器：“#gjs”， fromElement： 1， 身高：“100%”， storageManager： { type： 0 }， 插件：['GJS-Blocks-BASIC'] }); setTimeout（（） => { const component = editor.getWrapper（）.find（'.test-text'）[0]...
mannyyang
“''jsconst component = editor.getWrapper（）.find（'.test-text'）[0]const el = component.getEl（）;el.textContent = “测试”
artf
@mannyyang你是从哪里找到“set（'content'， ...'）的用法的？它更像是私人财产，你绝不应该使用它。 要程序化地更新内部组件，请使用 'component.components（'test'）'
#60012024年7月13日作者 thigh1 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ MS Edge 126.0.2592.87（官方版本）（arm64） 可复制演示链接 无 描述一下那个虫子 如何复现这个漏洞？...使用 grapesjs 的 0.21.11 或 0.21.12 版本，创建一个多页项目。在A页时，图层管理器正常工作。切换到B页同样正常。...切回页面A会导致图层管理器停止响应，使其失去使用功能。实际上，切换到任何之前加载的页面都会引起这个问题，但第一次切换到任意页面则正常。切回v0.21.10问题解决 预期的行为是什么？ ...图层panager应反映当前加载页面的组件并允许交互。 目前的行为是什么？ ...图层管理...
ClaudeCode
谢谢你举报，@thigh。 关于图层管理器在页面切换时会断裂的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行细致跟踪...
#59902024年7月4日作者 ihatov084 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 126.0.6478.127（Windows） 可复制演示链接 https://jsfiddle.net/t06s4oLb/8/ 描述一下那个虫子 如何复现这个漏洞？将第1节添加到画布上在第1节下将第2节添加到画布中将画布上的第2节移除。第一节的风格将被打破。 https://github.com/GrapesJS/grapesjs/assets/14024165/097dbe62-d8d3-4270-930d-5668ef10c2df 预期的行为是什么？ 我希望即使不同组件有相同的类，它也不会被删除。 目前的行为是什么？ 原因是第一节...
artf
你应该避免把共享样式放在组件相关的样式里。 请查看关于如何预防这种情况的讨论：https://github.com/GrapesJS/grapesjs/discussions/5968
ihatov08
作为临时变通，每个组件的样式前缀都带有 id。 “''js 从 './data/hero-1' 导入 { HTML 作为 hero1html，css 作为 hero1css }; 从 './data/content-1' 导入 { html 作为 content1html，css 作为 content1css }; 连续来源 = [ { 编号：“英雄-1”， 名字：“英雄1号”， 分类：“英雄”， HTML：hero1html， CSS：hero1css， 类别：“BG-G...
ihatov08
@artf 谢谢你的回复。 我想确认一下#5968
#59892024年7月4日作者 ihatov083 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 126.0.6478.127（Windows） 可复制演示链接 https://jsfiddle.net/vbu18q5f/2/ 描述一下那个虫子 如何复现这个漏洞？如果标签嵌套，则无法在画布上选择 Demolink中的第2节块在section标签里面有div标签。 第2节 块无法在Canvas中选择部分标签，div标签被选中。 这带来了两个问题。选中了div标签，所以当你尝试删除画布上的方块时， 只有 div 标签会被删除，section 标签会保留。 你不能从画布中删除所有方块元素，所以要删除所有方块元素，必须在图层管理器中删除它...
ihatov08
@artf 抱歉，框架并不像你说的那样解决所有问题。 我以后会认真阅读文档。 谢谢你的回复。
artf
这不是个bug，更像是与HTML整体工作方式相关的用户体验问题，这也是我们在工具栏里提供“选择父”按钮的确切原因。 不要指望框架能帮你解决所有问题，提供用户友好界面和更好的用户体验是开发者的责任，有很多[组件属性]（https://grapesjs.com/docs/api/component.html#properties）可以帮上忙。
ClaudeCode
谢谢你举报，@ihatov08。 关于如果标签嵌套，无法在Canvas上选择，这个问题很棒。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something...
#59232024年5月31日作者 MarceloBD2 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Firefox 126.0.1可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 如何复现这个漏洞？打开你的Firefox浏览器，进入演示链接 预期的行为是什么？ 编辑器应该显示一个带有组件的白色屏幕画布。应该可以把组件拖拽到屏幕里。 目前的行为是什么？ 编辑器是灰色的，且没有可见组件。不能拖拽组件。点击图层菜单时会报错。 有时候它在匿名标签页上也加载不了，但有时会。非常奇怪的行为。我正在检查代码，看看能不能解答。行为准则[X] 我同意遵守本项目的行为准则
nhan-nguyen-se
@MarceloBD 你是怎么解决这个问题的？我也遇到同样的问题。
ClaudeCode
谢谢你举报，@MarceloBD。 安全和依赖性问题很重要。GrapesJS 团队积极致力于保持依赖系统的更新。 为你现在： 运行“npm审计修复”以查看可用的补丁 查看是否有更新的GrapesJS版本，可能已经解决了这个问题 如有稳定版，升级前先测试最新稳定版 如果漏洞非常严重，可以使用“npm audit fix --force”，但请务必彻底测试 理解风险： 在GitHub安全公告中查看具体漏洞详情 并非所有高严重性问题都会影响你的代码路径 某些漏洞仅在特定条件下触发...
#59222024年5月30日作者 omerson-cruz2 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ v125.0.6422.113（官方构建）（64位） 可复制演示链接 https://codesandbox.io/p/sandbox/eloquent-leaf-vd68cf?file=%2Findex.js%3A9%2C47 描述一下那个虫子 如何复现这个漏洞？将视频内容拖到画布上。选择视频组件和角色设置/特征选择“YouTube”作为提供者粘贴YouTube源的视频ID。确保“控制”特性已启用尝试点击播放或调整视频分量的音量，但不起作用 预期的行为是什么？ 预期：当 Video 的“控制”启用后，用户可以使用视频界面的控制，比如“播放”、“调整...
artf
编辑过程中你不能与iframe互动，否则就无法从画布中选择它。 不过预览时你会检查iframe的互动。
ClaudeCode
谢谢你举报，@omerson-cruz。 关于无法使用视频组件UI控件的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something chang...