PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

GrapesJS 问题

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

找到 466 个问题

🔍 components
#60962024年8月30日作者 kanaihyakumar4 个回答
2 个反应

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

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

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

#60872024年8月24日作者 leo-budgetsimple3 个回答
1 个反应

在组件内部HTML被更改后,撤销功能无法正常使用

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 最新消息 可复制演示链接 https://jsfiddle.net/condsjm1/ 描述一下那个虫子 如何复现这个漏洞?更改组件的内部HTML按CTRL+Z键 预期的行为是什么? 撤销内容 目前的行为是什么? 但内容不会被撤销 描述: 在小提琴上,按下“切换到Hello Planet”的按钮,然后选择编辑器,按CTRL+Z 撤销和重做都不行,但如果你正常改“Hello World”文本,它就能正常工作。 我觉得我改错了内容?如果是这样,修改组件内容并模拟原生行为的最佳方法是什么?行为准则 [X] 我同意遵守本项目的行为准则

artf

UndoManager跟踪的是组件状态的变化,而不是它的DOM。 这应该适用于你的情况,'element.components('Hello Planet')'

leo-budgetsimple

@artf 谢谢!

GJS Helper

你遇到的问题是直接操作组件的 innerHTML 属性,绕过了 GrapesJS内部的变更追踪机制。 GrapesJS的撤销/重做管理器( Editor 实例的一部分)只记录通过自身API或用户在编辑器内操作发生的更改。当你直接设置 component.view.el.innerHTML时, GrapesJS 不知道这个修改,因此不会被添加到撤销堆栈中。 根本原因 GrapesJS 撤销/重做系统依赖于通过 GrapesJS API观察组件模型的变更。当你直接访问并修改DO...

#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()时,画布上...

#60812024年8月23日作者 MdShadabAhamad3 个回答
0 个反应

自定义组件在初次渲染时无法在 grapsjs/studio 中显示

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? 镀铬可复制演示链接 https://stackblitz.com/edit/vitejs-vite-4noagg?file=src%2FApp.tsx描述一下那个虫子 我第一次在 React 应用渲染时无法看到我的自定义组件,当我尝试在块块部分搜索它时,它就出现了,搜索后可以在块块块中看到它。行为准则[X] 我同意遵守本项目的行为准则

artf

