GrapesJS 问题

artf

谢谢@Baghunts，发现得很好。目前的解决方法是 '.addStyle（{ 'border-left'： '...' }）`

GJS Helper

GrapesJS中组件中没有正确应用background-image样式的问题通常有两个常见原因之一：CSSurl()语法错误，或者组件缺乏足够的维度来显示背景。 根本原因分析 缺少url()封装： 在 CSS 中设置background-image时，图像路径必须包含在 url() 函数中。如果你只提供 URL 字符串而没有url()，浏览器会将其视为无效的 CSS 值，样式不会被应用。 错误： "https://example.com/image.jpg" 正确： "u...

artf

正如[这里]（https://grapesjs.com/docs/modules/Storage.html#project-data）解释的，编辑项目时不应重新导入输出HTML，只需导入JSON。

GJS Helper

你遇到的组件 script 函数在保存并重新加载页面后运行两次的问题，是 GrapesJS脚本管理系统中的已知行为（或者说是个 bug，视角度而定）。这源于 GrapesJS 如何处理和序列化组件脚本，用于编辑器画布和最终导出的 HTML。 根本原因解释 当你在GrapesJS组件模型中定义script属性为函数时，GrapesJS执行两个主要动作导致双重执行： 内联脚本嵌入： GrapesJS将脚本函数序列化成字符串，并直接嵌入组件HTML结构中的<script>标签中。...

davidrhoderick

有趣的是，基于CSS的样式确实有效。

artf

看起来 Parcel 变换器试图导入的是 'codemirror/lib/codemirror.js'，而不是 'codemirror/lib/codemirror.css'： “''CSS @import“codemirror/lib/codemirror”; ``` 所以我建议你在相关包裹上开启问题

GJS Helper

你遇到的问题，@parcel/transformer-sass: expected "{"导入GrapesJSSCSS时，是模块捆绑器如Parcel解析和流程样式表导入时常见的问题，尤其是在处理既有JavaScript又包含CSS组件的第三方库时。 根本原因 GrapesJS 利用 CodeMirror 实现其富文本编辑器和代码编辑器功能。虽然 GrapesJS的核心 SCSS（grapesjs/src/styles/scss/main.scss）对自身组件进行了样式化，但...

artf

该行为是正确的，因为“style：property：update”会在风格管理器[属性]（https://grapesjs.com/docs/api/property.html#property）的任何更新时触发（不仅仅是其值）。所以针对你的具体情况，你需要以这种方式更新回调 “''js Editor.ON（'style：property：update'， （{ property， to }） => { 检查房产名称，以及更新是否与价值相关 如果 （property.get...

SagarMaria

你好，@artf感谢你的快速回复，但实际上问题的一部分仍然是，即使你做了更改，比如点击“中心”对齐无线电选项和你建议的 if 语句，后续选择该组件时，'style：property：update' 值仍然会被 loging 出去，'property' 和 'to' 仍是现有值（即使你不改动，只选择组件）。下面有个简短的视频，我也根据你的建议更新了 jsfiddle。 有没有办法直接监听收音机值的变化，或者在样式管理器里点击不同的收音机选项？我也尝试使用属性的“onChang...

GJS Helper

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

DanavsSite

![2023-04-29 143431-Greenshot]（https://user-images.githubusercontent.com/109663198/235335067-0d202a20-e26e-4fce-8d4d-168504175239.png）

DanavsSite

我刚发现是因为 WebView2。Webview2 的支持??!

artf

我觉得这更多是因为Tauri配置的问题，而不是GrapesJS，因为我们用的是原生的HTML5拖放功能

artf

@Spiral1234如果你无法重现问题，很可能是你这边的问题，没有可复现的演示，很难判断问题所在

GJS Helper

你遇到的问题源于GrapesJS在导入HTML时如何处理和规范样式，尤其是内联样式。让我们拆解根本原因，提供正确的方法。 根本原因解释 GrapesJS导入HTML时，执行一个关键的样式规范化步骤： 内联样式提取：对于具有style属性的元素（内联CSS），GrapesJS“提取”这些样式从HTML中移除。它从元素中移除style属性。 唯一ID分配： 为了维护样式，GrapesJS为该特定元素分配唯一标识符（例如data-gjs-id="cXXX"或生成类名如gjs-co...

artf

@innothetechgeek遇到真正的bug问题，你应该做一个可复现的演示，因为通常会有一些与核心本身无关的问题。无论如何，根据你的描述，你可能想通过['canvas' options]（https://grapesjs.com/docs/modules/Components-js.html#template-related）定义你的样式条目。

GJS Helper

你遇到的问题是，Vue.js入口加载的样式在初始化时丢失GrapesJS这是常见行为，源于GrapesJS如何隔离其编辑器画布。 根本原因 GrapesJS默认会在一个<iframe>中渲染其编辑画布。iframe 创建了一个独立的浏览上下文，这意味着父文档中定义的样式（你的Vue.js应用运行的对象）不会自动应用到 iframe 内的内容。你的Vue.js样式是正确应用到主应用程序的，但GrapesJS画布作为 iframe 内的独立文档，不会继承这些样式。 解决方案：将...

gustavohleal

嗨！ 我测试过你的方案。它确实能正确更改图像，且将图像锁定在主组件内，你可以移动它。模型中的“src”属性会被更改，但当你移动组件时，它会回到占位符图像。如果你更改图片然后打开视图代码模态，你会发现“src”属性不像模型中那样发生变化。我认为这是因为Grapes在导出代码中没有为图片设置“id”。 检查打印件： 在组件丢弃时不设置图像： ![图片]（https://user-images.githubusercontent.com/22385451/232051993-20...

artf

@gustavohleal我的错误，你必须直接更新'src'属性，而不是属性'image.set（{ src： asset.getSrc（） }）;'

artf

使用 'data-gjs-locked=“true”属性忽略图片，正确更新你的自定义组件 “''js 移除runCommand（“open-assets”）; 因为在模型端运行它没什么意义 你可以通过方块激活组件（https://grapesjs.com/docs/api/block.html#properties） 通过使用“激活”属性 init（）{ editor.runCommand（“open-assets”）; } 在视图中处理资产更新 浏览量：{ 事件：{ db...

GJSBlock

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

artf

你好，面板按钮的 @at-code 标题直接连接到 [i18n locale strings]（https://github.com/GrapesJS/grapesjs/blob/976e791c5abd6f876a0f29b58de32ff1549f32c2/src/i18n/locale/en.js#L48），所以你需要在那里更新这些字符串。你可以在这里找到更多关于i18n模块的信息[https://grapesjs.com/docs/modules/I18n.html...

GJS Helper

你遇到的问题，即点击按钮标题后会恢复，源于直接操作 GrapesJS UI组件中的DOM元素。 GrapesJS，像许多现代Web框架一样，通过底层数据模型和视图管理UI（通常内部使用Backbone.js面板和按钮）。当你直接用jQuery更改 title 属性时，你绕过了模型视图架构。在交互（比如点击）时，相关视图可能会根据模型重新渲染或更新状态，实际上覆盖了你的直接DOM更改。 根本原因： 直接操作 GrapesJS 面板按钮（例如使用 $(elem).attr('t...