GrapesJS 问题

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

状态

排序

找到 3,464 个问题

#61802024年9月30日作者 padcom4 个回答

1 个反应

Trait 的“setValue（）”方法在值变更时不会被调用

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome最新款可复制演示链接 https://codesandbox.io/p/sandbox/withered-rgb-xmw8gk 描述一下那个虫子如何复现这个漏洞？开放代码沙盒选择“body”（类型：“wrapper”）——观察从自定义源获取值的警报（调用 trait.getValue（）尝试更改值（特质：自定义，唯一存在的）——注意“setValue（）”未被调用，因为没有显示警报预期的行为是什么？会显示“将全局值设置为” + 值的提醒目前的行为是什么？未显示警报， trait.setValue() 方法未被调用。...

padcom

谢谢！我确认过了，一切正常！

padcom

据我所见，当“Trait.setValue（）”值来自输入时不会被调用。取而代之的是调用“setTargetValue（）”，但该程序不会检查特征定义中的“setValue（）”方法是否存在。另外，'Trait.setValue（）' 检查属性中的 'setValue' 键，而 'Trait.getValue（）' 通过 'this.get（'getValue'）' 获得其自定义 getter （Trait.ts：303）

padcom

我尝试按照[这个]（https://github.com/GrapesJS/grapesjs/discussions/5793）讨论来让它工作，但正如你在沙盒中看到的，它就是不行。

查看详情

#61722024年9月25日作者 yashvi20262 个回答

0 个反应

缺陷增强提问

需要在编辑器中支持暗色主题

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？铬可复制演示链接 --- 描述一下那个虫子如果你能在编辑器里切换主题，那就太好了，这样我就能根据喜好在深色和浅色之间切换。行为准则 [X] 我同意遵守本项目的行为准则

artf

请使用讨论区，而不是bug问题

GJS Helper

GrapesJS 没有内置暗/浅主题切换器，因为其界面可以通过 CSS 高度自定义。不过，你可以通过利用 GrapesJS对 CSS 变量的广泛使用，并在编辑器根元素上切换自定义 CSS 类，轻松实现暗色主题支持。该方案包含三个主要部分： HTML 结构：一个用于GrapesJS的容器和一个用于切换主题的按钮。 CSS 样式：通过覆盖 GrapesJS在特定类内默认的 CSS 变量来定义暗色主题样式。 JavaScript 逻辑：初始化GrapesJS，处理主题切换...

查看详情

#61712024年9月24日作者 rhoenerSBS2 个回答

0 个反应

提问 undo-manager 缺陷 typescript

：用UndoManager追踪自定义存储

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v129 可复制演示链接不适用描述一下那个虫子你好@artf，我目前正在实现一个带有 grapesjs 的编辑器，可以在已有页面旁边添加章节。我实现了一个章节存储，实现了IStorableModule，将章节存储在项目数据中。我的问题是，让UndoManager跟踪章节更改的最佳方式是什么？有必要以某种方式扩展ItemManagerModule吗？行为准则 [X] 我同意遵守本项目的行为准则

artf

大家好@rhoenerSBS请避免打开bug问题。

GJS Helper

GrapesJSUndoManager主要通过监听特定事件，特别是change:state，跟踪编辑器核心模型（组件、样式、页面、资源）的变化。要让它跟踪自定义ChapterStorage模块的变更，该模块实现IStorableModule，你需要明确向编辑器提示，当章节数据被修改时其状态发生变化。这会提示UndoManager捕获整个项目数据的新快照，包括你的自定义章节数据。以下是详细的做法： 1.建模你的自定义数据（章节）最佳实践是使用Backbone模型和集合来建...

查看详情

#61522024年9月18日作者 stpp24 个回答

1 个反应

提问组件缺陷 style-manager typescript

通过自定义代码添加的CSS在移除自定义代码组件后依然存在

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？任何可复制演示链接 https://grapesjs.com/演示描述一下那个虫子如何复现这个漏洞？添加带有HTML + CSS的自定义代码组件删除自定义代码组件。预期的行为是什么？所有代码都应被删除，包括CSS 目前的行为是什么？自定义CSS不会被移除，但其他部分已经被移除。 [gjs.webm]（https://github.com/user-attachments/assets/3fbd9a6d-ad0e-4fc6-add8-7cf31ae9293c）行为准则 [X] 我同意遵守本项目的行为准则