当你想在 GrapesJS API 层面扩展某些东西时,可以使用这些插件 “''js <StudioEditor ref={editorRef} 选项={{ 插件:[ editor => addCustomComponent(editor) ], // ... ```

MdShadabAhamad

我还添加了自定义样式设置StyleManager,但显示是空白的,https://stackblitz.com/edit/vitejs-vite-4noagg?file=src%2FApp.tsx

GJS Helper

你遇到的问题是,你的自定义组件块在第一次渲染时看不到,但搜索后会出现,这是GrapesJS如何初始化其UI组件,特别是块管理器,以及自定义块何时被注册时有关的常见时间问题。 根本原因 在你提供的StackBlitz示例中,你是在editorInstance.on('load', ...)回调中注册自定义组件(my-component)及其对应的块(my-block): GrapesJS 中的load事件是在编辑器完成初始设置并渲染完核心界面元素(包括块管理器)之后触发的。块...

#60402024年8月6日作者 Vampire-V4 个回答
0 个反应

无法读取未定义的属性(读取“lastComponent”)

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 版本 127.0.6533.89(官方构建)(64 位) 可复制演示链接 描述一下那个虫子 请检查一下。select的值未定义。我在React里用过,遇到了错误异常。 /*返回所选组件的模型@return {Component|null}@public / EditorModel.prototype.getSelected = function () { return this.selected.lastComponent(); }; ![图片](https://github.com/user-attachments/assets/2eaf...

artf

@Vampire-V,请正确遵循bug问题模板。没有可复现的演示,我们无法帮你。

Aravinth-2020

### GrapesJS 版本[x] 我确认使用最新版本 GrapesJS### 你用的是什么浏览器?版本 127.0.6533.89(官方构建)(64位)### 可复制演示链接### 描述一下那个虫子请检查一下。已选值为未定义。我在React里用过,结果遇到了错误异常。/* 返回所选组件的模型 @return {组件|null} @public */ EditorModel.prototype.getSelected = 函数 () { return this.selec...

Aravinth-2020

嘿,@Vampire-V,请正确遵循漏洞问题模板。没有可复现的演示,我们无法帮你。 你能分享一下解决办法吗? 我选择开放图层管理器时也遇到同样的问题,这个问题是在我自定义左边栏面板中选择另一个页面后出现的。

#60322024年8月3日作者 aswinkumar8632 个回答
0 个反应

图像分量支持通过拖放上传和选择视频文件

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v126 可复制演示链接 https://grapesjs.com/演示 描述一下那个虫子 如何复现这个漏洞?打开 [demo](https://grapesjs.com/demo)双击任意现有的图像组件以打开资产管理器。将视频文件拖拽到图片上传区。等待视频文件上传。点击上传的视频资源选择它。 注意: 这个问题只在拖拽时出现。视频组件也受此影响。 预期的行为是什么? 图片组件应当防止错误的文件类型选择。如果资产管理器第一步阻止上传错误文件类型,会更好。 行为准则 [X] 我同意遵守本项目的行为准则

artf

感谢@aswinkumar863报告。我很乐意合并修复的PR。

GJS Helper

你提到的问题,GrapesJS Image组件允许通过拖放上传和选择视频文件,这是默认资产管理器拖放处理程序未明确强制文件类型限制时常见的情况。虽然原生的 HTML input type="file" 元素使用 accept 属性过滤文件选择对话框,拖放操作则需要自定义验证逻辑以防止处理不需要的文件类型。 根本原因 演示中所见的默认GrapesJS资产管理器提供了基本的上传机制。当文件被拖放时,浏览器会提供对这些文件的访问。如果拖拽事件处理程序或后续上传函数没有明确的客户端...

#60242024年7月30日作者 yashvi20262 个回答
0 个反应

无法隐藏某些特定组件类型的RTE功能

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://codepen.io/Harshsne/pen/xxoOyXO 描述一下那个虫子 https://github.com/GrapesJS/grapesjs/issues/6019 关于此点, 我想只为某一特定类型隐藏。 示例:当组件属于链接类型时隐藏 rte行为准则 [X] 我同意遵守本项目的行为准则

artf

https://github.com/GrapesJS/grapesjs/issues/6019#issuecomment-2267466020 请避免制造重复问题。

GJS Helper

问题描述了一种常见需求,即在GrapesJS中条件控制富文本编辑器(RTE),特别是防止其在某些组件类型(如“链接”组件)上激活。虽然GrapesJS会自动为标记为editable的选定组件启用RTE,但开箱即用的配置选项并不支持基于组件类型来禁用该编辑器。 根本原因 GrapesJS的内部逻辑在选中组件并被视为可编辑时,调用editor.RichTextEditor.enable()方法激活RTE。这种行为是通用的,并不固有区分RTE激活的不同组件类型。为了实现条件禁用,...

#60192024年7月26日作者 yashvi20264 个回答
0 个反应

在最新版本中无法隐藏RTE功能

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://codepen.io/Harshsne/pen/xxoOyXO 描述一下那个虫子 如何复现这个漏洞?删除文本组件编辑文本组件 预期的行为是什么? RTE不应该被展示 目前的行为是什么? RTE被展示 当我把 grapesjs 版本改成0.20.4时,这个代码还能用,只有最新版本里不行行为准则 [X] 我同意遵守本项目的行为准则

artf

是的,'onActive'现在是异步方法,所以用'extendFnView'扩展它不够,你的代码会先于原始代码执行。 无论如何,你用一行简单的CSS也能达到同样的结果 “''CSS .gjs-rte-toolbar { 显示:无; } ```

yashvi2026

但我只想隐藏某些特定类型,比如:文本@artf

artf

你仍然可以不使用“extendFnView”来扩展视图。如[这里](https://grapesjs.com/docs/modules/Components.html#extend-parent-functions)所示,通过原型重用原始组件类型。

#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 个反应

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

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

浏览所有主题