#34192021年4月27日作者 emyasnikov2 个回答
你想给GrapesJS添加什么？ 正如[BUG： Panels“可见”属性不阻止面板渲染]（https://github.com/artf/grapesjs/issues/3418）中所述，我尝试在初始时阻止面板渲染。因为可见属性对我不起作用，我尝试了一些变通方法，直到调用渲染后发现所有更改都消失了。所以最好的方法是接入事件，但我什么都没找到。 我觉得渲染后触发事件会是个不错的补充，如果是的话，我很想帮忙。 最新版本有替代方案吗？[x] 是的（描述替代方案）[ ] 不 我是在自己输入 editor.render（）后调用 'editor.trigger（'render'）' 实现的，然后用 'editor.on（'render'，...
artf
谢谢@emyasnikov我会关闭这个帖子，并保持漏洞问题开放
ClaudeCode
谢谢你举报，@emyasnikov。 FEAT：在editor.render执行后要挂钩的事件的问题似乎是一个竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）...
#34182021年4月27日作者 emyasnikov2 个回答
版本： v0.17.3 你能重现演示中的bug吗？[ ] 是的[x] 不 预期的行为是什么？ “编辑。Panels.addPanel（{id： 'test'， visible： false}）' 即使'visible'属性设置为false，仍能渲染面板。 编辑器渲染后它完全正常，所以“panel.set（'visibility'， ！panel.get（'visibility'）' 正确切换可见性。 尝试将“gjs-hidden”类和“visible： false”一起设置的变通方法1也没用。这样之后会检查可见性，“gjs-hidden”类也会被移除。至少我看到的行为是这样的。 之前已经出现过同样的问题：[#1602]（https...
artf
是的，我觉得只要在PanelView.render里添加这个.toggleVisible（）就行了。 如果你想冲击个人纪录，我很乐意合并:)
ClaudeCode
谢谢你举报，@emyasnikov。 面板“可见”属性不阻止面板渲染的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本...
#34172021年4月27日作者 NagarRahul2 个回答
能否详细说明地图组件在拖曳后是如何渲染的？ 我们如何为天气创建一个新的组件，并且它如何像地图组件一样渲染？ @artf
theSC0RP
如果你还没看过，可以看看以下内容，了解地图组件的工作原理：[地图分量模型]（https://github.com/artf/grapesjs/blob/dev/src/domcomponents/model/ComponentMap.js）[地图组件视图]（https://github.com/artf/grapesjs/blob/dev/src/domcomponents/view/ComponentMapView.js）
ClaudeCode
谢谢你举报，@NagarRahul。 关于FEAT：地图组件是如何工作的，这个问题很棒。我们如何创建天气组件并渲染它？。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'so...
#34162021年4月27日作者 ghost2 个回答
你好！ 我知道这是这里报告的 bug，#2029，但现在我无法从'0.15.10'更新到包含解决方案的版本。 你知道我现在设置组件时有什么解决办法吗？ 我用的是 VueJS 搭配 GrapesJS。 以下是我尝试设置组件的方法。 'this.grapeEditor.setComponents（myHtml）;' 但“setAttribute”会跳出“不是有效的属性名称”，而且内容不会显示。 提前感谢大家。
artf
抱歉，我帮不上这么老的版本。为什么你不能更新？？
ClaudeCode
谢谢你举报，@ghost。 0.15.10 - setAttribute - 不是有效属性名称的问题，似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）—...
#34152021年4月26日作者 mmotov4 个回答
你好！ 我正在为资产管理器构建一个自定义模态，基本上，我似乎需要覆盖“open-assets”“”命令。 我如何理解用户是否想设置图片src或背景图片属性？ 提前感谢大家！
advancedsoftwarecanada
赞同，我刚开始用GrapeJS，并让它在我的系统上运行起来，想在头部div上设置背景图片，而不用写CSS代码 ：/
artf
实际上，关于资产选择的知识不应该包含在指挥系统本身，因为行动应由谁来执行命令来决定，例如： “''js editor.runCommand（'open-assets'， { onSelect（asset） { const cmp = editor.getSelected（）; cmp && cmp.addStyle（{ 'background-image'： 'url（“${asset.get（'src'）}”）' }） } }); ``` 我建议你检查一下当前的[命令]（...
advancedsoftwarecanada
这并不是我们问题的正确解决方案。 我想做的是把这个功能添加到一个组件里，我们该怎么做？ ![图片]（https://user-images.githubusercontent.com/1661561/117693092-a57dfd00-b18b-11eb-8537-e4188d99eb40.png）
#34132021年4月26日作者 theSC0RP4 个回答
在这种情况下，我建议你访问iframe的文档，手动添加内联脚本（要获取文档，请使用'editor.“。Canvas.getDocument（）'） Originally由@artf在 https://github.com/artf/grapesjs/issues/2012#issuecomment-496304498发布 嘿，@artf，我正在看#2012号，有些疑问。 如果脚本发生了更改，比如点击时的提醒消息。然后会加入多个事件。如何移除旧事件并添加新事件（无需保存和重新加载）。 一种方法是刷新iframe，但这会导致所有事件丢失（甚至是预定义的）。 你建议怎么做？
theSC0RP
我尝试按照以下步骤更新内联脚本：获取iframe文档：“iframeDoc = 编辑器。”Canvas.getDocument（）'获取文档正文的内HTML格式：“iframeDocBodyHtml = iframeDoc.body.innerHTML”替换正文的内HTML：'iframeDoc.body.innerHTML = iframeDocBodyHtml'重新附加内联脚本 这样做会导致内置的 Grapesjs 事件丢失，比如悬停或组件选择（这很明显，因为所有事件都...
theSC0RP
我尝试通过写“editor.trigger（'core：component-select'）”来添加select和悬停事件，但也没用，而且执行“editor.runCommand（'core：component-select'）”会出错。 我是不是漏掉了什么？
artf
嗯，我觉得添加一个简单的强制重渲染iframe的方法（虽然不常见，但在某些情况下肯定有用）应该不错。不幸的是，目前你应该尝试使用私密方法，检查一切是否如预期，确认后我很乐意为类似“frame.trigger（'rerender'）”添加监听器。 现在我建议你试试类似的做法 “''js 看看画面的实际视角 const frameView = 编辑器。Canvas.getFrame（）.view; 一旦移除frameView，我们就必须重新渲染该帧 包装视图（包含工具栏和框架本...
#34102021年4月22日作者 sizhousama3 个回答
当我进入编辑器并使用 setComponents 或 addComponents 在商店中添加组件时，第一个元素的第一个类会莫名其妙地被添加到某个元素的类中。有人知道原因吗？我需要帮助！！！ ![图片]（https://user-images.githubusercontent.com/40018231/115696252-14d6ad00-a395-11eb-9bdd-c9a6ffd75627.png） ![图片]（https://user-images.githubusercontent.com/40018231/115696564-667f3780-a395-11eb-9869-23d3802cb64b.png）
artf
那个课程是从你的应用里来的，所以可能有成千上万的原因，我们光看两张截图是帮不了你的。如果你认为有bug，按照模板正确打开问题，并创建一个可复现的演示。
ClaudeCode
谢谢你举报，@sizhousama。 关于编辑奇怪行为！的好问题。推荐的组件方法是使用事件驱动的API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something changed'））; 组件生命周期...
#34092021年4月21日作者 ltenti-eventboost4 个回答
我想创建一个带有属性的自定义组件，该属性会被特定代码更新，但我不希望这个属性作为特性可见且可更新;假设我的属性叫“ebTesto”，我写了一个插件函数： 我本以为会在存储的 JSON 的“gjs-components”部分找到新属性，但结果是这样的： 也许我尝试的方式错了？ 有人有过类似的需求吗？ 谢谢你的帮助！
Ju99ernaut
我觉得它没有被存储，因为属性没有从默认状态更改。编辑器应能从组件定义中恢复该属性。
#34082021年4月21日作者 marcepoblet2 个回答
目前我们有这个GrapesJs风格： ![图片]（https://user-images.githubusercontent.com/64096863/115547850-24fb6900-a27d-11eb-843f-2bb59fb5cbbc.png） 不过，我们想要的是GrapesJs的风格： ![图片]（https://user-images.githubusercontent.com/64096863/115547885-2f1d6780-a27d-11eb-84a5-f7f97e98eecc.png） 我的问题是： 1——我们怎么改变设备中的格式？我们希望用按钮而不是下拉菜单。 2- 是否可以将“查看代码”和“全屏”按钮...
Ju99ernaut
你只需要设置设备，或者在按钮点击事件中执行相应命令，比如， “''js btn.addEventListener（'click'， function（） { editor.setDevice（'桌面'）; }); ```
ClaudeCode
谢谢你举报，@marcepoblet。 关于[问题]如何更改设备样式、查看代码和全屏的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'so...
#34072021年4月21日作者 rattrayalex3 个回答
你想给GrapesJS添加什么？ 增加对CSS Grid（“display： grid;”）及其各种选项的支持。 我个人没有立即需要，但我觉得应该被记录。
Ju99ernaut
这个插件有一个CSS网格布局工具 https://github.com/Ju99ernaut/grapesjs-plugin-toolbox https://user-images.githubusercontent.com/48953676/115495409-d98a9000-a267-11eb-923a-b6f86cbefc99.mp4
ClaudeCode
谢谢你举报，@rattrayalex。 关于FEAT： CSS Grid的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行...