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

GrapesJS 问题

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

找到 743 个问题

🔍 bug
#45032022年8月5日作者 gustavohleal4 个回答
0 个反应
提问缺陷style-manager组件增强

CKEditor 在添加原始 HTML 组件时使用的缺少内联样式

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 v96 可复制演示链接 https://grapesjs.com/demo-newsletter-editor.html 描述一下那个虫子 如何复现这个漏洞？在控制台标签页打开开发者工具运行下面的代码选择新增的文本用CKEditor编辑内容选择另一个组件 预期的行为是什么？ 预计会从文本组件内的跨度添加内联样式，这样CKEdittor就能理解文本样式，并在打开时保留这些样式。 目前的行为是什么？ 添加原始 HTML 时， editor.addComponent() 确实添加了样式，但一旦你编辑文本并模糊，样式就会从它们应有的文本段落中移...

shkhalid

+1

pety-dc

嘿 我也遇到过类似的问题。我认为情况相当严重，因为通讯和 mjml 演示版都受到了影响。（两者都使用 CKeditor 作为 RTE） 当我导入包含带有样式元素（span）的文本（mj-text）的内容时，导入的内容会被解析，样式元素被识别为独立组件，而不是作为换装文本元素的内容。 示例（根据 mjml.io 有效）： 预期结果： ![图片]（https://user-images.githubusercontent.com/25766885/230409523-b8b57...

raymondmakz

CKeditor 输出： '<div><span style=“color：blue”>ckeditor 中的部分富文本</span></div>” 解析到编辑器后，可以变成： '<div data-gjs-type=“text”>来自 <span 的一些富文本 style=“color：blue” data-gjs-type=“default”>ckeditor</span></div>' 基本上每个主导者都变成了组成部分。 也许可以让开发者选择是否停止添加子节点作为组件...

查看详情
#45012022年8月5日作者 udayan462 个回答
0 个反应
缺陷提问常规

[X] 我确认使用最新版本 GrapesJS

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 无演示链接 描述一下那个虫子 你好@artf，能帮我检查这两位吗无法在编辑器中手动添加颜色代码 grapesjs 导入模态没有任何存档选项行为准则 [X] 我同意遵守本项目的行为准则

artf

如果你无法提供可复现的演示，请不要打开BUG问题。

GJSBlock

谢谢你举报，@udayan46。 * 的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤：* 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报告中包含 Grape...

查看详情
#44982022年8月4日作者 ajjuyadav02092 个回答
0 个反应
提问缺陷常规

Seeing Multiple pages on scroll

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 勇敢 可复制演示链接 https://codepen.io/etamity/pen/NWpKYPp 描述一下那个虫子 如何使用 pageManager 在 Onscroll 中查看多个页面？ 行为准则 [X] 我同意遵守本项目的行为准则

artf

请使用讨论区提问

GJSBlock

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

查看详情
#44972022年8月3日作者 benryanwilliams4 个回答
3 个反应
缺陷提问组件画布typescript

从 v18.4 更新到 GrapesJS v19.5 会导致 Chrome 变得无响应

GrapesJS版本[x] 我确认使用最新版本GrapesJS你用的是什么浏览器？ Chrome 104.0.5112.79可复制演示链接 https://jsfiddle.net/gvrnw2c3/4/描述一下那个虫子 如何复现这个漏洞？ 我目前无法用 jsfiddle 重现这个 bug，这让我觉得可能是 Chrome 的问题，但我会继续尝试重现。 Within我的项目，如视频所示： 1）点击一个“条件文本”组件（我添加了的自定义组件类型） 2）点击“打开条件”按钮，然后在屏幕上出现的对话框中点击“应用” 3）将光标悬停在“条件文本”组件上 In JSFiddle（目前没有崩溃，但我会继续测试）： 1）点击“Hello Worl...

tyuterry

小提琴（vue）的复刻版 没有Vue我无法复制 [小说]（https://jsfiddle.net/6qp48xyn/） 重现问题的步骤：添加文本组件选择文本组件，然后点击底部的“转换为条件”按钮将鼠标悬停在条件文本组件上，然后它会冻结。 好像有什么东西总是在悬浮上一直触发 ![图片]（https://user-images.githubusercontent.com/30591406/184062993-73d84ef7-0c07-4832-bd7b-9ac6d3851a...

artf

