GrapesJS 问题

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

状态

排序

找到 743 个问题

🔍 bug

#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模型本身被重新添加到编辑者的...

查看详情

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

查看详情

#60962024年8月30日作者 kanaihyakumar4 个回答

2 个反应

style-manager 组件缺陷提问画布

可调整大小的框在组件重新选择时消失

GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？铬可复制演示链接 https://jsfiddle.net/kanaihyakumar/oedg76nt/ 描述一下那个虫子描述当选择画布上的任何组件时，它会根据设置高亮底部的缩放框。但当再次点击同一个组件时，缩放框会消失。繁殖步骤用提供的HTML代码打开GrapesJS。选择画布上的任意组件以查看底部的缩放框。再次点击同一个组件。注意缩小框消失了。预期行为底部的缩放框即使在重新选择相同组件后仍应保持可见。实际行为重新选择同一个组件后，底部的缩放框会消失。代码 '''html <!DOCTYPE html> <html lang=“e...

kanaihyakumar

之前，我需要更清楚地说明重现问题的步骤。以下是制作该期的精细步骤。重现问题的步骤：直接点击该部分。观察显示的可调整大小选项。点击该部分中有列组件的区域（我为视频中所有元素添加了边框以便清晰）。注意，已选中分区组件，但底部可调整大小选项未显示。 [视频链接]（https://drive.google.com/file/d/1YUEYZxjpD1Un-xaBRUybuKDZO0_Xffmu/view）实际行为：直接点击该部分时，底部可调整大小选项如预期显示。然而，当点击有列...

kanaihyakumar

相信我，我很幸运能找到这种点击不同地方的悲惨行为，虽然表现不同，但表现不同。

artf

我觉得如果不是按点击键，它不会消失，但这是预料之中的，因为它准备被拖动

查看详情

#60872024年8月24日作者 leo-budgetsimple3 个回答

1 个反应

提问组件 undo-manager 缺陷

在组件内部HTML被更改后，撤销功能无法正常使用

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？最新消息可复制演示链接 https://jsfiddle.net/condsjm1/ 描述一下那个虫子如何复现这个漏洞？更改组件的内部HTML按CTRL+Z键预期的行为是什么？撤销内容目前的行为是什么？但内容不会被撤销描述：在小提琴上，按下“切换到Hello Planet”的按钮，然后选择编辑器，按CTRL+Z 撤销和重做都不行，但如果你正常改“Hello World”文本，它就能正常工作。我觉得我改错了内容？如果是这样，修改组件内容并模拟原生行为的最佳方法是什么？行为准则 [X] 我同意遵守本项目的行为准则

artf

UndoManager跟踪的是组件状态的变化，而不是它的DOM。这应该适用于你的情况，'element.components（'Hello Planet'）'

leo-budgetsimple

@artf 谢谢！

GJS Helper

你遇到的问题是直接操作组件的 innerHTML 属性，绕过了 GrapesJS内部的变更追踪机制。 GrapesJS的撤销/重做管理器（ Editor 实例的一部分）只记录通过自身API或用户在编辑器内操作发生的更改。当你直接设置 component.view.el.innerHTML时， GrapesJS 不知道这个修改，因此不会被添加到撤销堆栈中。根本原因 GrapesJS 撤销/重做系统依赖于通过 GrapesJS API观察组件模型的变更。当你直接访问并修改DO...

查看详情

#60862024年8月23日作者 jdkcoder3 个回答

1 个反应

缺陷组件提问增强画布

无法读取未定义属性（读取“lastComponent”）和可调整大小的功能无法使用

GrapesJS版本[X] 我确认使用最新版本GrapesJS你用的是什么浏览器？ Edge v128可复现演示链接https://codesandbox.io/p/devbox/github/jdkcoder/cv-builderhttps://stackblitz.com/github/jdkcoder/cv-builder 描述一下那个虫子我在Nuxt.js 3项目中使用GrapesJS，每次在 /components/common/LeftSidebar.vue 运行 clearAll（）函数后，错误Cannot read properties of undefined (reading 'lastComponent'...

artf

