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

GrapesJS 问题

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

找到 183 个问题

🔍 documentation
#61422024年9月10日作者 rhoenerSBS2 个回答
0 个反应

页面重做无法正常工作

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v128 可复制演示链接 https://app.grapesjs.com/工作室 描述一下那个虫子 添加页面后,通过撤销删除,再用重做重新添加,页面却无法正常工作。图层管理器在选择页面时不会更新。它也没有移除前的内容,似乎也没有实体,因为无法向该页面添加新组件。我在本地开发中注意到了这种情况,但由于 grapesjs 的 Studio 版本也出现了,我提交了工作室版本的链接以重现此问题。 如何复现这个漏洞?打开 GrapesJs 工作室示例添加页面点击撤销 - >页面从列表中移除点击重做 ->页面再次添加点击重做添加的页面查...

artf

谢谢你的报告@rhoenerSBS

GJS Helper

这确实是GrapesJS的撤销/重做机制中的一个bug,特别是在处理页面添加和删除时。你描述的行为符合“重做”操作后页面内部状态恢复不完整的情况。 根本原因 当页面在GrapesJS中添加时,会创建一个Page模型,关键是会关联一个根 Component(通常是带有 tagName: 'body'的 wrapper),以保存页面的所有内容。当你“撤销”页面添加时,Page模型及其关联的根组件会被移除或销毁。错误发生在“重做”操作期间:虽然Page模型本身被重新添加到编辑者的...

#61022024年8月31日作者 Alababdiy3 个回答
5 个反应

重新加载自定义组件编辑器后未显示特征

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? 铬91V可复制演示链接 https://jsfiddle.net/8tsj5vpb/描述一下那个虫子 我在 GrapesJS 中遇到了一个问题,就是在重新加载编辑器后,自定义组件定义的特征没有显示出来。刚添加组件时,特征是正常工作的,但在重新加载编辑器(例如刷新页面)后,特征不再出现在特征面板中。 繁殖步骤:使用编辑器定义自定义组件类型。DomComponents.addType,包含默认功能部分的特征。将自定义组件添加到画布中。重新加载编辑器(例如,刷新页面或重新初始化编辑器)。在编辑器中选择自定义组件。 预期行为: 自定义组件定义的特征应在...

mohamedsalem401

@Alababdiy 我无法通过提供的链接重现问题。 不过,问题似乎在于 GrapesJS 不允许在组件初始化后添加或定义它。

mohamedsalem401

嘿,@Alababdiy, 我没能重现你在JSFiddle中描述的问题。

GJS Helper

