GrapesJS 问题

kanaihyakumar

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

kanaihyakumar

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

artf

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

artf

@MdShadabAhamad请避免在讨论中开启问题，谢谢

icoco

看起来没有工作室的源代码，你能在哪里找到工作室？

GJS Helper

是的，GrapesJS 提供了强大的功能，可以在网页中实现和嵌入自定义 JavaScript 代码，无论是动态内容在画布上还是最终导出输出。实现这一点的方法有多种，取决于脚本是组件特定、通用片段还是全局页面级脚本。 1.使用 script 组件类型（推荐用于组件特定逻辑） GrapesJS 有一个专门为嵌入 JavaScript 设计的 script 组件类型。这是添加直接关联组件动态行为的最有GrapesJS原生方式。 工作原理： 你可以定义一个插入script分量的块。...

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

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()时，画布上...

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事件是在编辑器完成初始设置并渲染完核心界面元素（包括块管理器）之后触发的。块...

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'）'

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

artf

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

GJS Helper

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

GJS Helper

保持项目依赖的更新对安全性、性能和兼容性至关重要。对于GrapesJS项目，通常使用Node.js和npm/yarn，这需要双管齐下的方法：最初手动更新，然后用Dependabot自动化后续更新。 1.手动更新现有依赖 在设置Dependabot之前，最好将所有当前依赖都恢复到最新的稳定版本。这个过程是任何Node.js项目的标准流程。 第一步：检查包裹是否过期 在终端中导航到项目的根目录，并运行： 该命令将列出你所有依赖及其当前、需要和最新版本。要密切关注主要版本差异，因...

GJS Helper

在GrapesJS代码库中升级和标准化TypeScript，是提升可维护性、早期发现错误和提升开发者体验的关键一步。本解决方案概述了实现这一目标的步骤，重点关注依赖升级、一致配置以及CI/CD集成。 1.升级到最新版本的TypeScript 首先，将typescript包和相关@types/定义更新到最新的稳定版本。建议使用像npm-check-updates（或yarn upgrade-interactive）这样的工具，方便识别过时的依赖。 安装typescript:...