GrapesJS 问题

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

找到 336 个问题

🔍 style-manager
#54642023年10月13日作者 MaulikAarrsol2 个回答
0 个反应

导入CSS中的多个页面无法访问

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 117.0.5938.152 可复制演示链接 不 描述一下那个虫子 如何复现这个漏洞?...Grapesjs 页面在导入 CSS 中多页面,而非访问...导入 CSS 不起作用 预期的行为是什么? ... 目前的行为是什么? ... 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 你的代码在这里 ```行为准则 [X] 我同意遵守本项目的行为准则

artf

请正确遵循错误问题模板如果你没有标明一个可复现的演示,并附带相对步骤来重现该漏洞,问题可能已经解决了。

ClaudeCode

谢谢你举报,@MaulikAarrsol。 关于导入CSS时无法访问的多页问题非常好。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('someth...

#54602023年10月12日作者 mapsmarketing4 个回答
1 个反应

从“pageManager”加载“组件”和“样式”

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v117.0.5938.149可复制演示链接 https://jsfiddle.net/9oLrsvya/描述一下那个虫子 如何复现这个漏洞?请参见 jsfiddle 中的“pageManager”对象 预期的行为是什么? 查看以下文档:https://grapesjs.com/docs/api/pages.html#pages 它应该能正确地从“pageManager”中加载“组件”和“样式”到编辑器中。 目前的行为是什么? 当你通过编辑器中的“查看代码”检查代码时,你会发现既没有完全相同的 HTML,也没有样式正确加载。“body”标签...

mapsmarketing

有个烦人的点是,编辑器会在下面默认样式前面加上,保存这些样式时会有许多重复的样式: 编辑: 查看文档后,我终于找到了“protectedCss”,设置为空时,样式的前置功能就停止了。

artf

你好@mapsmarketing目前 GrapesJS 无法正确导入 HTML 文档的字符串格式,所以解析器会跳过像 “html”、“head”、“body” 这样的元素,只返回“body”内部解析出来的内容,你现在可以做的一个变通方法是把组件作为对象传递 “''js 组件:{ 属性:{ ID: 'IGNT' }, components: '<div class=“my-el”>测试世界!</div>', }, ``` 关于样式,这是浏览器默认的CSSOM解析器问题,请参考...

mapsmarketing

