GrapesJS 问题

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

找到 3,464 个问题

#43502022年5月26日作者 ronaldohoch3 个回答
1 个反应

样式管理器在选择组件时不会更新背景

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 勇敢浏览器 v1.39.111 可复制演示链接 https://jsfiddle.net/e7oau8v6/ 描述一下那个虫子 如何复现这个漏洞?画布上的一根柱子。 ![图片](https://user-images.githubusercontent.com/2287371/170560918-15d2df09-58d4-41ee-b3f8-3313950b1669.png)选择文本组件进入风格标签页,查找装饰背景设置背景图像。 ![图片](https://user-images.githubusercontent.com/2287371/1705...

artf

你好@ronaldohoch问题出在你的自定义类型背景上,你添加它的方式不正确([正确使用API](https://grapesjs.com/docs/modules/Style-manager.html#adding-new-types))。 'addType' 主要用于添加新的 UI 输入,如果你不需要新的 UI(比如你这种情况),你可以依赖 ['addBuiltIn'](https://grapesjs.com/docs/api/style_manager.html#...

tuongnguyendev

你好@artf,我遇到的问题和@ronaldohoch用最新版本的GrapesJS时很相似 背景图片预览显示错误链接 详情见下方图片: ![截图 2022-06-01 15 49 03](https://user-images.githubusercontent.com/16423468/171366767-be2677e7-d1b7-4fc7-ac45-7c54737dd41a.png)

ClaudeCode

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

#43412022年5月20日作者 senthil177cse4 个回答
0 个反应

在为 HTML 组件添加边界样式时,css json 只抓取边界选择器,却不抓取 border-width、border-style、border-colorBUG 的选择器:

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v101.0.4951.54 可复制演示链接 https://jsfiddle.net/7sn5h91r/7/ 描述一下那个虫子 我的问题是样式、边界、属性、宽度、样式和颜色在 JSON 里都无法更新,即使我在 https://grapesjs.com/demo.html 里检查过。请查看附上的截图。以下是我的代码JSON回复。告诉我如何移除那些空属性,比如border-width、border-style、border-color。 我的回复 JSON:{ “选择器”:“is98i”, “风格”:{ “宽度”:“100%”, “__p...

aharishsundhar

@artf解决这个问题,我在最新版本的侧边也遇到了同样的问题 v0.18.4 填充:0 0 0 0,填充顶部:“,填充底部:”“,填充右:”“,填充左:”,

senthil177cse

嗨@aharishsundhar...... 据我所知,不用填充物是:0 0 0 0;你只能加垫层顶部、垫层底部、垫层左侧、垫层右侧......

aharishsundhar

@senthil177cse我在填充方面遇到同样的问题:0 0 0 0;还创建了填充顶部的create,但出现了空属性,如何修复Grapesjs v0.18.4的问题?

#43362022年5月19日作者 javadsamiee2 个回答
1 个反应

“导入模板”无法用来移除多余的样式

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 101.0.4951.64 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?添加段落块打开“导入模板”,添加这些行并按“导入” ' H1, h2, h3, h4, h5, h6{ 字体家族:Arial、Helvetica、无衬线体; 线高:1.5; } p, span, div{ 字体家族:Arial、Helvetica、无衬线体; 线高:1.5; 颜色:红色; }导入的代码正常工作现在打开“导入模板”,移除之前添加的行,然后点击“导入”如果你再次打开“导入模板”,你还能看到那些...

artf

感谢你的报告@javadsamiee但问题实际上是出在预设网页插件 https://github.com/artf/grapesjs/issues/3727#issuecomment-908255324,而不是核心本身。修复的公关是值得的

ClaudeCode

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

#43352022年5月18日作者 Sudhin353 个回答
0 个反应

编辑器里没有上传背景视频组件的方法,请建议有没有上传背景视频的方法

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v9 可复制演示链接 不是在那里 描述一下那个虫子 如何复现这个漏洞?在 react 应用中安装 grapes js打开编辑器,查看编辑器主体的设置菜单 预期的行为是什么? 需要一个选项将背景视频添加到编辑器中(目前只有背景图片选项) 目前的行为是什么? 目前只有背景图片选项 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 同样的示例代码仅提供 ![上传视频选项](https://user-images.githubusercontent.com/50030377/169051776-8c74b02d-afce-4c2...

Sudhin35

@artf 如果有上述功能,请给我建议

artf

请只在遇到漏洞时开启问题,不要针对个人请求

ClaudeCode

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

#43332022年5月17日作者 Merorh1 个回答
0 个反应

未捕获类型错误:无法读取 null 属性(读取“ownerDocument”)

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chromium 101.0.4951.64(官方构建)快照(64位) 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?选择图片并调整大小——并按住鼠标按键调整大小通过键盘删除按钮删除图片,同时按住鼠标并调整图片大小 预期的行为是什么? 图片已删除 目前的行为是什么? 图片被删除,控制台显示大量错误日志: 后者日志的实例随着每次新的操作和错误重复而不断增加。行为准则 [x] 我同意遵守本项目的行为准则

ClaudeCode

谢谢你举报,@Merorh。 关于未捕获类型错误:无法读取空属性(读取“ownerDocument”)的好问题。推荐的 Keyboard 方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log...

#43232022年5月12日作者 mohdSuhailCoditation4 个回答
10 个反应

当你在Canvas上有2k组件时,拖拽组件到画布时出现性能问题

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Google Chrome 版本 101.0.4951.41(官方版本)(64 位)可复制演示链接 https://jsfiddle.net/Laze0pyg/描述一下那个虫子 如何复现这个漏洞?使用以下脚本添加2k组件。'for(设i = 0;i<2000;i++) editor.addComponents('<div>ABC</div>');'尝试将文本块拖曳到画布上。 预期的行为是什么? 应该没有延迟。 目前的行为是什么? 绿色的占位符出现了延迟 JS小提琴 https://jsfiddle.net/Laze0pyg/ 演示 https://use...

GedMarc

但是......给任何页面添加2000个带有基本样式的支配元素,就会有延迟?这可能不是工具本身的问题,而是工具的使用方式? 另外检查一下浏览器渲染速度和电脑的关系——http://speed-battle.com/speedtest_e.php https://www.webfx.com/web-development/learn/why-does-your-website-load-slowly/ [2015年,平均页面大小为2MB](https://www.soasta...

artf

最新版本包含了@mohamedsalem401分拣器的重构,之前的演示现在似乎运行良好 🥳

vizardkill

https://github.com/GrapesJS/grapesjs/assets/37307788/2d653d49-1a57-458c-bc8c-4833c8c7a690 我也有同样的问题,我觉得不是因为体积,我用的是pageManager,预加载HTML模板,试图拖动新元素到画布时,画布只有10秒后才插入组件,甚至会短暂卡死

#43102022年5月5日作者 barryross4 个回答
1 个反应

样式管理器在使用包含“bout”和 componentFirst = true 的组合 CSS 选择器时不准确

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 100 可复制演示链接 https://jsfiddle.net/4fmd732c/3/ 描述一下那个虫子 如何复现这个漏洞? 给定 a) “componentFirst”设置为“true” b) 一个元素有多个类 c) CSS 规则使用多个类别的组合选择器 d) 其中一类包含“bout”一词 然后: 样式管理器无法准确显示当前样式 导航到链接的JS Fiddle在编辑器中选择 Div在风格管理器中,展开“装饰”并注意背景颜色 预期的行为是什么?样式管理器应表示背景为绿色 目前的行为是什么? 风格管理器显示背景为白色如果你把类名从“.b...

barryross

@artf 太棒了! 谢谢。 要用这些更新,我想我得先用你的改动在本地重建库,直到下一个版本发布。 我会试试这个方法。

artf

抓得好,谢谢你的报告@barryross

barryross

@artf你预计下一次发布什么时候?

#42942022年4月27日作者 DavidHarvey2 个回答
0 个反应

无法将可文本的组件放入较小的文本区域

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v100 可复制演示链接 https://jsfiddle.net/ob0ajh67/ 描述一下那个虫子 如何复现这个漏洞?有一行文本,且不添加额外的大小样式(如填充或明确高度)。尝试将可文本块拖拽到该文本中。 预期的行为是什么? 文本组件应放置在光标位置的文本区域内。 目前的行为是什么? 文本部分被丢弃在文本区域之外。行为准则 [X] 我同意遵守本项目的行为准则

harsh201

@artf我也遇到同样的问题。有什么建议吗?

ClaudeCode

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

#42892022年4月27日作者 candidodmv2 个回答
1 个反应

“storage:start:load” 事件没有触发

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome最新款 可复制演示链接 将“storage:start:load”绑定到编辑器实例,并看到console.log输出 描述一下那个虫子 如何复现这个漏洞?...... 预期的行为是什么? ...活动已被取消 目前的行为是什么? ... 这个事件被忽视了 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 你的代码在这里 ```行为准则 [X] 我同意遵守本项目的行为准则

artf

是的,当前版本你应该在插件里绑定事件,否则第一个“start:load”不会被捕获。这个问题应该会在下一个版本中修复。

ClaudeCode

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

#42852022年4月25日作者 zauchad2 个回答
0 个反应

工具栏宽度调整不正确

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v100.0.4896.127可复制演示链接 没有演示链接。描述一下那个虫子 如何复现这个漏洞?直接在工具栏内放置更大的图标(例如font awesome class: fa-2x): 预期的行为是什么? 组件的动作工具栏应该正确调整其宽度、填充和相对于组件的位置(目前每个图标的单元宽度是硬编码的)。 目前的行为是什么? 这里有一个可视化示例,展示了更大工具栏图标和工具栏的样子: <img width=“1054” alt=“Zrzut ekranu 2022-04-25 o 11 08 41” src=“https://user-imag...

artf

保持工具栏项目大小固定有很多原因,如果你想让它们变大,可以直接更新CSS。

ClaudeCode

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

浏览所有主题