GrapesJS 问题

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

状态

排序

找到 220 个问题

🔍 canvas

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

0 个反应

组件缺陷增强提问画布

Javascript CDN 在 Grapejs Canvas 上无法使用

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

artf

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

GJS Helper

你遇到的 Preline.js 在 GrapesJS 画布上无法工作的问题，尽管它通过 canvas.scripts包含，是依赖 DOMContentLoaded 初始化的 UI 库常见的时序问题。根本原因许多JavaScript UI框架和库，包括Preline.js，设计为在浏览器DOMContentLoaded事件触发时自动初始化其组件。该事件表示初始HTML文档已被完全加载和解析。当你在GrapesJS中包含canvas.scripts脚本时，脚本确实会加载到...

查看详情

#61432024年9月10日作者 rhoenerSBS2 个回答

0 个反应

提问组件 undo-manager 缺陷画布

BUG/[问题]：如何在添加/挂载时正确包装组件？

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v128 可复制演示链接 https://jsfiddle.net/fjyk6n4a/2/ 描述一下那个虫子你好，@artf，我目前正在尝试将一个组件包裹在一个截面组件中，如果它还没有被包裹的话。我正在连接 component：mount 事件，并将新增组件替换为 section（该组件的子节点是新增的）。我的代码大致是这样的：我遇到的问题是UndoManager的栈和实际情况没有完全对齐。添加和封包后，栈有三个条目：移除原始组件、添加部分和添加原始组件。点击撤销时，该部分被移除，原始组件保留。但它有bug，因为它无法...

jasonvijayy

你好，@artf， [可复制链接]（https://codepen.io/Logeshwaran-codepen/pen/raLJpYb）我用'component.replaceWith（）'和UndoManager一起运行时也遇到崩溃。这只发生在编辑器生命周期事件中触发“replaceWith（）” （例如 'change：status'， 'component：selected'， 'component： deselect'）在撤销时，GrapesJS 尝试恢复旧...

GJS Helper

谢谢你举报，@rhoenerSBS。关于BUG/[问题]：如何在添加/挂载时正确包装组件？的好问题。推荐的 Canvas 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'some...

查看详情

#60962024年8月30日作者 kanaihyakumar4 个回答

2 个反应

style-manager 组件缺陷提问画布

可调整大小的框在组件重新选择时消失

GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？铬可复制演示链接 https://jsfiddle.net/kanaihyakumar/oedg76nt/ 描述一下那个虫子描述当选择画布上的任何组件时，它会根据设置高亮底部的缩放框。但当再次点击同一个组件时，缩放框会消失。繁殖步骤用提供的HTML代码打开GrapesJS。选择画布上的任意组件以查看底部的缩放框。再次点击同一个组件。注意缩小框消失了。预期行为底部的缩放框即使在重新选择相同组件后仍应保持可见。实际行为重新选择同一个组件后，底部的缩放框会消失。代码 '''html <!DOCTYPE html> <html lang=“e...

kanaihyakumar

之前，我需要更清楚地说明重现问题的步骤。以下是制作该期的精细步骤。重现问题的步骤：直接点击该部分。观察显示的可调整大小选项。点击该部分中有列组件的区域（我为视频中所有元素添加了边框以便清晰）。注意，已选中分区组件，但底部可调整大小选项未显示。 [视频链接]（https://drive.google.com/file/d/1YUEYZxjpD1Un-xaBRUybuKDZO0_Xffmu/view）实际行为：直接点击该部分时，底部可调整大小选项如预期显示。然而，当点击有列...

kanaihyakumar

相信我，我很幸运能找到这种点击不同地方的悲惨行为，虽然表现不同，但表现不同。

artf

我觉得如果不是按点击键，它不会消失，但这是预料之中的，因为它准备被拖动

查看详情

#60862024年8月23日作者 jdkcoder3 个回答

1 个反应

缺陷组件提问增强画布

无法读取未定义属性（读取“lastComponent”）和可调整大小的功能无法使用

