PageKit — 可自托管的 GrapesJS 建站工具，附完整源码。 获取抢先体验

GrapesJS 问题

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

找到 3,464 个问题

#43502022年5月26日作者 ronaldohoch3 个回答
1 个反应
提问style-manager组件缺陷画布

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

GrapesJS 版本 [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...

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）

GJSBlock

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

查看详情
#43412022年5月20日作者 senthil177cse4 个回答
0 个反应
style-manager缺陷提问组件

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

GrapesJS 版本 [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%”...

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 个反应
提问style-manager组件缺陷文档

"Import template" don't work for removing extra styles

GrapesJS 版本 [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，而不是核心本身。修复的公关是值得的

GJSBlock

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

查看详情
#43352022年5月18日作者 Sudhin353 个回答
0 个反应
提问组件缺陷

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

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v9 可复制演示链接 不是在那里 描述一下那个虫子 如何复现这个漏洞？在React应用中安装 grapes js打开编辑器，查看编辑器主体的设置菜单 预期的行为是什么？ 需要一个选项将背景视频添加到编辑器中（目前只有背景图片选项） 目前的行为是什么？ 目前只有背景图片选项 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则 [X] 我同意遵守本项目的行为准则

Sudhin35

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

artf

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

GJSBlock

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

查看详情
#43332022年5月17日作者 Merorh1 个回答
0 个反应
缺陷提问keyboardtypescript

未捕获类型错误：无法读取 null 属性（读取“ownerDocument”）

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

GJSBlock

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

查看详情
#43232022年5月12日作者 mohdSuhailCoditation4 个回答
10 个反应
提问性能组件缺陷画布

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

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

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 个反应
style-manager提问组件缺陷

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

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

barryross

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

artf

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

barryross

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

查看详情
#42942022年4月27日作者 DavidHarvey2 个回答
0 个反应
提问style-manager组件缺陷typescript

Unable to drop textable components into small text areas

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

harsh201

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

GJSBlock

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

查看详情
#42892022年4月27日作者 candidodmv2 个回答
1 个反应
提问缺陷常规

"storage:start:load" event is not being trigged

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

artf

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

GJSBlock

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

查看详情
#42852022年4月25日作者 zauchad2 个回答
0 个反应
提问组件缺陷文档typescript

Toolbar width not resizing correctly

GrapesJS 版本[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...

artf

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

GJSBlock

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

查看详情

浏览所有主题