你遇到了一个常见问题,就是GrapesJS在重新加载编辑器后如何持续存在并重新识别自定义组件。自定义组件的特性会消失,因为GrapesJS没有正确地将加载的组件与其自定义类型定义关联。 根本原因 自定义特征在重新加载后不显示的主要原因是你的自定义组件定义model.defaults中缺少type属性。虽然你的isComponent函数帮助GrapesJS基于DOM结构初步识别组件,但GrapesJS大量依赖type属性(该属性在HTML元素中序列化为data-gjs-typ...

#60472024年8月7日作者 danstarns1 个回答
0 个反应

释放流程

GrapesJS 仓库构建工件发布过程中存在以下问题: 工件应直接来自开发者的机器。- https://github.com/GrapesJS/grapesjs/pull/6041 该过程没有文档 我们有多个软件包要发布,也需要完善的文档。该工单旨在标准化并记录 GrapesJS OSS 仓库的发布流程,使其与行业标准工作流程保持一致。这项工作将确保所有贡献者的一致性、可靠性和易用性。

GJS Helper

GrapesJS发布流程的问题——特别是对开发者机器的依赖以及缺乏文档——凸显了对标准化、自动化和透明工作流程的需求。采用行业标准的CI/CD(持续集成/持续交付)流水线将解决这些问题,确保所有贡献者的一致性、可靠性和易用性。 根本原因分析 核心问题源于缺乏正式化、自动化且文档化的发布流程。依赖单个开发者机器来构建和发布工件会带来若干风险: 不一致: 不同的开发环境可能导致构建输出的差异。 可重复性问题: 很难保证构建能被完全复制。 安全风险: 直接从本地机器发布可能会暴露...

#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激活的不同组件类型。为了实现条件禁用,...

#59822024年7月2日作者 ihatov082 个回答
1 个反应

诸如 md:flex-row(tailwind) 等组件样式被移除

GrapesJS版本[x] 我确认使用最新版本GrapesJS你用的是什么浏览器? Chrome 126.0.6478.127可复制演示链接 https://jsfiddle.net/6m53pwy7/4/描述一下那个虫子 如何复现这个漏洞? 我想用[Tailwind](https://tailwindcss.com/)配合GrapesJS,但这个框架使用Utility-First的CSS类来构建快速布局。问题是它还使用[“特殊”类](https://tailwindcss.com/docs/state-variants/#app)来定义样式变体,例如:hover:bg-blue 或 md:w-full 等。 包含冒号的样式,如...

artf

你需要正确地逃离CSS “''js .md\\:p-18 { 填充:4rem; } ```

GJS Helper

看起来你遇到了GrapesJS的CSS解析和样式管理中的已知限制或bug,涉及包含逃逸冒号(\:)的选择器,这在像Tailwind CSS这样的框架中很常见,适用于响应式变体(例如md:flex-row)或伪类(例如hover:bg-black)。 漏洞的根本原因 GrapesJS 使用内部 CSS 解析器(通常是 css-tree)和样式管理器来处理、存储和序列化 CSS 规则。当你在 domc.addType中使用 styles 属性定义样式时,GrapesJS 尝试解...

#58982024年5月22日作者 afrinxnahar1 个回答
0 个反应

资产管理链接断裂

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 火狐 可复制演示链接 https://grapesjs.com/docs/modules/Assets.html#initialization 描述一下那个虫子 如何复现这个漏洞?访问 https://grapesjs.com/docs/modules/Assets.html#initialization点击下方截图所示的链接 ![grapesjs2](https://github.com/GrapesJS/grapesjs/资产/125039325/b1dbd167-16b2-4bbb-b4fe-0f1eaf3db3be) 该页面重定向至...

GJS Helper

感谢你报告这个问题。你正确地识别了资产管理公司GrapesJS文档中的一个断链。 根本原因: AssetImage.ts文档中提供的链接错误地指向了GrapesJS仓库的dev分支。虽然文件路径src/assetmanager/model/AssetImage.ts正确,但dev分支要么不存在,要么不包含该路径的文件,导致GitHub上出现了404页面。 预期行为与修复: 链接应指向master分支,即AssetImage.ts文件所在的主分支。 链接断裂(文档中): ht...

#58912024年5月17日作者 shapley2 个回答
0 个反应

在Ubuntu 24.04 LTS上安装Grapesjs和yarn

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Firefox 125.0.3,Brave 1.66.110 可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子 按照“git”指令在终端执行“yarn start”时安装 Grapesjs : ~$ sudo apt install Nodejs NPM ~$ sudo apt install curl gnupg -y ~$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg |sudo apt-key add - 回声“Deb https://d...

artf

谢谢@shapley,这其实和GrapesJS甚至Yarn没什么关系,你得[增加文件系统监视者](https://stackoverflow.com/a/65347277)。

GJS Helper

你遇到的ENOSPC: System limit for number of file watchers reached错误是Linux系统(包括Ubuntu 24.04 LTS)在处理包含大量文件的大型项目时常见的问题,比如带有nodemodules目录的GrapesJS仓库。这不是GrapesJS或Yarn特有的bug,而是操作系统的限制。 根本原因: 你的操作系统对inotify子系统可以监控的文件和目录数量有默认限制。开发工具如Webpack、Sass和chokid...

#58032024年4月11日作者 rhoenerSBS3 个回答
0 个反应

过滤阻挡并不按文档中描述的方式工作

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v123 可复制演示链接 https://jsfiddle.net/7xu0efLc/3/ 描述一下那个虫子 GrapesJs 文档显示,理论上可以过滤这些块,并用过滤后的块列表重新渲染块管理器。(参见文档 https://grapesjs.com/docs/api/block_manager.html#render)你可以看到它不起作用。只有文本块应该是可见的。 如何复现这个漏洞?打开Fiddel或在自己的项目中整合链接文档中的过滤代码。 预期的行为是什么? BlockManager应该能够用过滤的块列表来渲染。 目前的行为...

artf

这种方法只有在默认块管理器已经渲染完毕后才有效。 如果你需要在开始时重新渲染,可以订阅封块管理器激活事件。 “''js editor.on('command:run:open-blocks', () => { const 块 = 编辑器。BlockManager.getAll(); const filtered = blocks.filter(block => block.getLabel() == 'Text'); 编辑。BlockManager.render(filte...

rhoenerSBS

谢谢你@artf

GJS Helper

谢谢你举报,@rhoenerSBS。 关于过滤区块“功能不按文档描述的那样工作,这个问题很棒。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethin...

#57682024年3月19日作者 rhoenerSBS1 个回答
0 个反应

BlockProperties 中“content”属性的类型错误

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v122 可复制演示链接 不适用 描述一下那个虫子 GrapeJs 文档表明,可以将混合内容添加到块的“content”属性中(参见 https://grapesjs.com/docs/modules/Blocks.html#mixed)。但该属性的类型定义是“string |ComponentDefinition”(参见 https://github.com/GrapesJS/grapesjs/blob/dev/src/block_manager/model/Block.ts#L17)。 这会导致 TypeScript 项目...

GJS Helper

你准确指出GrapesJS文档与content属性类型定义之间的差异BlockProperties。这确实是类型定义中的一个bug,因为content属性设计成接受比当前在Block.ts中声明的更灵活的值。 根本原因 GrapesJS块的content属性旨在高度多功能,允许开发者定义拖曳到画布上的组件初始结构。根据文档和实际运行时行为,content可以接受: 一个普通的 HTML 字符串(例如 "<div>Hello World</div>")。 单个Componen...

#57462024年3月12日作者 rhoenerSBS4 个回答
1 个反应

当面板不在编辑器容器时,ColorPicker 偏移不正确

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v122 可复制演示链接 https://grapesjs.com/docs/getting-started.html#style-manager 描述一下那个虫子 如何复现这个漏洞?访问 GrapeJS“入门”文档中的“StyleManager”部分 尝试在编辑器中使用该部分的颜色选择器。即使你在 .editor-canvas 中添加“position:relative”,当面板不在编辑器容器外时,颜色选择器仍然会计算错误的偏移 预期的行为是什么? 颜色选择器会显示在对应的输入旁边 目前的行为是什么? 相对偏移计算错误,选色...

bernesto

你好,@artf, 根本问题是我们试图将弹出调色板绝对放置在页面任意位置的另一个元素之上。即使原点元素不在编辑器容器节点之外,我们也需要这样做。 为满足此要求,弹出调色板不能包含在“offsetParent”的任何位置,且必须处于最高的z指数。否则,它将受其“offsetParent”可见区域的影响,并按父节点的“z-index”排序。 在我之前的补丁中,这似乎是可行的,因为示例编辑器占用了整个窗口,因此编辑器元素内的“left: 0”和“top: 0”也在正体内部是“le...

artf

@bernesto你能检查一下这个吗?因为它似乎和[你的更改](https://github.com/GrapesJS/grapesjs/pull/5704)有关。

bernesto

是的,我明白问题所在。逻辑需要考虑父节点在容器外的情况。让我看看能不能做。

浏览所有主题