GrapesJS版本[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（）函数后，错误Cannot read properties of undefined (reading 'lastComponent'...

artf

你可以跳过移除组件（'instance.value.Components.clear（）'），因为你本来就会破坏编辑器 “''js if （确认（'你确定要清理画布吗？'）{ localStorage.clear（） reRender（） } ``` 这不应该产生任何错误

WilliamDASILVA

@jdkcoder 通过注释 reRender 函数，问题就解决了。 lastComponent 错误源于编辑器中的 this.get('selected') 在某个时刻未定义。通过检查调试器，当调用reRender时，确实会变成未定义，因为它重新初始化了 grapes。关于调整大小，我没看到你给的Stackblitz例子有什么问题。你可能应该单独开一个期刊，详细说明你遇到的行为和预期。

GJS Helper

看起来你在GrapesJS Nuxt.js 3项目中遇到了两个截然不同的问题。让我们来拆解并提供解决方案。第1期：Cannot read properties of undefined (reading 'lastComponent')之后clearAll() 根本原因当GrapesJS的内部状态，特别是与画布或活动组件相关的状态在所有组件被移除后变得不一致时，通常会出现这种错误。当你调用instance.value.DomComponents.clear()时，画布上...

查看详情

#60642024年8月18日作者 mannyyang4 个回答

0 个反应

提问缺陷画布

在程序中设置文本内容会在画布中清除

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ V126 可复制演示链接 https://jsfiddle.net/r5062suy/1/ 描述一下那个虫子如何复现这个漏洞？运行演示链接（https://jsfiddle.net/r5062suy/1/）看我尝试将div中的文本从“Hello world！！”改为通过 editor.getWrapper().find('.test-text')[0].set('content', '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 个回答

0 个反应

提问组件缺陷增强画布

图层管理器在页面间交替切换时会断裂

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ MS Edge 126.0.2592.87（官方版本）（arm64）可复制演示链接无描述一下那个虫子如何复现这个漏洞？...使用 grapesjs的0.21.11或0.21.12版本，创建一个多页项目。在页面A时，图层管理器正常工作。切换到页面B同样正常。 ...切回页面A会导致图层管理器停止响应，使其无用。实际上，切换到之前加载的任意页面会导致这个问题，但首次切换到任意页面则正常。切回v0.21.10问题解决预期的行为是什么？ ...图层panager应反映当前加载页面的组件并允许交互。目前的行为是什么？ ...图层管理器停...

GJS Helper

看起来你在0.21.11和0.21.12版本中遇到了已知的回归GrapesJS与多页面项目中层管理器行为相关的现象。问题出现在切回之前加载过的页面时，导致层管理器失去响应。根本原因解释 GrapesJS层管理器由一个负责渲染组件树的 LayerManagerView 驱动。该视图维护对应显示组件的collection的参考，通常是 editor.DomComponents.getWrapper().get('components')（当前页面根组件的子节点）。当你在Gr...

查看详情

#59902024年7月4日作者 ihatov084 个回答

1 个反应

提问缺陷 style-manager 组件画布

当你删除组件时，组件间的重复类也会被删除。

GrapesJS 版本 [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 个回答

1 个反应

提问缺陷画布 typescript

如果标签嵌套，无法在 Canvas 上选择

GrapesJS 版本 [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）可以帮上忙。

GJS Helper

这是像 GrapesJS 这样的可视化编辑器中常见的挑战，因为元素嵌套且视觉上重叠或维度相似。问题的核心在于 GrapesJS （以及浏览器整体）如何处理画布上的点击事件和组件选择。根本原因 GrapesJS的默认选择机制，类似于标准的浏览器事件气泡，优先考虑点击坐标处最内侧的元素。当子元素（例如你在“第2区”中的 div ）完全覆盖或与其父元素具有相同的有效可点击区域（section）时，点击事件总是会先在子组件上注册。这防止了通过画布点击直接选择父组件。这种行为导致...

查看详情

#59232024年5月31日作者 MarceloBD2 个回答

0 个反应

缺陷提问组件画布依赖

GrapeJs 有时在浏览器上加载不了

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Firefox 126.0.1可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子如何复现这个漏洞？打开你的Firefox浏览器，进入演示链接预期的行为是什么？编辑器应该会显示一个带有组件的白色屏幕画布。应该可以拖拽组件到屏幕中。目前的行为是什么？编辑器是灰色的，且没有任何组件可见。无法拖放组件。点击图层菜单时会报错。有时候它在匿名标签页上也加载不了，但有时会。非常奇怪的行为。我正在检查代码是否能解开它。行为准则[X] 我同意遵守本项目的行为准则

nhan-nguyen-se

@MarceloBD 你是怎么解决这个问题的？我也遇到同样的问题。

GJS Helper

看起来你在GrapesJS中遇到了一个间歇性bug，特别是影响加载和Firefox图层面板。点击图层菜单时的TypeError: model is undefined是一个关键线索，指向编辑器初始化时存在的竞争条件。根本原因解释这种间歇性行为最可能的原因，是GrapesJS编辑器初始化过程中出现的竞赛条件。以下是详细说明：组件模型加载：GrapesJS依赖其DomComponents模块管理画布上的所有组件（元素）。这些组件由骨干模型表示。图层面板渲染：图层面板（L...

查看详情

#59222024年5月30日作者 omerson-cruz2 个回答

0 个反应

提问组件缺陷画布 typescript

Unable to use UI controls for the video component when

GrapesJS 版本 [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的互动。

GJSBlock

谢谢你举报，@omerson-cruz。关于无法使用视频组件UI控件的好问题。推荐的 Canvas 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something chang...

查看详情

GrapesJS 问题

浏览所有主题