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

GrapesJS 问题

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

找到 743 个问题

🔍 bug
#54252023年9月26日作者 javadsamiee2 个回答
2 个反应

添加相似页面时,仅会更改组件ID。

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 117 可复制演示链接 https://jsfiddle.net/mirjavad/ctsx7zer/5/ 描述一下那个虫子 我想为一个页面创建一个克隆动作,并注意到了这个bug。 如何复现这个漏洞?创建多个具有相同组件ID和CSS的页面 页码: [{ 编号:“第1页”, 名称:“第1页”, 组件: '<div id=“comp1”>Page 1</div>', 风格:“#comp1 { 颜色:红色 }', }, { 编号:“第2页”, 名称:“第2页”, 组件: '<div id=“comp1”>Page 2</div>', 风格:'#c...

artf

好的抓包@javadsamiee将在下一次版本中修正

GJS Helper

你遇到的问题是GrapesJS中在初始化多个组件时已知的行为,这些组件拥有相同的初始 ID 和对应的内联样式。GrapesJS 正确识别并重命名组件 ID,以确保编辑器 DOM 内的唯一性(例如 comp1、comp1-2、comp1-3)。但它不会自动解析和更新每个页面对象 styles 属性中定义的 CSS 选择器。结果是所有页面最终都采用针对原始非唯一 ID(#comp1)的 CSS 规则,导致样式错误。 根本原因 当GrapesJS在初始化时处理pages数组,它将...

#54242023年9月26日作者 bgrand-ch2 个回答
1 个反应

'component:styleUpdate' 事件未被触发

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Chrome 116.0.5845.187可复制演示链接 https://jsfiddle.net/yLcvbwjd/描述一下那个虫子 如何复现这个漏洞?添加 component:styleUpdate 事件用 addStyle 或 setStyle更新组件样式 预期的行为是什么? component:styleUpdate 开除 目前的行为是什么? component:styleUpdate 没有被解雇 行为准则[X] 我同意遵守本项目的行为准则

bgrand-ch

@artf ❤️

GJS Helper

GrapesJS中的component:styleUpdate事件是编辑层事件,主要由GrapesJS风格管理器或其他内部编辑器机制触发,当组件样式通过UI修改时触发。当你直接调用Component模型实例的component.setStyle()或component.addStyle()时,你是在修改组件底层的骨干模型的style属性。此操作会触发组件模型本身的change:style事件,但不会自动传播到编辑器触发component:styleUpdate事件。 根本原...

#54082023年9月21日作者 quentin-bettoum3 个回答
0 个反应

Main.scss 在 0.21.6 中缺失

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Firefox 118 可复制演示链接 没有 描述一下那个虫子 你好, 我按照医生的指示做了主题 GrapesJS :https://grapesjs.com/docs/getting-started.html#themeing 但从 0.21.6 版本开始,SCSS 已经无法再进行 @import "grapesjs/src/styles/scss/main.scss"; ,因为 node_modules/grapejs/ 文件夹里的文件缺失了行为准则 [X] 我同意遵守本项目的行为准则

joukhar

是的,'src'文件夹缺失了

artf

和 https://github.com/GrapesJS/grapesjs/issues/5392 一样的问题

GJS Helper

你好!你正确地发现了 GrapesJS 从版本0.21.x开始打包样式的方式发生了变化。通过npm安装 main.scss 文件和整个 src/styles/scss 目录,确实不再包含在 nodemodules/grapesjs 文件夹中。 根本原因 此变化的原因是 GrapesJS npm包现在分发的是预编译的CSS文件,而非原始SCSS源码。现代库通常这样做是为了简化使用、缩小包大小,并确保不同构建环境中的样式一致。包含SCSS文件的 src 目录是 GrapesJS...

#53982023年9月19日作者 padcom2 个回答
0 个反应

Package.json 中导出时缺少类型声明

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? 镀铬可复制演示链接 https://github.com/padcom/grapesjs-import-error描述一下那个虫子 0.21.6 改变了导出方式,现在 VSCode 不再识别类型声明: ![图片](https://github.com/GrapesJS/grapesjs/assets/553994/1505cca4-2436-4840-8efd-2f2adccb4723) 当TypeScript使用以下情况时,就会发生这种情况: 这是所有Vue.js应用程序中使用的 [@vue/TSCONFIG/tsconfig.json](h...

padcom

PR:https://github.com/GrapesJS/grapesjs/pull/5399

GJS Helper

这确实是一个有效的错误报告,涉及TypeScript在使用现代模块解析策略时如何解析类型声明,特别是moduleResolution: "bundler"(或node16/nodenext)。 根本原因 问题源自 0.21.6 版本package.jsonGrapesJS中的 exports 字段。当 compilerOptions.moduleResolution 设置为 "bundler"(这在现代构建如 Vite 和 Vue CLI 中很常见)时,TypeScript...

#53922023年9月17日作者 joukhar4 个回答
11 个反应

最新版本0.21.6没有src文件夹

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome 版本 114.0.5735.199(官方构建)(64位) 可复制演示链接 无 描述一下那个虫子 最新版本0.21.6没有 src 文件夹 安装 grapesjs 使用NPM时 npm install [email protected] 行为准则 [X] 我同意遵守本项目的行为准则

joukhar

只有一个文件 “嘶嘶声” @import “./editorvariables”; @import “./editorvendor”; @import “./editorfonts”; @import “./editoricons”; @import “./custom”; @import “./custom/main”; @import “./装填手”; ``` SCSS文件比CSS文件更有组织、更强大,但我有备份计划

artf

@bgrand-我觉得你提到的问题可以用CSS变量解决。 我还在考虑引入一个新的主题小模块,允许通过程序更新编辑器外观,底层则是更新内部CSS变量。

joukhar

因为SAS文件可以覆盖变量,这一点非常重要

#53892023年9月16日作者 hannydevelop3 个回答
1 个反应

GrapesJS v0.21.5 在 NodeJS(无头)中无法工作

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? ChromeV117.0.5938.62 可复制演示链接 https://stackblitz.com/edit/node-1zsusv 描述一下那个虫子 如何复现这个漏洞? 运行 node index.js 开始应用。 预期的行为是什么? ... 目前的行为是什么? 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: 行为准则 [X] 我同意遵守本项目的行为准则

hannydevelop

你能查查最新版本吗 https://github.com/GrapesJS/grapesjs/releases/tag/v0.21.6 非常感谢@artf这方法非常有效。

artf

你能查查最新版本 https://github.com/GrapesJS/grapesjs/releases/tag/v0.21.6

GJS Helper

你遇到的问题,TypeError: grapesjs.init is not a function在Node.js环境中运行GrapesJS时,源于对GrapesJS运作方式和headless: true选项目的的根本误解。 根本原因 GrapesJS 主要是一个客户端、基于浏览器的 JavaScript 库。它设计用于在网页浏览器环境中运行,并高度依赖浏览器特定的 API,如文档对象模型(DOM)、window对象以及各种渲染功能。grapesjs包在直接导入纯 Node...

#53882023年9月16日作者 hannydevelop4 个回答
0 个反应

运行无头模式时,编辑器返回不同的 HTML

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? ChromeV117.0.5938.62 可复制演示链接 https://codesandbox.io/embed/quizzical-galileo-cqldjh?fontsize=14&hidenavigation=1&theme=dark 描述一下那个虫子 如何复现这个漏洞?使用商店管理器的商店页面尝试用无头模式取回他们 预期的行为是什么? 创建的HTML应与编辑器相同,包括自定义标签。 目前的行为是什么? 自定义标签和其他非默认标签如 input 会被转换为 div。例如,以下是编辑器的正常行为: 不过,这里有无头模式的代码: 看看...

artf

你好,@hannydevelop你有自定义组件类型,但你没有在“grapesjs.init”上传递任何插件,这就是为什么默认的“div”应用了

hannydevelop

你好@hannydevelop你有自定义组件类型,但没有传递任何插件 grapesjs.init ,所以才应用了默认 div 抱歉我又要重新打开这个,按正常方式添加插件会返回错误:

artf

@hannydevelop能给我看代码吗?

#53862023年9月15日作者 kmkaliraj2 个回答
0 个反应

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

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 埃奇 可复制演示链接 匿名 描述一下那个虫子 如何复现这个漏洞? 版本:0.18.2 我们系统中 grapejs 模块记录了以下错误。我们不确定该错误是在哪种情况下出现的。 类型错误:无法读取未定义的属性(读取“宽度”) at Object.getTargetToElementFixed (https://content.domain.com/resource/makerx/static/js/module/vendors~form-designer~c7cc6222.85501132.chunk.js:2:6330393) 载于 i.up...

artf

0.18.2版本比较老,必须升级

GJS Helper

GrapesJS 0.18.2 中的TypeError: Cannot read properties of undefined (reading 'width')错误,源自 getTargetToElementFixed 和 updateToolsGlobal,表明 GrapesJS的内部工具(如选择器、调整器或通用画布覆盖层)正在尝试读取操作时null或undefined的 DOM 元素的width属性。这通常发生在画布工具试图更新其相对于已无效或不存在的目标元素的位置...

#53852023年9月14日作者 padcom4 个回答
0 个反应

GetDirtyCount() 非确定性加载后

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://github.com/padcom/grapesjs-bug-dirty-count-non-deterministic/blob/master/index.html 描述一下那个虫子 目前,用户呼叫 await load() 时,脏计数为零。只有在下一个事件循环或之后,计数才会增加。因此: 打印出 0 但仅需一毫秒后: 变更次数为1。 预期行为是,在等待调用 load()后,如果正如#5373所述编辑器被更改,那么调用 load()后应立即发生。 ``` 行为准则 [X] 我同意遵守本项目的行为准则

artf

还增加了加载选项,以便在加载后清除编辑器内部状态 “''js const storageOptions = {}; const loadOptions = { clear: true }; await editor.load(storageOptions, loadOptions); editor.getDirtyCount();加载后应该始终是0 ```

padcom

谢谢!期待下一次发布!

artf

这里已经有 https://github.com/GrapesJS/grapesjs/releases/tag/v0.21.6

#53812023年9月12日作者 sammrafi1 个回答
0 个反应

重复CSS

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 116.0.5845.187(官方构建)(64位) 可复制演示链接 https://jsfiddle.net/bw4Lxp6c/ 描述一下那个虫子 如何复现这个漏洞? 当我添加一列时,它会生成重复的 CSS 格式(最大宽度:768px) @media 预期的行为是什么? CSS 代码应该生成一次。 目前的行为是什么? @media中复制CSS代码(最大宽度:768px) 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: 行为准则 [X] 我同意遵守本项目的行为准则

GJS Helper

你遇到的重复 CSS 规则问题,flex-wrap:wrap;特别是@media (max-width: 768px)块内.row类的重复,是GrapesJS在某些条件下可能出现的已知行为,通常与响应式样式的应用和管理方式有关。虽然 GrapesJS的 StyleManager 和 CssGenerator 设计用于整合样式,但边缘情况或特定组件交互有时会导致规则生成重复。 根本原因 最可能的根本原因是,当你添加列或执行触发响应式样式更新的动作时,GrapesJS Styl...

浏览所有主题