#34292021年5月4日作者 justin37372 个回答
你好@artf 感谢你在这里所做的一切 但我试着用这个插件，但就是做不到 ![图片]（https://i.imgur.com/gaC65t1.png） 版本：0.17.3 你能重现演示中的这个bug吗？[x] 是的[ ] 不 详细描述那个漏洞** 没有显示插件 目前的行为是什么？ 什么都没发生。 你能附上截图、截图或实时演示吗？[x] 是的[ ] 不 https://jsfiddle.net/e4pbsgm0/
Ju99ernaut
遗憾的是，插件不会自动替换原始背景图像输入，所以你得手动替换。你需要想办法把这个添加到你的样式管理器配置里，并移除内置版本： “''js { ID：“背景-背景”， 财产：“背景”， 类型：“BG”， }, ``` 更多参考资料请点击这里 https://github.com/artf/grapesjs/blob/c136ea722383c0ece710ff3bbab1ce9b30f986ba/demo.html#L1154
ClaudeCode
谢谢你举报，@justin3737。 没有显示 grapesjs-style-bg 插件的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有...
#34252021年4月30日作者 anlumo2 个回答
CssComposer 的 [示例配置文件]（https://github.com/artf/grapesjs/blob/c3a49015df45eb49b0beb605e45ead1ea56a3af8/src/css_composer/config/config.js#L6） 引用了一个 'staticRules' 属性。这个属性名称在源代码的其他地方没有使用（通过[GitHub搜索]（https://github.com/artf/grapesjs/search?q=staticRules）验证），也没有任何作用。 版本： 0.17.3 你能重现演示中的bug吗？[ ] 是的[X] 不 （其实不太适用） 预期的行为是什么？ 把...
artf
谢谢@anlumo你说得对，那是个旧选项，我会去掉的。对于静态 CSS 规则，我们有 [这些选项]（https://github.com/artf/grapesjs/blob/210f87030d7d1e2aa2e5c427e4347b49ad258134/src/editor/config/config.js#L72-L77）
ClaudeCode
谢谢你举报，@anlumo。 staticRules for CssComposer Non-Functional 的问题似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（Cod...
#34242021年4月29日作者 Tal5001 个回答
我想添加希伯来语支持，并进行翻译。 此外，你还应支持“direction”属性，以便支持从右到左的语言显示： https://www.w3schools.com/cssref/prtextdirection.asp
ClaudeCode
谢谢你举报，@Tal500。 关于HE（希伯来语）语言支持的建议很棒！虽然这个具体功能还没有出现在核心 API 中，但有几种方法可以实现类似的行为。 使用事件系统： “JavaScript editor.on（'component：update'， （component） => { 你的逻辑 }); ``` 替代方法： 听取“selector：add”以获取CSS选择器更改 使用“selector：custom”来表示自定义规则 利用“change：*”事件进行细致跟踪 构...
#34212021年4月29日作者 ltenti-eventboost4 个回答
我用 componentFirst 设置为 true，让用户对他们选择的组件应用所需的样式。 选择一个应用特定组件类型 CSS 类的组件，并点击“同步”按钮，会使选择器从组件 ID 切换到相应的 CSS 类。 现在我找不到办法回去丢弃那个以组件类为选择器的 CSS 规则，因此该组件的每个新实例样式都一样。 谢谢你的帮助！
ltenti-eventboost
这很合理，现在我只需要想办法把这个功能添加到我的构建器里。谢谢你，@Ju99ernaut！
bgrand-ch
你好， 对于未来的问题或技术问题（非漏洞），GitHub的[讨论]（https://github.com/artf/grapesjs/discussions）标签是最佳选择。 如果问题已解决，请关闭，或在[讨论]（https://github.com/artf/grapesjs/discussions）->[问答]（https://github.com/artf/grapesjs/discussions/categories/q-a）类别写一条详细的新消息（并关闭本期）。...
artf
你好，@ltenti-eventboost，我不太确定我是否准确理解你的问题出在哪里。 当你启用“componentFirst”编辑时，编辑器会对组件特定的CSS规则进行样式更改（例如'#cmp-id { color： red }'）。 点击“同步”按钮后，所有样式都会被移到当前的类选择器，组件专用规则内的样式会被移除，'.selected-class { color： red } #cmp-id {}'。 所以，从你描述的来看，我觉得挺合理的，但也许我漏掉了什么。
#34202021年4月28日作者 sanchit362 个回答
我正在尝试在 Reactjs 应用中实现 localstorage，但不知为何它没有在 localstorage 中存储数据 “JavaScript useEffect（（） => { const templateComponent = JSON.parse（ localStorage.getItem（“gjs-components”） ); console.log（模板组件）; const templateStyle = JSON.parse（localStorage.getItem（“gjs-style”））; console.log（模板样式）; const editor = Grapesjs.init（{ 容器：“#edi...
artf
本地storageManager会帮你完成所有工作，所以你不需要做现在那些手动操作。所以保留storageManager选项，把剩下的都删掉。 附言：使用useEffect要小心，添加一个空数组作为依赖，否则它会在每次渲染时调用初始化......
ClaudeCode
谢谢你举报，@sanchit36。 关于[紧急!!的好问题 问题：如何在 reactjs 项目中实现 LocalStorage？？.推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （）...
#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）——这有助于团队更快识别根本原因 在报...
#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：*”事件进行...
#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...