GrapesJS 问题

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

找到 877 个问题

🔍 question
#60642024年8月18日作者 mannyyang4 个回答
0 个反应
提问缺陷画布

在程序中设置文本内容会在画布中清除

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ V126 可复制演示链接 https://jsfiddle.net/r5062suy/1/ 描述一下那个虫子 如何复现这个漏洞？运行演示链接（https://jsfiddle.net/r5062suy/1/）我尝试通过 'editor.getWrapper（）.find（'.test-text'）[0].set（'content'， 'test'）' 将 div 中的文本从“Hello world！！” 更新为“test”。但它实际上是清除文本。 预期的行为是什么？ 它会正确更新文本内容。 目前的行为是什么？ 而是把它清理干净。行为准则 [X] 我同...

danstarns

试试用“.getEl”方法在组件上，然后直接设置元素。 “''js const editor = Grapesjs.init（{ 容器：“#gjs”， fromElement： 1， 身高：“100%”， storageManager： { type： 0 }， 插件：['GJS-Blocks-BASIC'] }); setTimeout（（） => { const component = editor.getWrapper（）.find（'.test-text'）[0]...

mannyyang

“''jsconst component = editor.getWrapper（）.find（'.test-text'）[0]const el = component.getEl（）;el.textContent = “测试”

artf

@mannyyang你是从哪里找到“set（'content'， ...'）的用法的？它更像是私人财产，你绝不应该使用它。 要程序化地更新内部组件，请使用 'component.components（'test'）'

查看详情
#60632024年8月16日作者 sridharK643 个回答
1 个反应
提问缺陷typescript

如何默认加载 Grapesjs 预览

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 最新消息 可复制演示链接 https://stackblitz.com/edit/grapesjs-react-custom-ui-nrqcgn?file=src%2FApp.tsx 描述一下那个虫子 如何复现这个漏洞？...... 预期的行为是什么？ ... 目前的行为是什么？ ... 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： “''js 你的代码在这里 ```行为准则 [X] 我同意遵守本项目的行为准则

danstarns

你好，@sridharK64感谢你的报告，能否详细说明一下你的问题？因为我们只有：“如何默认加载葡萄预览”你的stack blitz 你能告诉我们你想要达到什么目标吗？

artf

@sridharK64我明白你的意思，但下次试着详细说明。 要在加载时触发预览，这就足够了 “''js editor.onReady（（） => { editor.runCommand（'core：preview'） }); ``` 但在你的例子中，你用的是“@grapesjs/React”，并带有完整的自定义界面，这意味着你必须自己实现如何用 React 组件处理预览。

ClaudeCode

谢谢你举报，@sridharK64。 关于如何默认加载葡萄预览的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'）...

查看详情
#60512024年8月9日作者 SAJAD-CH2 个回答
0 个反应
缺陷提问style-managertypescript

插件问题

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 ASDASD 描述一下那个虫子 我在安装 NPM 插件包（如 preset-webpage、preset-newsletter）时遇到了问题，检查 node module 文件夹时，CSS 文件都不见了。我想在 Angularts 中集成 Grapejs。 现在它包含了像 index.d.ts、index.ts 等页面。 行为准则 [X] 我同意遵守本项目的行为准则

artf

@SAJAD-CH，请在打开漏洞问题时提供可复现的实时演示（例如通过 stackblitz 进行）

ClaudeCode

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

查看详情
#60442024年8月7日作者 danstarns2 个回答
0 个反应
提问typescript常规

Node JS LTS 版本

在整个代码库中，我们构建并关联了基于非常旧版本Node.js的依赖。 参见： https://github.com/GrapesJS/grapesjs/blob/dev/.github/workflows/publish.yml#L15 https://github.com/GrapesJS/grapesjs/blob/dev/.github/workflows/build.yml#L15 https://github.com/GrapesJS/grapesjs/discussions/5973 https://github.com/GrapesJS/grapesjs/blob/dev/CONTRIBUTING.md?plain=...

danstarns

相关报道：https://github.com/GrapesJS/grapesjs/issues/6048https://github.com/GrapesJS/grapesjs/issues/6049

ClaudeCode

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

查看详情
#60402024年8月6日作者 Vampire-V4 个回答
0 个反应
缺陷组件提问typescript

无法读取未定义的属性（读取“lastComponent”）

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 版本 127.0.6533.89（官方构建）（64 位） 可复制演示链接 描述一下那个虫子 请检查此事。selectern的值未定义。我在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

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

Aravinth-2020

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

查看详情
#60392024年8月6日作者 Gryphonn4 个回答
3 个反应
提问缺陷style-manager

无法设置块显示值

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬126 可复制演示链接 https://jsfiddle.net/Gryphonn/ob1pznh6/ 描述一下那个虫子 如何复现这个漏洞？选择任意单词。包装得有型。保持该词被选中。进入通用->显示我要布洛克。我点击了“屏蔽”，但什么都没发生。 预期的行为是什么？ 显示值必须是空的，这样我才能立即选择所需的内容。 或者它必须显示所选文本当前的实际显示值。这里是Inline，而不是Block。 目前的行为是什么？ 目前我需要点击两次。 首先，点击除屏蔽以外的任何东西。显示场被激活。 那我应该点击屏蔽。 如果需要执行某些代码以重现该漏洞，请将其粘贴到下...

artf

是的，问题就在这里： https://github.com/GrapesJS/grapesjs/blob/1e3766f0060e6da502fccf9ba9eb938d5ac860bb/src/style_manager/model/PropertyFactory.ts#L267 添加一个新选项，比如“初始”，并设为默认选项，这样做合理吗？

danstarns

> 你好@Gryphonn，>我试图复现你的问题，但步骤不太清楚，请重新表述。bandicam.2024-08-08.21-07-14-667.mp4 感谢您的详细报告 🙏 看起来我们应该更好地处理默认显示，这样你就不用先切换到另一个显示器再切换回来。

danstarns

你好，@Gryphonn， 我试着重现你的问题，但步骤不太清楚，请重新表述。

查看详情
#60382024年8月6日作者 dharma-glui2 个回答
0 个反应
提问缺陷typescript

像按钮上的Onclick事件这样的内联事件声明正在被移除

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ 铬可复制演示链接 https://jsfiddle.net/6bn43a05/描述一下那个虫子 如何复现这个漏洞？为HTML标签添加点击事件 预期的行为是什么？ 加载到编辑器后不应该删除该事件 目前的行为是什么？ 它会从 HTML 中移除点击事件 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： “''js 不需要额外添加代码 ``` 同样的问题在这里报告： https://stackoverflow.com/questions/78496572/grapesjs-removes-onclick-attributes-how-to-prevent-i...

artf

这是出于安全考虑，但你可以用“config.parser.optionsHtml.allowUnsafeAttr”选项禁用它（风险自负）：https://github.com/GrapesJS/grapesjs/blob/819bfcf44bb23d51990eba3b4330e9932df59cde/src/parser/config/config.ts#L116

ClaudeCode

谢谢你举报，@dharma-glui。 关于像按钮上的点击事件这样的内联事件声明正在被移除的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'s...

查看详情
#60322024年8月3日作者 aswinkumar8632 个回答
0 个反应
提问组件缺陷增强typescript

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

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

artf

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

ClaudeCode

谢谢你举报，@aswinkumar863。 关于Image Component允许通过拖放上传和选择视频文件的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义...

查看详情
#60242024年7月30日作者 yashvi20262 个回答
0 个反应
组件缺陷提问文档

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

葡萄JS版本 [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 请避免制造重复问题。

ClaudeCode

谢谢你举报，@yashvi2026。 无法隐藏某些特定组件类型的RTE的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本...

查看详情
#60192024年7月26日作者 yashvi20264 个回答
0 个反应
提问组件缺陷

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

葡萄JS版本 [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）所示，通过原型重用原始组件类型。

查看详情

浏览所有主题