你可以跳过移除组件（'instance.value.Components.clear（）'），因为你本来就会破坏编辑器 “''js if （确认（'你确定要清理画布吗？'）{ localStorage.clear（） reRender（） } ``` 这不应该产生任何错误

WilliamDASILVA

@jdkcoder 通过注释 reRender 函数，问题就解决了。 lastComponent 错误源于编辑器中的 this.get('selected') 在某个时刻未定义。通过检查调试器，当调用reRender时，确实会变成未定义，因为它重新初始化了 grapes。关于调整大小，我没看到你给的Stackblitz例子有什么问题。你可能应该单独开一个期刊，详细说明你遇到的行为和预期。

GJS Helper

看起来你在GrapesJS Nuxt.js 3项目中遇到了两个截然不同的问题。让我们来拆解并提供解决方案。第1期：Cannot read properties of undefined (reading 'lastComponent')之后clearAll() 根本原因当GrapesJS的内部状态，特别是与画布或活动组件相关的状态在所有组件被移除后变得不一致时，通常会出现这种错误。当你调用instance.value.DomComponents.clear()时，画布上...

查看详情

#60812024年8月23日作者 MdShadabAhamad3 个回答

0 个反应

组件缺陷提问 typescript

自定义组件在初次渲染时无法在 grapsjs/studio 中显示

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？镀铬可复制演示链接 https://stackblitz.com/edit/vitejs-vite-4noagg?file=src%2FApp.tsx描述一下那个虫子我第一次在 React 应用渲染时无法看到我的自定义组件，当我尝试在块块部分搜索它时，它就出现了，搜索后可以在块块块中看到它。行为准则[X] 我同意遵守本项目的行为准则

artf

当你想在 GrapesJS API 层面扩展某些东西时，可以使用这些插件 “''js <StudioEditor ref={editorRef} 选项={{ 插件：[ editor => addCustomComponent（editor） ], // ... ```

MdShadabAhamad

我还添加了自定义样式设置StyleManager，但显示是空白的，https://stackblitz.com/edit/vitejs-vite-4noagg?file=src%2FApp.tsx

GJS Helper

你遇到的问题是，你的自定义组件块在第一次渲染时看不到，但搜索后会出现，这是GrapesJS如何初始化其UI组件，特别是块管理器，以及自定义块何时被注册时有关的常见时间问题。根本原因在你提供的StackBlitz示例中，你是在editorInstance.on('load', ...)回调中注册自定义组件（my-component）及其对应的块（my-block）： GrapesJS 中的load事件是在编辑器完成初始设置并渲染完核心界面元素（包括块管理器）之后触发的。块...

查看详情

#60642024年8月18日作者 mannyyang4 个回答

0 个反应

提问缺陷画布

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

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ V126 可复制演示链接 https://jsfiddle.net/r5062suy/1/ 描述一下那个虫子如何复现这个漏洞？运行演示链接（https://jsfiddle.net/r5062suy/1/）看我尝试将div中的文本从“Hello world！！”改为通过 editor.getWrapper().find('.test-text')[0].set('content', '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 预览

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

danstarns

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

artf

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

GJS Helper

要默认在预览模式下加载GrapesJS，你需要先初始化编辑器，然后执行内置的core:preview命令。该命令在编辑和预览之间切换编辑器状态，实际上隐藏了编辑器界面，只显示渲染内容。在加载时实现这一点最可靠的方法是监听load事件，当GrapesJS编辑器完全初始化并准备交互时，事件会触发。解决方案像平常一样初始化GrapesJS。在编辑器实例中监听load事件。在load事件处理程序中执行core:preview命令。以下是实现的方法，比如适应你提供的Sta...

查看详情

#60512024年8月9日作者 SAJAD-CH2 个回答

0 个反应

缺陷提问 style-manager typescript

插件问题

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

artf

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

GJS Helper

你似乎遇到了一个常见问题，比如在将GrapesJS插件集成到现代JavaScript框架（如Angular）中，CSS文件在直接链接nodemodules中不会作为独立文件出现。这是预期中的行为，不是bug。根本原因解释现代GrapesJS插件，尤其是通过NPM分发的，设计上是为模块捆绑器（比如Webpack，Angular CLI在底层使用）而设计。这些插件的CSS通常包含在插件的JavaScript发行版中，或者作为单独的CSS文件，旨在导入应用构建过程，而不是直接...

查看详情

GrapesJS 问题

浏览所有主题