artf

这与核心无关，应在[插件]（https://github.com/GrapesJS/components-custom-code）层面处理。请在那里发布问题，我们会尽力找出合适的方法。

mosh-tudor

@stpp2 这其实不算是个bug;它更像是一种功能。:) 试试用“clearStyles”： https://github.com/GrapesJS/grapesjs/blob/d48e1e34a9fa363dcb83fdcca53a89563db17063/packages/core/src/editor/config/config.ts#L260-L272

stpp2

是的，我这里已经启用了“clearStyles”，但很多情况下效果不好。无论如何，我预计“自定义代码”组件应该有一定的“容器化”，这样移除后文档里不会留下任何东西。

查看详情

#61432024年9月10日作者 rhoenerSBS2 个回答

0 个反应

提问组件 undo-manager 缺陷画布

BUG/[问题]：如何在添加/挂载时正确包装组件？

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v128 可复制演示链接 https://jsfiddle.net/fjyk6n4a/2/ 描述一下那个虫子你好，@artf，我目前正在尝试将一个组件包裹在一个截面组件中，如果它还没有被包裹的话。我正在连接 component：mount 事件，并将新增组件替换为 section（该组件的子节点是新增的）。我的代码大致是这样的：我遇到的问题是UndoManager的栈和实际情况没有完全对齐。添加和封包后，栈有三个条目：移除原始组件、添加部分和添加原始组件。点击撤销时，该部分被移除，原始组件保留。但它有bug，因为它无法...

jasonvijayy

你好，@artf， [可复制链接]（https://codepen.io/Logeshwaran-codepen/pen/raLJpYb）我用'component.replaceWith（）'和UndoManager一起运行时也遇到崩溃。这只发生在编辑器生命周期事件中触发“replaceWith（）” （例如 'change：status'， 'component：selected'， 'component： deselect'）在撤销时，GrapesJS 尝试恢复旧...

GJS Helper

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

查看详情

#61422024年9月10日作者 rhoenerSBS2 个回答

0 个反应

提问组件 undo-manager 缺陷文档

页面重做无法正常工作

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v128 可复制演示链接 https://app.grapesjs.com/工作室描述一下那个虫子添加页面后，通过撤销删除，再用重做重新添加，页面却无法正常工作。图层管理器在选择页面时不会更新。它也没有移除前的内容，似乎也没有实体，因为无法向该页面添加新组件。我在本地开发中注意到了这种情况，但由于 grapesjs 的 Studio 版本也出现了，我提交了工作室版本的链接以重现此问题。如何复现这个漏洞？打开 GrapesJs 工作室示例添加页面点击撤销 - >页面从列表中移除点击重做 ->页面再次添加点击重做添加的页面查...

artf

谢谢你的报告@rhoenerSBS

GJS Helper

这确实是GrapesJS的撤销/重做机制中的一个bug，特别是在处理页面添加和删除时。你描述的行为符合“重做”操作后页面内部状态恢复不完整的情况。根本原因当页面在GrapesJS中添加时，会创建一个Page模型，关键是会关联一个根 Component（通常是带有 tagName: 'body'的 wrapper），以保存页面的所有内容。当你“撤销”页面添加时，Page模型及其关联的根组件会被移除或销毁。错误发生在“重做”操作期间：虽然Page模型本身被重新添加到编辑者的...

查看详情

#61302024年9月7日作者 juverric1 个回答

0 个反应

常规

---

GJS Helper

要创建带有可编辑文本、可编辑图片和自定义样式选项的自定义 GrapesJS 组件，你需要用 editor.DomComponents.addType 定义一个新的组件类型，然后将其注册为一个块。这允许用户拖拽组件，通过特征编辑其内容，并通过样式管理器修改其外观。步骤1：定义自定义组件类型我们将创建一个包含标题、描述和图片的“卡片”组件。我们会让文本和图片通过特征编辑，并添加自定义风格属性。步骤2：将组件注册为块定义好组件类型后，你需要在 GrapesJS 块面板中提...

查看详情

#61222024年9月4日作者 mohamedsalem4013 个回答

3 个反应

style-manager 组件 typescript

修复和重构Sorter.ts

[x] 修正 StyleManager 中的排序器使用情况（包含排序属性层的回归） [x] 基于“Components.canMove”的重构分选器 [x] 更新“canMove”，检查将主符号丢弃在其自身实例内。