谢谢大家，我其实通过在Vue里打包这个示例还原了它，但我不太清楚为什么会被困在这个循环里。 乍一看，似乎与Vue的Proxy观察者有关。通过与之前的 Grapesjs 版本对比，似乎并非所有部分都被 Proxies 转换，这避免了卡住。 一个快速的变通方法是把“编辑器”放在Vue之外，防止所有对象都变成代理。 “''js 让编辑; Vue.createApp（{ mounted（） { editor = grapesjs.init（{ ... }）; // ... }, /...

benryanwilliams

谢谢@artf，现在在Vue实例外声明编辑器后，一切都完美运行了。

查看详情
#44962022年8月3日作者 bovealexandre4 个回答
0 个反应
提问style-manager缺陷typescript

SetStyle

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 最新版本可复制演示链接 没有，因为它有太多React等自定义代码描述一下那个虫子 如何复现这个漏洞？ 用 setStyles 向编辑器添加更多样式 这是我在 setStyles 里用过的字符串 预期的行为是什么？ 在编辑器中添加多种样式 目前的行为是什么？ 只加那些孩子，更奇怪了 所以目前只添加了这些 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 无需代码测试，只需 edit API 中的 setStyle 即可 行为准则[X] 我同意遵守本项目的行为准则

bovealexandre

当我试图添加这个时 它只是增加了这一点

artf

@bovealexandre至少提供一个简易可复现的例子，因为从我目前看到的情况来看，可能是你的自定义代码导致的

bovealexandre

@bovealexandre至少提供一个最小可复现的例子，因为据我目前看到，可能是你的自定义代码导致的 好的，我刚刚在我的scss编辑器上做了editor.getCss（{ keepUnusedStyles： true }

查看详情
#44952022年8月3日作者 TechyMS1 个回答
0 个反应
提问组件缺陷

Button component is not working

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 预期的行为是什么？ 按钮组件不工作。行为准则 [X] 我同意遵守本项目的行为准则

GJSBlock

谢谢你举报，@TechyMS。 按钮组件不工作的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（CodeSandbox）——这有助于团队更快识别根本原因 在报告中包含 Gr...

查看详情
#44892022年7月30日作者 contentfree4 个回答
0 个反应
画布缺陷提问typescript

从设计模式项目加载初始项目数据会导致画布大小错误

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v103 可复制演示链接 https://codesandbox.io/s/laughing-austin-k12mc3?file=/index.js 描述一下那个虫子 如果你查看链接的CodeSandbox并找到注释显示的projectData行，你会发现画布的大小被调整成了设备指定的大小。在调试器中， updateDim 初始化时似乎会多次调用：第一次是正确的设备大小，第二次是空的宽度和高度，这导致gjs帧封装器的尺寸被移除。 行为准则 [X] 我同意遵守本项目的行为准则

contentfree

我可以通过以下方式强制调整到正确的画布尺寸：初始配置中未提供 projectData，通过“editor.loadProjectData（...”）加载 projectData（...）在初始化和然后运行编辑器。Canvas.getModel（）.updateDevice（）;'虽然它会从全宽动画回到设备大小。 看起来加载项目数据是在默认设备渲染（可能）之后，某种程度上会压缩当前帧，重新渲染一些默认画面。（我不知道默认配置是什么，因为我只提供了一个设备配置，而第二个渲染时似...

artf

谢谢@contentfree我会尽量在下一次发布时修复这个问题

contentfree

谢谢@artf。我会留意下一次发布（看起来你的看板现在空了......所以应该很快就会被发现？）

查看详情
#44812022年7月27日作者 skru2 个回答
0 个反应
缺陷组件提问typescript

V0.19.5 Breaks headless editor.setComponents() (with Map/Video block)

GrapesJS版本 [X] 我确认使用最新版本GrapesJS 你用的是什么浏览器？ Chrome 102.0.5005.115（官方版本）（64位） 可复制演示链接 描述一下那个虫子 这是#4473的延伸 在无头环境中通过editor.setComponents（）添加地图或视频块时，也会出现类似的“文档未定义错误”，源自./src/dom_components/model/ComponentImage.js，parseUri（） 尝试使用文档对象。 我不得不迅速修复，因为它是产品发布的瓶颈。我重构了 parseUri（） 方法，使其看起来像这样（测试通过且无错误）： parseUri（uri） { let uriParams...

artf

谢谢@skru我其实已经处理好了 parseUri [这里]（https://github.com/artf/grapesjs/commit/f61222ec904ed56794f7b97e362ea2006dfceaf6），所以下次发布应该能用

GJSBlock

谢谢你举报，@skru。 v0.19.5 导致 headless editor.setComponents（）（带地图/视频块） 的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复...

查看详情
#44802022年7月26日作者 ValouZ2 个回答
0 个反应
提问缺陷画布组件typescript

Iframe on a block can't be edited

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox v102.0.1 可复制演示链接 这是工作代码，我不能...... 描述一下那个虫子 如何复现这个漏洞？拖放到页面块 视频你会发现你对我的iframe无能为力 预期的行为是什么？ 我希望iframe的src可以编辑 目前的行为是什么？ iframe没法用。 我在图层管理器上能看到Iframe，但如果我打开检查器，只有包含Iframe的部分。 这东西在两三周前还很糟糕，我去度假了，没人碰它，因为只有我一个人在修，现在它坏了。 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 希望你能帮帮我，非常感谢！ 行为准则 [X] 我...

artf

感谢@ValouZ的报告，iframe视图上确实有个拼写错误。我会在下次发布时处理好。

GJSBlock

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

查看详情
#44752022年7月23日作者 zithasdev2 个回答
0 个反应
提问缺陷typescript

Link Button Not work

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 103.0.5060.134可复制演示链接 https://www.w3schools.com/html/tryit.asp?filename=tryhtmllinksw3schools描述一下那个虫子 如何复现这个漏洞？.当我工作时，我的项目相关链接... 预期的行为是什么？正确拖拽 2.Link 到另一个链接，我们作为引用，想打开它 目前的行为是什么？ ...这不是变装 它不是链接到另一个链接 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则[X] 我同意遵守本项目的行为准则

artf

抱歉，你必须按照所有步骤正确打开bug问题，并提供可复现的演示。

GJSBlock

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

查看详情

浏览所有主题