GrapesJS 问题

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

状态

排序

找到 3,464 个问题

#50402023年4月10日作者 abubaker4171 个回答

0 个反应

添加可样式事件，使样式可以被覆盖，打开

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？版本 111.0.5563.147（官方构建）（64位）可复制演示链接我提供了代码描述一下那个虫子增加了可样式事件，使样式可以覆盖 https://github.com/GrapesJS/grapesjs/issues/1041 https://github.com/GrapesJS/grapesjs/pull/1056 @tommedema，@artf你能帮我查一下吗？我用这个逻辑来覆盖一个风格使用这个功能时，样式第一次被覆盖，第二次从style-manager中移除样式后再添加时，样式无法使用，也没有样式。刷新后又重新激活...

GJSBlock

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

查看详情

#50372023年4月6日作者 siddhi13974 个回答

0 个反应

提问组件缺陷

如何在可文本组件内将外部文本拖入特定的索引中？

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？铬可复制演示链接匿名描述一下那个虫子如何复现这个漏洞？...... 预期的行为是什么？ ...当我在编辑器中拖拽外部内容时，它应该会被丢在特定位置目前的行为是什么？ ...它在该位置被丢弃，但与组件中已有的文本重叠如果需要执行某些代码以重现该漏洞，请将其粘贴到下面：行为准则 [X] 我同意遵守本项目的行为准则

siddhi1397

你好@artf，当我在编辑器中拖动外部内容时，它应该被丢在特定位置，但它与组件中的现有内容重叠。那么，有没有办法让我把文字放在特定位置而不让文字重叠？顺便说一下，我用的是canvas：dragdata来获取外部内容。

artf

@siddhi1397请不要把bug问题作为功能或问题打开

siddhi1397

好吧，抱歉。@artf 但请问能否帮忙说明如何实现？

查看详情

#50202023年3月31日作者 at-codes2 个回答

1 个反应

提问 style-manager 缺陷 typescript

在视图面板按钮更改标题属性无法持久

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？铬可复制演示链接 https://jsfiddle.net/em9kt2Lb/描述一下那个虫子如何复现这个漏洞？在编辑器加载时实现下面的代码预期的行为是什么？按钮标题会变，也会保持变化目前的行为是什么？按钮标题会变，但点击一个后又会恢复原状。如果需要执行某些代码以重现该漏洞，请将其粘贴到下面：行为准则[X] 我同意遵守本项目的行为准则

artf

你好，面板按钮的 @at-code 标题直接连接到 [i18n locale strings]（https://github.com/GrapesJS/grapesjs/blob/976e791c5abd6f876a0f29b58de32ff1549f32c2/src/i18n/locale/en.js#L48），所以你需要在那里更新这些字符串。你可以在这里找到更多关于i18n模块的信息[https://grapesjs.com/docs/modules/I18n.html...

GJS Helper

