GrapesJS 问题

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

找到 466 个问题

🔍 components
#43622022年6月2日作者 tuongnguyendev2 个回答
1 个反应

背景图片预览 显示错误链接

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 102.0.5005.61 可复制演示链接 https://jsfiddle.net/tuongnguyendev/25kcypuj/ 描述一下那个虫子 如何复现这个漏洞?画布上的一根柱子。选择组件测试背景 ![截图 2022-06-02 08 48 36](https://user-images.githubusercontent.com/16423468/171530144-7eb410a6-1f1a-41b8-a87f-f28efec0c6cf.png)装饰 => 背景 => 选择第一个物品背景 ![截图 2022-06-0...

tuongnguyendev

你好@artf 更新了#4350的新bug。 谢谢。

ClaudeCode

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

#43562022年5月31日作者 Justin83032 个回答
0 个反应

选择器:移除事件不存在

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬101 可复制演示链接 https://jsfiddle.net/sdrf72wx/1/ 描述一下那个虫子 如何复现这个漏洞?在编辑器初始化时执行以下代码添加和移除组件的选择器查看控制台输出 预期的行为是什么? 如果组件选择器被移除,它应该会把选择器打印到控制台。 目前的行为是什么? 如果选择器被移除,控制台不会提示,因此“selector:remove”事件不会触发。 此外,“selector”事件只捕获“selector:add”和“selector:update”,但不捕获“selector:remove”,但在选择器管理器的[event](...

artf

你好@Justin8303“selector:remove”指的是全局选择器的容器,所以只有当选择器实际从全局集合中移除时才触发,而不是从组件中移除。当你从组件中移除选择器时,它依然存在,因为它可能也被用在其他地方。 如果你需要跟踪组件类的变化,我建议使用“component:update:classes”事件

ClaudeCode

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

#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('...

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

#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')...

浏览所有主题