你好@artf, 我找到了一种方法,可以通过以下方法正确保存“身体”属性和样式: 我注意到你的[Page.toJSON](https://github.com/GrapesJS/grapesjs/blob/e03dfc7483b7fd936f3580bee78fee6d03c2b055/src/pages/model/Page.ts#L134-L149)输出了指定页面的所有内容。不过,它似乎无法正确输出“样式”(我总是被设置为未定义),所以我通过编辑器检索了激活页面的样式,...

#54572023年10月11日作者 boardmain4 个回答
3 个反应

加载ProjectData 0.21.7时编辑器冻结

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 117.0 可复制演示链接 本地主持 描述一下那个虫子 Grapesjs“: ”^0.21.7“, editor.loadProjectData({ “资产”: [], “风格”: [], “pages”: [{ “组件”: “<div>TEST TEST TEST TEST</div>” }] }) 编辑冻结 行为准则 [X] 我同意遵守本项目的行为准则

antoinematyja

你好,我在使用 Vue 3 并用 Vue 'ref' 存储编辑器时也遇到了同样的问题。不过我不确定这是不是个好主意。 代码复制品大致如下: 解决办法:不要用“ref” 😅

artf

你能提供一个可复现的演示吗?试了你的例子,我没看到冻结......

boardmain

尝试使用最新版本21.7 我试着把它放到网上,但我只是用自定义命令粘贴了 HTML,粘贴了源代码,但之后编辑器卡住了(我需要关闭页面)。 例如: ~~~ btnImp.onclick = () => { editor.runCommand('core:canvas-clear') 编辑。css.clear() editor.setComponents(codeViewer.getContent().trim()) 编辑。Modal.close() } ~~~ 其中 code...

#54502023年10月10日作者 ChiragS-Prajapati2 个回答
0 个反应

该部分应与葡萄中存在重叠问题

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 117.0.5938.134(官方构建)(64位) 可复制演示链接 https://jsfiddle.net/ap404703/0e5zop1n/ 描述一下那个虫子 示例如下 葡萄 Js 文件 :- 初始化葡萄JS const editor = Grapesjs.init({ 画布:{ 风格:[ “https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css”, “https://unpkg.com/swiper@7/swiper-bundle.min.css” ] }, styleManager...

artf

@ChiragS-Prajapati 你必须使用 [可拖拽/丢弃组件属性](https://grapesjs.com/docs/api/component.html#properties)来控制组件可以拖拽的位置,以及哪些组件可以被丢入其中。

ClaudeCode

感谢你报告,@ChiragS-Prajapati。 关于“Section should with the overlaping with grapes js”的问题,似乎是竞争条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的Grape...

#54412023年10月3日作者 padcom2 个回答
0 个反应

没有ID,显示没有样式但带有“script”的元素,导致脚本无法运行这些元素

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome最新款可复制演示链接 https://github.com/padcom/grapesjs-no-id-for-element-example描述一下那个虫子 在创建自定义 GrapesJS 组件时,如果这些组件带有 'script()'(组件的运行时行为)且该组件没有样式,那么根元素没有 'id' 属性,这会导致 'document.querySelectorAll('#<id-goes-here')' 失败,运行时脚本不会被调用。 在给出的例子中,我创建了一个特殊的自定义元素,称为“<content-preview>'(https://g...

artf

问题源于'jsInHtml: false'的使用以及内部JS生成器的处理方式。 我会尽量在下一个版本里修复这个问题。

ClaudeCode

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

#54322023年9月29日作者 mahmudz1 个回答
0 个反应

TailwindCSS 响应式 md:w-2/3 类被转换为 md:w-2-3

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 117.0.5938.132 可复制演示链接 https://jsfiddle.net/bx8rtseh/2/ 描述一下那个虫子 如何复现这个漏洞?设置远程商店管理器加载一些带有tailwindCSS类的html 样本 '''html <div class=“P-12 MD:W-1/2 flex flex-col items-start”> 你好 </div> 目前的行为是什么? 意外更改了职业名称 '''html <div class=“P-12 MD:W-1-2 flex flex-col items-start”> 你好 </di...

ClaudeCode

谢谢你举报,@mahmudz。 关于TailwindCSS响应式md:w-2/3类被转换为md:w-2-3的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => cons...

#54252023年9月26日作者 javadsamiee2 个回答
2 个反应

添加相似页面时,仅会更改组件ID。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 117 可复制演示链接 https://jsfiddle.net/mirjavad/ctsx7zer/5/ 描述一下那个虫子 我想为一个页面创建一个克隆动作,并注意到了这个bug。 如何复现这个漏洞?创建多个具有相同组件ID和CSS的页面 页码: [{ 编号:“第1页”, 名称:“第1页”, 组件: '<div id=“comp1”>第1页</div>', 风格:“#comp1 { 颜色:红色 }', }, { 编号:“第2页”, 名称:“第2页”, 组件: '<div id=“comp1”>第2页</div>', 风格:'#comp1 { 颜色:绿...

artf

好的抓包@javadsamiee将在下一次版本中修正

ClaudeCode

谢谢你举报,@javadsamiee。 关于添加类似页面时,组件ID会被更改,这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('som...

#54242023年9月26日作者 bgrand-ch2 个回答
1 个反应

'component:styleUpdate' 事件未被触发

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 116.0.5845.187可复制演示链接 https://jsfiddle.net/yLcvbwjd/描述一下那个虫子 如何复现这个漏洞?添加“component:styleUpdate”事件用“addStyle”或“setStyle”更新组件的样式 预期的行为是什么? 'component:styleUpdate' 被触发 目前的行为是什么? 'component:styleUpdate' not 已触发行为准则[X] 我同意遵守本项目的行为准则

bgrand-ch

@artf ❤️

ClaudeCode

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

#54082023年9月21日作者 quentin-bettoum3 个回答
0 个反应

Main.scss 在 0.21.6 中缺失

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 118 可复制演示链接 没有 描述一下那个虫子 你好, 我按照这里文档的指示为GrapesJS做了主题:https://grapesjs.com/docs/getting-started.html#theming 但在 0.21.6 版本中,已经无法在 SCSS 中“@import”grapesjs/src/styles/scss/main.scss“;因为该文件在 'node_modules/grapejs/' 文件夹中缺失行为准则 [X] 我同意遵守本项目的行为准则

joukhar

是的,'src'文件夹缺失了

artf

和 https://github.com/GrapesJS/grapesjs/issues/5392 一样的问题

ClaudeCode

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

#53812023年9月12日作者 sammrafi1 个回答
0 个反应

重复CSS

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 116.0.5845.187(官方构建)(64位) 可复制演示链接 https://jsfiddle.net/bw4Lxp6c/ 描述一下那个虫子 如何复现这个漏洞? 当我添加一列时,它会生成重复的 CSS 格式(最大宽度:768px) @media 预期的行为是什么? CSS 代码应该生成一次。 目前的行为是什么? @media中复制CSS代码(最大宽度:768px) 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js <div temporary=“”> <div> </div> </div> <div class=“row”> <...

ClaudeCode

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

浏览所有主题