你遇到的问题，即点击按钮标题后会恢复，源于直接操作 GrapesJS UI组件中的DOM元素。 GrapesJS，像许多现代Web框架一样，通过底层数据模型和视图管理UI（通常内部使用Backbone.js面板和按钮）。当你直接用jQuery更改 title 属性时，你绕过了模型视图架构。在交互（比如点击）时，相关视图可能会根据模型重新渲染或更新状态，实际上覆盖了你的直接DOM更改。根本原因：直接操作 GrapesJS 面板按钮（例如使用 $(elem).attr('t...

查看详情

#50192023年3月31日作者 julia-alberici2 个回答

0 个反应

提问组件缺陷 style-manager typescript

使用 loadProjectData（）时无法在编辑器初始化时设置预览模式

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v111 可复制演示链接 https://codesandbox.io/s/grapesjs-react-components-forked-h3j496？file=/src/index.js 描述一下那个虫子如何复现这个漏洞？用 Reactjs 启动一个项目 grapesjs 编辑器初始化后立即使用 loadProjectData(data) 通过 editor.onReady(() => { editor.runCommand("preview"); }); （或任何其他方式）设置预览模式预期的行为是什么？编辑器应该...

julia-alberici

声明一下，这其实不算是个bug，我能实现预期的行为，替换了'editor.onReady（（） => { editor.runCommand（“preview”）; }）;' 与 'editor.on（'update'，（） => { editor.runCommand（'preview'）; }）;`

GJS Helper

你遇到的问题是，尽管GrapesJS组件在loadProjectData()后运行了preview命令，仍然保留编辑模式的行为（比如悬停/选择样式），这是与异步操作相关的时序问题。根本原因当你初始化GrapesJS并立即调用editor.loadProjectData(data)时，这个操作是异步的。editor.onReady()回调会在编辑器实例本身完全初始化并准备交互时触发，但它不会等待loadProjectData()方法完成将项目组件渲染到画布上。因此，当e...

查看详情

#50122023年3月27日作者 Hunganh30121 个回答

0 个反应

提问常规

我不知道为什么我在select-image标签里加了src属性，但它在GrapesJs的“viewcode”部分里没有出现

Em ở Việt nam（我来自越南）我希望能得到帮助。链接GitHub：https://github.com/GrapesJS/grapesjs/discussions/5011

GJS Helper

听起来你在GrapesJS中处理自定义组件时遇到了一个常见问题，特别是关于属性的定义和序列化。src属性虽然是<img>标签的标准配置，但除非你明确定义，否则select-imageGrapesJS不会自动识别或序列化。根本原因 GrapesJS中的“视图代码”部分（或 HTML 输出）是基于组件的内部模型生成的。当你创建自定义组件（例如 <select-image>），GrapesJS本身并不了解它应该拥有哪些属性，也不知道该如何处理它们。如果像 src 这样的属性在自...

查看详情

#50092023年3月24日作者 Drive4ik2 个回答

0 个反应

提问 style-manager 缺陷 typescript

Style parsing error if it has @import

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？仅Firefox（所有版本）可复制演示链接 https://jsfiddle.net/03m6jz5f/描述一下那个虫子如何复现这个漏洞？清除浏览器缓存尝试导入带有样式标签的模板，该模板带有@import字体 URL 预期的行为是什么？样式需要加载时没有 JS 错误目前的行为是什么？ GJS 不要等样式加载，试着解析 null 表（JS 错误）。参见截图： ![изображение]（https://user-images.githubusercontent.com/7843031/227580073-de78605e-dc69-495...

artf

GrapesJS 解析器目前无法异步，这也没法修复，但无论如何，从性能角度来看，你绝不应该在 CSS 中使用“@import”，因为它会生成阻塞请求

GJSBlock

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

查看详情

#50062023年3月24日作者 sandipshirawala2 个回答

0 个反应

缺陷提问常规

Grapejs 中的 aphostrope 问题——显示时从 HTML 字符串显示时没有显示

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v91 可复制演示链接 https://jsfiddle.net/szLp8h4n 描述一下那个虫子 $html = str_replace（“ ' ”， \' “，$html）; 行为准则 [X] 我同意遵守本项目的行为准则

artf

提供一个有效且可复现的演示链接，而不是用作模板的那个

GJSBlock

谢谢你举报，@sandipshirawala。 Grapejs 中 aphostrope 问题——显示 html 字符串时未显示，似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。尝试什么：添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：如果还没测试过，请用最新的GrapesJS版本测试提供最小可重复的示例...

查看详情

#50032023年3月23日作者 ngoc1992 个回答

0 个反应

提问组件缺陷性能 typescript

Slow absolute drag on Chrome

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？铬111 可复制演示链接 https://jsfiddle.net/9zf4kd6e/——这是设计师模式的演示描述一下那个虫子如何复现这个漏洞？添加一个绝对 dragMode 的图像分量上传足够大的SVG图片。你可以使用[此图片]（https://freesvg.org/anime-girl-warrior）拖动图像拖动文本组件预期的行为是什么？SVG图像在拖拽时不会被调整大小将SVG图像快速移动到正确位置当存在较大的SVG图像时，组件移动速度较快目前的行为是什么？SVG图像在拖曳时根据光标位置自动调整大小。手动调整图像大小后，可以...

artf

@ngoc199我已经讨论了大部分关于绝对模式的问题[这里]（https://github.com/GrapesJS/grapesjs/issues/3770#issuecomment-944915841）。我觉得调整大小的问题可以很容易地加入，但大型嵌入的SVG图片（默认情况下，没有外部资源存储，图片是内嵌的）看起来更像是浏览器的限制

GJSBlock

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

查看详情

#50002023年3月22日作者 applibs2 个回答

0 个反应

提问缺陷文档 style-manager typescript

Localization works weird

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？铬111 可复制演示链接 https://jsfiddle.net/zfkuq7sh/ 描述一下那个虫子有些文本会被翻译，有些不会。有些只有在我点击某个工具按钮后才会被翻译，然后才会被翻译。比如顶部栏按钮Sestins。它是英文版，点击这个按钮后它会被翻译成我的母语。为什么？行为准则 [X] 我同意遵守本项目的行为准则

artf

@applibs如果没有提供有效且可复现的演示，我帮不上忙，请包含所有缺失的依赖。

GJSBlock

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

查看详情

#49982023年3月22日作者 glaprida4 个回答

0 个反应

提问缺陷画布 typescript

ShowOffsetsSelected not working

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chome v111 可复制演示链接 https://codepen.io/glaprida/pen/YzOJOGq 描述一下那个虫子如何复现这个漏洞？打开codepen链接。拖拽任意基础块到画布上，并加以边距或填充。你会发现 showOffsets 按预期工作（当鼠标悬停未选中的元素时）选择该元素会隐藏所有偏移量。即使你悬停它，也不会显示所选元素的偏移量。（showOffsetsSelected 设置为 true）预期的行为是什么？以便能够看到所选元素的偏移量。目前的行为是什么？它没有展示他们行为准则 [x] 我同意遵守本项目...

glaprida

你好，我看到现在即使选中了元素，悬停时也能正常工作（之前只对未被选中的元素有效） ...但它只在悬停时显示偏移量（我以为“showOffsetsSelected”即使没有悬停也会显示所选元素的偏移量）这是本意的行为吗？有什么建议能让我在选中元素没有被悬停时看到它的偏移量吗？非常感谢！

artf

是的，目前这正是它的设计目的。也许有一天我们会重新考虑，让它更可定制（比如在Canvas上扩展/创建样式处理器的能力）。

glaprida

你好，抱歉一直坚持......但你能想到有什么办法能实现这个目标吗？我需要的是显示所选元素的偏移量，无论它是否悬停。

查看详情

GrapesJS 问题

浏览所有主题