#34122021年4月25日作者 maxtsh2 个回答
大家好。我正在使用一个用React.js编写的生产应用的超棒项目，所以我把它集成到了我的应用里。一切运行正常，但我遇到了每次编辑器更改时自动保存编辑器数据的问题。 操作系统：Windows 10 浏览器：Chrome 90 GrapesJS 版本：0.17.03，最新时间：2021年4月26日 编辑器实例： “''js const GE = Grapes.init（{ 容器：“#editor”， fromElement： false， 插件：[GsPresetEmail]， pluginOpts： { GsPresetEmail： {}， }, colorPicker： { appendTo： 'parent'， offset：...
artf
感谢@maxtsh的反馈，实际上基础插件里那些旧块存在问题，导致存储计数器失效。我会尽快推销。 目前，作为热修复，先用这种方式更新这些区块。 “''js 编辑。Blocks.get（'text'）.set（{ 激活：真， 选择：真， 内容：{ 类型：“文本”， 内容：“请在此插入您的文本”， 风格：{ 填充：'10px' }， } }); 编辑。Blocks.get（'image'）.set（{ 激活：真， 选择：真， 内容：{ 类型：“图像” } }); ```
ClaudeCode
谢谢你举报，@maxtsh。 自动保存部分工作，插入文本后停止工作似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报...
#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
我觉得它没有被存储，因为属性没有从默认状态更改。编辑器应能从组件定义中恢复该属性。
#34062021年4月20日作者 vatte212 个回答
大家好，我想把 Canvas 上的数据保存到 Redux 存储，这样可以，但重新加载页面后，存储加载方法没有把我的数据设置为构建器（Canvas），我不知道问题出在哪里，如果有人有解决办法请告诉我。 代码示例： “''js Grapejs.init（{ .../// storageManager： { 类型：“redux-storage”， 自动保存：错误， 自动装填：1， }, .../// }); const reduxStorage = {}; const storageManager = editor.StorageManager; storageManager.add（'redux-storage'， { load（ke...
artf
去掉这个“const resultKey = key.slice（4）;”。你用前缀存储数据，但加载时没有
ClaudeCode
谢谢你举报，@vatte21。 关于如何创建自定义存储管理器，它不会在重新加载页面后设置Canvas保存数据，这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） =>...
#34042021年4月18日作者 Abhisheknanda13444634 个回答
你好@artf我想隐藏和显示特定组件的样式属性。 提到这个问题后，我就说 https://github.com/artf/grapesjs/issues/1428 我用这个方法写代码，但出现了错误 -： “''js 导出默认值（编辑器，配置）=> { const sm = 编辑。风格经理; const csm = config.customStyleManager; 形状分隔时的展示风格 editor.on（'component：selected'， function（component） { if（component.attributes.type == 'shape-divider'） { sm.addSector（'styl...
artf
你好@Abhisheknanda1344463你试过按照我这里的指示（https://github.com/artf/grapesjs/issues/1428#issuecomment-421640559）来做吗？你不需要在每个选择中添加或移除扇区，只需调整组件属性即可
Abhisheknanda1344463
@artf我试过，但如果我喜欢这个 https://github.com/artf/grapesjs/issues/1428#issuecomment-421640559 然后它会显示这些属性存在的样式扇区。 我想像上面提到的那样，只显示我自定义的某个特定组件的样式扇区。 不知道你是否理解我的使用场景。 请指点我。 谢谢
artf
这里有一个简短的使用示例： “''js const plugin = （editor） => { const { 组件、块、样式 } = 编辑器; [ { 类型：“简单”， 道具：{ 组件：“简单组件”， }, },{ 类型：“特殊”， 道具：{ 组件：“特殊组件”， 'styleable-require'： ['special-style']， // <- 该组件需要特殊样式 }, } ].forEach（（{ type， props }） => { Components...
#34022021年4月14日作者 joshk1322 个回答
版本： 0.14.62 你能重现演示中的bug吗？[ ] 是的[x] 不 不支持Vue.js或NPM 预期的行为是什么？ 在风格管理器右侧边栏显示的块 详细描述那个漏洞 我正在尝试让块管理器显示在右侧边栏，但无论我把块 div 放在哪里，它总是放在侧边栏外面，即使我把它放在样式管理器/容器正下方。 目前的行为是什么？ 它会显示在 #gjs div的上方或下方 你能附上截图、截屏或实时演示吗？**[x] 是（附上）[ ] 不 https://imgur.com/a/ca8Lzf8 代码来自App.vue Package.json
artf
“''js blockManager： { 附录：'#blocks'，// <- 删除此项 ```
ClaudeCode
谢谢你举报，@joshk132。 无法让方块显示在右侧边栏的问题似乎是竞速状态或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报告...
#34012021年4月12日作者 ahmedderkaoui3 个回答
当我们在编辑器中为元素做样式时，如果该元素既没有类也没有ID，样式管理器会生成一个带有CSS样式的新ID。然而，用类样式化元素时，样式管理器会用该类添加样式。 有没有办法总是用ID来做样式，而不用类？ （这有助于用户在具有相同类别属性的组件上创建不同的自定义样式）
Ju99ernaut
“''js window.editor = grapesjs.init（{ // ... 选择经理：{ componentFirst： 1， } // ... }); ```
ClaudeCode
谢谢你举报，@ahmedderkaoui。 关于样式管理器能否总是生成ID，而不是使用已定义的元素类？，这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => con...
#33992021年4月9日作者 AdamTorma4 个回答
首先，感谢@artf这个了不起的项目。 我有个问题： 在服务器端（Node.js环境）能否轻松地将组件的JSON转换为HTML？如果可能的话，能给我一些建议吗？ 客户端方面很简单： 我可以获取components-JSON （“JSON.stringify（editor.getComponents（）;'）”）并保存到我的数据库。之后我可以重复使用组件（'editor.setComponents（）;'），并让 HTML （'editor.getHtml（）;'） 在浏览器中显示。不过就我而言，我必须在服务器端完成。 任何帮助都将不胜感激！
bgrand-ch
你好， 对于未来的问题或技术问题（非漏洞），GitHub的[讨论]（https://github.com/artf/grapesjs/discussions）标签是最佳选择。 如果问题已解决，请关闭，或在[讨论]（https://github.com/artf/grapesjs/discussions）->[问答]（https://github.com/artf/grapesjs/discussions/categories/q-a）类别写一条详细的新消息（并关闭本期）。...
anlumo
是的，如果你有任何互动内容，那可能行不通。幸运的是，我的申请情况并非如此。
Ju99ernaut
也许你可以在服务器端安装Grapesjs（类似客户端），用来渲染，否则你得逆向工程渲染器。另一种选择是将生成的HTML也存储在数据库中。
#33972021年4月9日作者 YumiChen1 个回答
版本：0.16.45 你能重现演示中的这个bug吗？[x] 是的[ ] 不 预期的行为是什么？ 给定一个父网页组件实例渲染一些元素，在 shadowDOM 中，如果 'slot' 的父元素具有 'display： flex' 风格，排序器应是垂直的，因为结果中元素是水平对齐的。 目前的行为是什么？ 分拣器会是水平的。 你能附上截图、截屏或实时演示吗？[x] 是（附上）[ ] 不 https://jsfiddle.net/72dyhu6L/ <img width=“741” alt=“截圖 2021-04-09 下午6 38 06” src=“https://user-images.githubusercontent.com/276...
ClaudeCode
谢谢你举报，@YumiChen。 网页组件槽中排序器方向错误的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报...
#33922021年4月7日作者 rywilson283 个回答
我有一个要求，不能用选择器来判断某个元素是否可以丢弃。 例如： ![图片]（https://user-images.githubusercontent.com/45426659/113861790-96afbf00-9775-11eb-9369-2a18a71c0dd6.png） “子”组件必须位于“父”组件中，但如果子组件包含 ref 属性，只能将其拖入与当前父组件匹配的 ref 值的其他父容器中。 根据上述标记，子组件可以丢弃到最后一个容器，但不能丢弃参考为5678的容器。 不过，第二个子元素可以被丢弃到任一父组件中。 如果可丢弃函数允许以下函数，这将很容易实现： 可掉落：（src，目标）=> { 一些逻辑 返回真值; },...
rywilson28
相关公关：https://github.com/artf/grapesjs/pull/3393
rywilson28
@artf对这个功能或PR的做法有任何疑问吗？
ClaudeCode
谢谢你举报，@rywilson28。 关于FEAT：允许使用函数动态丢弃配置的好建议！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件...