mohamedsalem401

这事结束了。

mohamedsalem401

其理念是重构分拣器以提升可维护性和可读性。我们可以实施以下改动：让“Sorter”类依赖抽象树结构，而不是依赖“Component”或“Layers”等具体实现，让“Sorter”类使用更通用、抽象的树结构。这样会让它更灵活、更易重复使用。将代码拆分为多个较小的类，每个类负责单一职责'ComponentManager.canMove': 使用 'ComponentManager.canMove' 方法来判断是否可以移动某个“组件”。这样可以避免代码重复，并确保应用不同部分的...

GJS Helper

此次修复和重构解决了GrapesJSSorter.ts和组件移动逻辑中的多个关键领域，解决了样式管理器中的回归问题，并提升了整体拖放体验，尤其是可重用组件（符号）方面。 1.修复StyleManager中排序器的使用（带有排序属性层的回归）问题：引入了回归，StyleManager通过拖放排序属性层（例如多个box-shadow或text-shadow值）的能力被破坏。这通常发生在负责拖放重排序的Sorter组件配置错误或未正确集成样式管理器属性层的动态DOM结构时。解...

查看详情

#61162024年9月3日作者 SamMousa4 个回答

4 个反应

提问缺陷常规

AsDocument 无法如预期工作

GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？铬128 可复制演示链接 https://jsfiddle.net/sammousa/bxgsdc12/11/ 描述一下那个虫子如何复现这个漏洞？通过选项{asDocument: true}加载一个带有非空<head>的 HTML 字符串。通过editor.getProjectData()导出数据，确保包含<head>内容通过editor.loadProjectData()加载从2导出的数据通过editor.getProjectData()导出数据，确保它没有<head>内容预期的行为是什么？我预计这种情况应该始终成立，可能除了某些细节...

SamMousa

谢谢，但这不是重点。我完全能找到一个变通方法，但这并不能解决这个bug。 bug是通过“getProjectData（）”导出，然后通过“loadProjectData（）”导入，应该会得到相同的状态。而且你提议的改版实际上是直接写入画布，这意味着不能保证画布会完全不被动。（例如编辑器中有个“样式”配置，可以将样式注入画布头部）

artf

这个bug是，先通过getProjectData（）导出，再通过loadProjectData（）导入，应该会得到相同的状态。是的，绝对不是预期，我们会去了解的。感谢演示👍中那些易于复现的步骤

artf

谢谢@SamMousa详细的bug报告总是欢迎的。如果需要指引，我们很乐意为你指引方向 🙇 ♂️

查看详情

#61022024年8月31日作者 Alababdiy3 个回答

5 个反应

组件 style-manager 缺陷提问文档

重新加载自定义组件编辑器后未显示特征

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？铬91V可复制演示链接 https://jsfiddle.net/8tsj5vpb/描述一下那个虫子我在 GrapesJS 中遇到了一个问题，就是在重新加载编辑器后，自定义组件定义的特征没有显示出来。刚添加组件时，特征是正常工作的，但在重新加载编辑器（例如刷新页面）后，特征不再出现在特征面板中。繁殖步骤：使用编辑器定义自定义组件类型。DomComponents.addType，包含默认功能部分的特征。将自定义组件添加到画布中。重新加载编辑器（例如，刷新页面或重新初始化编辑器）。在编辑器中选择自定义组件。预期行为：自定义组件定义的特征应在...

mohamedsalem401

@Alababdiy 我无法通过提供的链接重现问题。不过，问题似乎在于 GrapesJS 不允许在组件初始化后添加或定义它。

mohamedsalem401

嘿，@Alababdiy，我没能重现你在JSFiddle中描述的问题。

GJS Helper

你遇到了一个常见问题，就是GrapesJS在重新加载编辑器后如何持续存在并重新识别自定义组件。自定义组件的特性会消失，因为GrapesJS没有正确地将加载的组件与其自定义类型定义关联。根本原因自定义特征在重新加载后不显示的主要原因是你的自定义组件定义model.defaults中缺少type属性。虽然你的isComponent函数帮助GrapesJS基于DOM结构初步识别组件，但GrapesJS大量依赖type属性（该属性在HTML元素中序列化为data-gjs-typ...

查看详情

GrapesJS 问题

浏览所有主题