GrapesJS 问题

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

找到 3,464 个问题

#49212023年2月8日作者 ghost3 个回答
0 个反应

[X] 我确认使用最新版本的GrapesJS

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 110.0.5481.78(官方构建)(64 位) 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?安装带有npm或CDN的GrapesJs,并像往常一样初始化到容器,例如带有id #something 的div..在控制台上,检查verbose level是否设置为激活。在所有设置完成后,页面加载完成。刷新页面并留意控制台日志。 预期的行为是什么? 嗯,冗长的信息应该被修正。 目前的行为是什么? 目前显示了60多条冗长的信息。 ![截图 2023-02-08 21...

artf

结尾,因为这与核心无关,而是针对[演示页面](https://github.com/GrapesJS/grapesjs/blob/gh-pages/demo.html),如果你想屏蔽这些警告,请先发布PR

ghost

这和核心版不是演示版页面有关,因为我用演示页做了插画

ClaudeCode

谢谢你举报,@ghost。 关于*的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件生命周期 edit...

#49202023年2月8日作者 c9a23342 个回答
0 个反应

De locale 的遗漏定位键

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 与浏览器无关 可复制演示链接 https://codesandbox.io/s/pensive-river-417grm?file=/index.js 描述一下那个虫子 如何复现这个漏洞?import grapesjs/src/i18n/locale/de.js在编辑器配置中将它用作一个位置 预期的行为是什么? 一切德语 目前的行为是什么? 除了英语缺少关键字外,还有“background-repeat-sub”、“border-width-sub”、“padding-top-sub”等。因此,即使你用的是德语本地编辑器,编辑器部分是英语的 如果需要...

artf

谢谢@c9a2334你愿意为这个修复贡献一下吗?

ClaudeCode

谢谢你举报,@c9a2334。 关于遗漏de locale的本地化密钥,这是个很好的问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something...

#49192023年2月8日作者 maliuta-oleksandr2 个回答
0 个反应

调用 destroy 方法会破坏编辑器(React 应用)

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 109.0.5414.119 可复制演示链接 描述一下那个虫子 如何复现这个漏洞?将事件监听器添加到外部点击调用销毁方法 预期的行为是什么?无错误销毁 目前的行为是什么? 解析器未定义,但它尝试调用其方法。 未捕获(在promise中)类型错误:无法读取未定义属性(读取“parseHtml”) 呼叫堆栈: 行为准则 [X] 我同意遵守本项目的行为准则

artf

你能提供一个可复现的演示吗?因为我这边无法复现。

ClaudeCode

感谢你举报,@maliuta-oleksandr。 关于调用 destroy 方法会破坏编辑器(React 应用) 的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log(...

#49122023年2月6日作者 lexoyo3 个回答
1 个反应

文档中的链接断裂

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 任何 可复制演示链接 不 描述一下那个虫子 自从从 artf 迁移到 GrapesJS 后,我相信许多链接仍然指向原始仓库 https://github.com/GrapesJS/grapesjs/search?q=artf 我应该尝试替换它,还是我们只能信任GitHub的重定向? 行为准则 [X] 我同意遵守本项目的行为准则

lexoyo

我做了个人最佳,希望没漏掉什么,几乎每个链接都测试过

artf

我觉得有些内容会重定向,但有些可能坏了,如果有人愿意帮忙🙏,我会很感激

ClaudeCode

谢谢你举报,@lexoyo。 文档中链接损坏的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于团队更快识别根本原因 在报告中包含 Gra...

#49062023年2月6日作者 panditlakshya2 个回答
0 个反应

Grapesjs 在通过脚本设置 innerHTML 时无法识别组件类型。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v108.0.5359.98 可复制演示链接 https://codesandbox.io/s/grapes-js-template-literal-forked-6kgvrb?file=/src/App.js 描述一下那个虫子 我正在尝试创建一个自定义组件,通过脚本注入HTML代码后,能够识别内部HTML组件类型。 如何复现这个漏洞?直接通过脚本注入 HTML 预期的行为是什么? Canvas 应该能在注入代码后识别文本、图片等组件类型。 目前的行为是什么? 注入部分被识别为整个文本组件。(注入代码可以包含带有图像或文本的div元素)...

artf

请仔细阅读[本指南](https://grapesjs.com/docs/modules/Components-js.html),“脚本”中的所有内容都不在编辑器的权限范围内。你可以用 [component.components](https://grapesjs.com/docs/api/component.html#components) 方法更新组件本身,或者直接在定义中指定 'components: '<div ....'。

ClaudeCode

谢谢你举报,@panditlakshya。 关于Grapesjs在通过脚本设置innerHTML时无法识别组件类型,这个问题非常好。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => co...

#49042023年2月5日作者 handhikadj2 个回答
0 个反应

GetHtml() 在 js 中产生无效结构

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome最新可复制演示链接 https://jsfiddle.net/snj87o6f/1/描述一下那个虫子 背景/描述 我觉得这是个bug,因为我需要保存数据,然后用编辑器重新加载。storageManager onStore 上的 Parser.parseHtml。更糟的是,图层管理器的结构在刷新页面时(onLoad运行)会出问题。看起来像编辑器。Parser.parseHtml() 无法正确解析它 如何复现这个漏洞?拖放倒计时块到画布上查看控制台 预期的行为是什么? 即使里面有 js,也能生成有效的 html,这样在 storageManage...

artf

输出是正确的(检查真实控制台,而不是 jsfiddle 坏掉的那个),仔细阅读[本节](https://grapesjs.com/docs/modules/Storage.html#project-data),绝不应该依赖 HTML/CSS 来加载项目。

ClaudeCode

谢谢你举报,@handhikadj。 关于getHtml()在里面有js时生成无效结构的建议很棒!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“chang...

#49002023年2月5日作者 handhikadj2 个回答
0 个反应

SetStyle/getCss() 生成重复的 CSS

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 最新动态可复制演示链接 https://codesandbox.io/s/silent-river-ifczcv描述一下那个虫子 如何复现这个漏洞?访问网站参见控制台。注意“”和“body”选择器 预期结果 不应重复 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js editor = grapesjs.init({ storageManager:false // ... }) editor.on(“update”, () => { 保存到后端 console.log(“editor getCSs”, editor.getCs...

artf

有一些默认样式应用,你可以简单地禁用(传递空字符串)https://github.com/GrapesJS/grapesjs/blob/a83847b1b35e69e5a5810ccf1eb1e1384bf0aab1/src/editor/config/config.ts#L143-L147

ClaudeCode

谢谢你举报,@handhikadj。 关于 setStyle/getCss() 生成重复的 css 这个问题,非常好。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => con...

#48972023年2月3日作者 rudacs4 个回答
1 个反应

Component:styleUpdate / component:styleUpdate:propertyName 未被触发

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Edge 109.0.1518.70 可复制演示链接 https://jsfiddle.net/rudacs/kr2x1mnh/ 描述一下那个虫子 如何复现这个漏洞?在 StyleManager 中更改某些属性。更改 StyleManager 中的宽度属性。 预期的行为是什么? 事件 component:styleUpdate 被触发。 目前的行为是什么? 不会触发任何事件 component:styleUpdate。 行为准则 [X] 我同意遵守本项目的行为准则

artf

嘿,@rudacs你试过用'style:property:update'吗?

rudacs

这个活动奏效了。它被改成了这个吗? 而且只针对一处房产? 我该如何获得组件和属性被更改的? 特朗克。

SagarMaria

我来这里是因为我也有同样的问题。 使用建议的“style:property:update”似乎有效,但不知为何每次点击都会触发。 另外,我们如何针对某个特定的样式属性变更,比如“文本对齐”?

#48682023年1月26日作者 LukasSouza2 个回答
1 个反应

悬停的框在更改编辑器位置后显示错位

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 109.0.5414.87 可复制演示链接 https://jsfiddle.net/o45ncveu/6/ 描述一下那个虫子 如何复现这个漏洞?打开小提琴链接在超时前悬停部分组件等待时间结束以添加边距并更改编辑位置再次悬停组件 预期的行为是什么? 悬浮方块应与组件边距对齐 目前的行为是什么? 更改编辑器位置后,悬停方块显示与组件错位行为准则 [X] 我同意遵守本项目的行为准则

artf

不幸的是,这是预期中的,你必须在“外部”布局更改后使用 'editor.refresh()'。

ClaudeCode

谢谢你举报,@LukasSouza。 安全和依赖性问题很重要。GrapesJS 团队积极致力于保持依赖系统的更新。 为你现在: 运行“npm审计修复”以查看可用的补丁 查看是否有更新的GrapesJS版本,可能已经解决了这个问题 如有稳定版,升级前先测试最新稳定版 如果漏洞非常严重,可以使用“npm audit fix --force”,但请务必彻底测试 理解风险: 在GitHub安全公告中查看具体漏洞详情 并非所有高严重性问题都会影响你的代码路径 某些漏洞仅在特定条件下触...

#48652023年1月24日作者 agreif2 个回答
0 个反应

'@' 登录 class-attribute 块内容的值,在使用模板文字时将 '-' 符号更改为

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Firefox 108.0.2可复制演示链接 在JSfiddle里不行描述一下那个虫子 Grapesjs-CLI - 3.0.1 Grapesjs - 0.20.3 如何复现这个漏洞?添加一个带有带有 '@' 符号的 class 属性的 newblock,该模板为字面量 “''js bm.add('foo', { 标签:“Foo”, 内容: <div class=“uk-width-1-2@m”> <div>一些文字</div> </div> , });其他繁殖可能性: 用“导入”工具打开代码,将“class”属性改为包含“@”符号。 省省吧。然后当你重...

artf

我会更新逃脱功能,目前你可以通过[此选项](https://github.com/artf/grapesjs/blob/f08b5afe6f79626e734de330fbff3c30824c04a9/src/selector_manager/config/config.ts#L27-L32)提供自己的。

ClaudeCode

谢谢你举报,@agreif。 关于使用模板文字时,类别属性值将块块内容改为“-”符号的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethin...

浏览所有主题