GrapesJS 问题

Ju99ernaut

我做了一个简单的 indexedDB，但它也可以适配到其他存储类型 https://github.com/Ju99ernaut/grapesjs-indexeddb-ui 不过我打算弃用它，改用一个内置其他存储类型的新插件，并且界面和用户体验也更好。我计划在artf在#3206号提到的“PageManager”API发布后发布它，同时可能还有同期提到的其他插件正在开发中。

artf

是的，还在进行中（很遗憾我还没到），但PageManager肯定会放在核心里。

GJSBlock

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

artf

我猜你做错了什么，你是怎么创建这些组件及其属性的？你甚至不应该在检查员里看到这些属性。

marcepoblet

@artf 我们的准则中没有做任何更改。唯一的区别是我们更新了GrapesJs的版本。 之前我用的是v0.16.18版本，运行正常，但现在我们把GrapesJs更新到v0.16.41后，按钮功能就不行了。

marcepoblet

我们用以下方式设置属性： editor.getSelected（）.attributes.attributes[“data-gjs-editable”] = 'false' editor.getSelected（）.attributes.attributes[“data-gjs-copyable”] = 'false' editor.getSelected（）.attributes.attributes[“data-gjs-droppable”] = 'false' edi...

Ju99ernaut

我相信你可以把构建道具从属性列表中移出，仍然能实现你想要的功能，内置的Flex Box相关属性只有在组件带有“display： flex”时才会显示。还需要注意的是，“buildProps”只是输入的预设，不能嵌入到其他输入中，也就是属性列表 “''js { 名称：“布局”， 开启：真， buildProps： ['display'， 'direct'， 'align-content'， 'align-items'， 'align-items'， 'align-self'，...

server102

谢谢。我试过了，但网格属性不起作用。可能得手动实现，但不确定怎么最好地处理这个问题。

Ju99ernaut

网格属性没有“buildProps”，所以你得从头开始构建，遗憾的是文档里关于自定义属性的信息不多，你可能得从API参考里拼凑起来 https://grapesjs.com/docs/api/style_manager.html#stylemanager

artf

你好@eikerd通过查看代码，目前我看不到其他方法可以自定义块类DOM，除非你自己用DOM做点什么（块渲染完成后）。 我可能会在下一个版本中把视图添加到分类模型中，所以你可以这样做： “''js const blockCat = 编辑器。Blocks.getCategories（）.filter（c => c.get（'id'） == 'ID-CAT'）[0].view; blockCat.el.addClass（'add-class'）; ```

GJSBlock

谢谢你举报，@eikerd。 关于Blockmanager：添加自定义类gjs-block-category / gjs-title DIVs，这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on...

Ju99ernaut

我不确定每个组件是否都有这样的钩子，但你可以尝试利用组件的“toHtml”属性。这个问题已经在别处讨论过了，所以你可以在期刊中搜索，因为有不少。

artf

是的，你可以用自定义的“toHTML”/“toJSON”函数（模型中）来定义组件，以便自定义它们的输出

GJSBlock

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

artf

谢谢大家的反馈，我知道这个bug，开发版已经修复了。我完全忘了发布它😬，我会尽量今天发布

devtechk

@artf 非常感谢！你帮我省了很多功夫 _ 我整个下午都在调试这个问题......顺便说一句，我查了npm，发现0.16.44版本已经不行了...... 你救了人。非常感谢！捐款，你值得拥有一切！❤️

aadilmehrajbhat

自 "grapesjs": "0.16.34"年以来的回归问题

GayathriGuru

嗨！@marcepoblet你能分享一下你用来定义 changesCount 变量以实现递增的代码部分吗？

artf

我就结束这段，因为我看不出这个功能有什么实质性的好处

GJSBlock

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

artf

那是因为你用你的版本更新了原始命令（错误地）。确实，如果我把你的插件从演示中移除，一切都会正常运行。请检查原始的复制粘贴命令，你应该在粘贴前克隆组件，所以你的实现可能无法正常工作。

artf

只要检查原始命令 https://github.com/artf/grapesjs/blob/dev/src/commands/view/CopyComponent.js https://github.com/artf/grapesjs/blob/dev/src/commands/view/PasteComponent.js

bgrand-ch

@artf 谢谢你的回答。请提供链接、示例或更多解释？😅

artf

我今天应该能发布修复😬方案 https://github.com/artf/grapesjs/issues/3291

GJSBlock

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

artf

是的，@kuhelbeher，现在封装器是在插件后创建的，所以你可以像扩展其他组件一样完全扩展它

artf

LE：我找到了方法。我正在覆盖getWrapper（）中的可样式数组，但我不确定这是不是正确的方法。你能确认吗？ 是的，当然没问题，但如果需要，可以通过“mainConfig.domComponents.wrapper”选项在init时更改包装器属性 https://github.com/artf/grapesjs/blob/18b2f95b7f844578dc2b28d786b126013d155d9e/src/dom_components/config/config.j...

kuhelbeher

你可以通过“mainConfig.domComponents.wrapper”选项在init时更改包装器属性https://github.com/artf/grapesjs/blob/18b2f95b7f844578dc2b28d786b126013d155d9e/src/dom_components/config/config.js#L9 你好，我注意到这些选项是针对旧版本的 Grapesjs，但在新版本中 domComponents 配置中，封装属性被移除了。有没有办法...