GrapesJS 问题

已收录 3,464 个 GitHub 问题 370 个已解决 · 90 个待解决 搜索、筛选并探索经过实战检验的答案。

找到 336 个问题

🔍 style-manager
#51052023年5月11日作者 Baghunts2 个回答
1 个反应

用(prop,value)来添加style o component,是不正确的工作。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome@latest 可复制演示链接 https://no-link.com 描述一下那个虫子 ![图片](https://github.com/GrapesJS/grapesjs/assets/133208978/3a5ce51a-fedf-4fd7-9063-a5af519690b9) ![图片](https://github.com/GrapesJS/grapesjs/assets/133208978/0b990b40-94b1-48c1-94dc-c4d81adf0368)行为准则 [X] 我同意遵守本项目的行为准则

artf

谢谢@Baghunts,发现得很好。目前的解决方法是 '.addStyle({ 'border-left': '...' })`

ClaudeCode

谢谢你举报,@Baghunts。 通过(prop, value)添加style o component的问题,工作不正确。似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(Co...

#50902023年5月3日作者 FaisalShaikhHA2 个回答
1 个反应

组件脚本函数在保存页面后运行两次

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 112.0.5615.137(官方配置)(arm64) 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 组件定义: 丢弃、保存和重新加载时,有两个地方调用的是同一个脚本。一个在保存的 HTML/JSON 里,另一个是 Grapesjs 自己添加的。 如何复现这个漏洞?添加带有脚本函数的自定义组件类型。放下它并保存页面。重新加载页面时,脚本函数运行两次。 预期的行为是什么? 脚本函数应该只运行一次。 目前的行为是什么? 脚本函数运行两次。行为准则 [X] 我同意遵守本项目的行为准则

artf

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

ClaudeCode

谢谢你举报,@FaisalShaikhHA。 关于组件脚本函数在保存页面后运行两次,这个问题非常好。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something ch...

#50892023年5月2日作者 davidrhoderick3 个回答
0 个反应

在SCSS中导入codemirror库时出现错误

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 112.0.1 可复制演示链接 https://github.com/davidrhoderick/grapesjs-test 描述一下那个虫子 如何复现这个漏洞?跟随入门(你可以用Typescript和SCSS看到我用一个基础的Parcel项目来理解的结构)当你进入“主题”步骤时,尝试导入Grapes SCSS时会报错。 预期的行为是什么? 只要我按照“入门教程”操作,一切都能正常工作。 目前的行为是什么? 当我进入应该允许我用SCSS自定义应用外观的步骤时,出现了以下错误: “壳” @parcel/transformer-sass...

davidrhoderick

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

artf

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

ClaudeCode

谢谢你举报,@davidrhoderick。 关于在SCSS中导入codemirror库出错的好建议!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“cha...

#50862023年5月2日作者 SagarMaria3 个回答
0 个反应

Style:property:update 和 Property onChange 都被过度触发

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 112.0.5615.137(官方版本) 可复制演示链接 https://jsfiddle.net/SagarMaria/sunygp2f/3/ 描述一下那个虫子 如何复现这个漏洞?在 jsfiddle 中只需点击“Hello World”组件。观察大量控制台日志。点击画布上其他地方,重复。 预期的行为是什么? “style:property:update” 只应该在所选组件的某些样式属性更改时触发 目前的行为是什么? “style:property:update” 事件反而会多次触发,即使只是选择了某个组件 如果需要执行某些代码...

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...

ClaudeCode

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

#50832023年4月29日作者 DanavsSite4 个回答
0 个反应

方块不能拖到画布上

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 陶瑞 可复制演示链接 描述一下那个虫子 如何复现这个漏洞?... 预期的行为是什么? ... 目前的行为是什么?** ... 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js “使用客户端” import { useEffect, useRef, useState } from “react” import { usePathname, useSearchParams } from “next/navigation” 从 “@/atoms/projects” 导入 { Project, ProjectsAtom } import {...

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拖放功能

#50592023年4月19日作者 abubaker4172 个回答
0 个反应

第二次使用模板Grapes编辑器时不接受编辑器第一次创建的随机ID的CSS

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 111.0.5563.147(官方构建)(64位) 可复制演示链接 我在jsfilddle上无法实现Reproducible。我在下面提供了详细说明。 描述一下那个虫子 如何复现这个漏洞?这是我在Grapes上传的模板,头部有样式标签的内联CSS,正体标签也有内联样式 https://jsfiddle.net/spiral417/udye5ov1/首次Grapesjs从正体标签获取内联CSS,插入随机ID,并在这些ID中输入CSS。所以我保存了所有CSS样式,但当我第二次使用这个模板和Grapes提供的setStyle时,Grapes不接受第一...

artf

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

ClaudeCode

感谢你报告,@abubaker417。 关于第二次使用模板葡萄编辑器不接受编辑器第一次用随机ID创建的CSS的问题非常好。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => c...

#50522023年4月16日作者 innothetechgeek2 个回答
0 个反应

通过Vue入口加载的样式无法工作

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 无 描述一下那个虫子 我正在把grape.js插件集成到vue.js。我有一个预构建页面,里面有预构建的HTML和CSS。 当我把页面vue.js组件加载到编辑器时,所有vue.js样式都会丢失。但如果我移除 grapeJs 初始化方法,我的样式就正常工作了。 请帮帮我。我想把通过vue.js入口加载的样式加载到编辑器里 行为准则 [X] 我同意遵守本项目的行为准则

artf

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

ClaudeCode

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

#50492023年4月13日作者 ronaldohoch4 个回答
2 个反应

拖拽由图片和链接组成的组件时出现的问题

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 勇敢的最后版本 可复制演示链接 https://jsfiddle.net/rp7oc96v/1/ 描述一下那个虫子 嗨,亚瑟! 我正在创建一个新组件,一个链接中的图片,就像“mj-image”组件一样,但我卡在一个配置里,或者说是个bug...... 如何复现这个漏洞?放置“Link na Imagem”块当你尝试从图片拖动新组件时,Grapesjs 选择的是图片而不是组件根标签<a>()如果需要拖动整个组件,我需要使用工具栏中的图标。 预期的行为是什么?子组件没有父元素就不会。 目前的行为是什么?如果子节点 img 元素没有属性 'data-gjs...

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...

#50402023年4月10日作者 abubaker4171 个回答
0 个反应

添加可样式事件,使样式可以被覆盖,打开

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 111.0.5563.147(官方构建)(64位) 可复制演示链接 我提供了代码 描述一下那个虫子 增加了可样式事件,使样式可以覆盖 https://github.com/GrapesJS/grapesjs/issues/1041 https://github.com/GrapesJS/grapesjs/pull/1056 @tommedema,@artf你能帮我查一下吗? 我用这个逻辑来覆盖一个风格 使用这个功能时,样式第一次被覆盖,第二次从style-manager中移除样式后再添加时,样式无法使用,也没有样式。 刷新后又重新激活,只能添加...

ClaudeCode

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

#50202023年3月31日作者 at-codes2 个回答
1 个反应

在视图面板按钮更改标题属性无法持久

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 铬可复制演示链接 https://jsfiddle.net/em9kt2Lb/描述一下那个虫子 如何复现这个漏洞? 在编辑器加载时实现下面的代码 预期的行为是什么? 按钮标题会变,也会保持变化 目前的行为是什么? 按钮标题会变,但点击一个后又会恢复原状。 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 更改视图按钮的标题 设 viewbuttons = $('.gjs-pn-views > .gjs-pn-buttons').find('span'); viewbuttons.each(function( index, elem ) {...

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...

ClaudeCode

感谢你举报,@at-codes。 关于更改视图面板按钮标题属性无法持久的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something...

浏览所有主题