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

GrapesJS 问题

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

找到 545 个问题

🔍 typescript
#54252023年9月26日作者 javadsamiee2 个回答
2 个反应
提问style-manager组件缺陷typescript

添加相似页面时，仅会更改组件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 个反应
提问组件缺陷style-managertypescript

'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事件。 根本原...

查看详情
#53982023年9月19日作者 padcom2 个回答
0 个反应
typescript缺陷提问

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...

查看详情
#53892023年9月16日作者 hannydevelop3 个回答
1 个反应
缺陷提问typescript

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 个反应
提问缺陷文档typescript

运行无头模式时，编辑器返回不同的 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能给我看代码吗？

查看详情
#53852023年9月14日作者 padcom4 个回答
0 个反应
缺陷提问typescript

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

查看详情
#53792023年9月12日作者 Sw33tgt4 个回答
4 个反应
提问组件缺陷画布typescript

组件的类别修改不会自动检测

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 版本 116可复制演示链接 https://jsfiddle.net/h5b0ndvL/1/描述一下那个虫子 当组件在画布中重新渲染时，模型定义中添加的新属性会被渲染，但新添加的类不会在渲染时添加。初始化函数Component.ts添加默认属性和组件属性。 'this.set（'attributes'， { ...（result（this， 'defaults'）.attributes ||{}), ...（this.get（'attributes'） ||{}), }); 但是，在查看 initClasses（） 函数时，我只能...

Sw33tgt

目前作为一个变通方法，我用 'editor.on（'component：mount'， （component） => {}）;' 函数添加了这个功能，直到收到反馈。看起来效果不错。如果某个类从定义中移除，该被移除的类仍然可以在已保存组件的类列表中使用，但我猜没有解决办法。 “打字稿” editor.on（'component：mount'， （component） => { const cls = component.getClasses（） ||[]; const cls...

Sw33tgt

是的，这对类是有意为之，按照你的方法，你无法从组件中移除定义的类，它们会在组件初始时不断添加。 这对于组件中某个类被遗忘，想在渲染时添加它到另一个版本插件时是可以的。我们把这些类设置为私密，这样用户看不到它们，也无法手动移除。 我相信作为一种变通方法，我可以把旧类的定义存到新属性上，然后在渲染新类之前比较它们，看看哪些需要被删除。我可以想办法解决我们需要的。 感谢你的回复@artf，

Sw33tgt

在 Component.ts 的 initClasses（） 函数中做类似这样的功能，会把新类添加到渲染的元素中。告诉我你的看法： “打字稿” const cls = this.get（'classes'） ||攻击者 ||[]; 从const变为令 令 clsArr = isString（cls） ？cls.split（' '） ： CLS; / 与默认职业对比 / cont dCls = result（this， 'defaults'）.classes ||[]; co...

查看详情
#53782023年9月11日作者 Sw33tgt4 个回答
0 个反应
缺陷提问组件画布typescript

未捕获类型错误：在图层管理器面板拖动组件时无法读取未定义属性（读取“Canvas”）。

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v116.0.5845.97 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？从画布中选择任意组件打开图层管理器面板选择第一个“分段”组件使用箭头移动该段并改变顺序 预期的行为是什么？ 该部门应将新位置移动 目前的行为是什么？ 控制台正在抛出一个错误：未捕获类型错误：无法读取未定义属性（读取“Canvas”）和未捕获类型错误：无法读取未定义属性（读取“方法”）。 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： ![图片]（https://github.co...

Sw33tgt

我降级到v0.21.4后这个问题就没了，所以只在最新版本上出现。

padcom

最简单的例子里也有同样的问题。降级到0.4会让它消失。回归？

artf

是的，已经修正了[这里]（https://github.com/GrapesJS/grapesjs/issues/5355）。我会推迟本周末发布新书。

查看详情
#53772023年9月11日作者 Akkiiiiiii4 个回答
0 个反应
缺陷提问typescript

错误：node_modules/grapesjs/dist/index.d.ts：12551：2 - 错误 TS1005：“？”预期。 12551 }>？C ： {}） |未定义） =>（编辑者：编辑者） =无效>; ~ 错误：node_modules/grapesjs/dist/index.d.ts：12558：3 - 错误 TS1005：“？”预期。 12558 }>？C ： {}） |未定义） =>（编辑者：编辑者） =无效>;

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 铬描述一下那个虫子 升级后，新版本0.21.5出现了这些错误。我们使用的是 grapesjs + Angular， grapesjs v 0.21.5，目前jsFiddle和codeSandbox都不支持，所以我放了一个假链接。请帮帮我们。行为准则[X] 我同意遵守本项目的行为准则

Akkiiiiiii

@artf你能帮我检查一下吗

THEWebDegenerate

我用的是Safari和Chrome。 2023年9月12日星期二晚上10：52 Akshay jangid @.> 写道：@artf <https://github.com/artf>你能帮我检查一下这个吗—直接回复此邮件，请访问GitHub查看<https://github.com/GrapesJS/grapesjs/issues/5377#issuecomment-1716989704>，或取消订阅<https://github.com/notifications/un...

ghost

升级后+1

查看详情
#53632023年9月5日作者 rozek4 个回答
0 个反应
缺陷提问画布typescript

无法“排序”图层面板的元素

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 版本 1.56.20 Chromium：115.0.5790.171（Offizieller 构建）（arm64）可复制演示链接 没有描述一下那个虫子 当我尝试通过图层面板中排序画布上的元素时，拖曳时反复出现以下错误提示： 此外，在“鼠标上移”时，我会收到以下错误信息 这个问题可能是最近才出现的，因为我记得几天前排序功能还能用......行为准则[X] 我同意遵守本项目的行为准则

arbisyarifudin

我也遇到同样的问题

rozek

'Sorter.ts：500' 包含 'const cv = this.em！.Canvas'，显然是错误的（因为“em”_是null或未定义） 很遗憾，我目前还不太理解所有缩写的代码——但是：如果将第499行改为“如果（型号？）”，会不会更易。Set && （this.em ！= null）） {' 这里有帮助吗？ 注意：确实，这个小“窍门”帮我整理图层——我可以把图层往下移，但不能往上移。而且，因为我不懂代码，我的破解就是“破解”，不是修复！

artf

作为 https://github.com/GrapesJS/grapesjs/issues/5355 的重复关闭

查看详情

浏览所有主题