GrapesJS 问题

artf

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

GJS Helper

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

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”，但很多情况下效果不好。 无论如何，我预计“自定义代码”组件应该有一定的“容器化”，这样移除后文档里不会留下任何东西。

mohamedsalem401

这事结束了。

mohamedsalem401

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

GJS Helper

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

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

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

GJS Helper

GrapesJS发布流程的问题——特别是对开发者机器的依赖以及缺乏文档——凸显了对标准化、自动化和透明工作流程的需求。采用行业标准的CI/CD（持续集成/持续交付）流水线将解决这些问题，确保所有贡献者的一致性、可靠性和易用性。 根本原因分析 核心问题源于缺乏正式化、自动化且文档化的发布流程。依赖单个开发者机器来构建和发布工件会带来若干风险： 不一致： 不同的开发环境可能导致构建输出的差异。 可重复性问题： 很难保证构建能被完全复制。 安全风险： 直接从本地机器发布可能会暴露...

danstarns

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

GJS Helper

移除客户端提交钩子并将其责任转交给CI执行者的请求，是提升开发工作流程一致性和可靠性的合理策略。虽然这是一种通用的软件开发实践，并非专属于GrapesJS功能，但这是维护任何稳健项目（包括使用GrapesJS构建的项目）的关键方面。这种方法集中质量检查，确保所有贡献均得到统一验证，无论开发者配置如何。 第一部分：移除现有提交钩子 提交钩子通常通过两种方式配置：在.git/hooks目录内手动配置，或通过专门的工具如 Husky 用于 JavaScript 项目。 1.手动提...

GJS Helper

标准化linting和格式化对于维护代码质量和GrapesJS代码库内的连贯开发环境至关重要。这一举措将显著提升开发者体验并减少潜在错误。以下是实现这一目标的全面方法： 1.升级到最新的打印和格式化工具 推荐工具： ESLint： 用于 linting JavaScript/TypeScript 代码。 更漂亮： 为了保持一致的代码格式。 安装/升级步骤： 首先，确保你安装了Node.js和npm/yarn。然后，更新你的 package.json 依赖。 2.确保模板和格...