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

GrapesJS 问题

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

找到 220 个问题

🔍 canvas
#56742024年2月9日作者 mauriciolcs22 个回答
0 个反应

当一个元素最小高度为100vh时,无限画布的高度会无限增加

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? Arc 版本 1.29.0 (46113)可复制演示链接 https://grapesjs-react-custom-ui-vrkhwc.stackblitz.io描述一下那个虫子 如何复现这个漏洞?启用无限画布至少在画布上添加两个组成部分为其中一个设置最小高度为100vh。 预期的行为是什么? 画布的高度不应无限增加。 目前的行为是什么? 画布高度在无限增加。 在本演示中设置最小高度最直接的方法就是使用检查器。通过 GrapesJS配置时也会出现同样的错误。行为准则[X] 我同意遵守本项目的行为准则

artf

避免使用无限画布,因为它从未被记录,甚至没有作为长片完成。

GJS Helper

你遇到的 Capital 无限画布在元素为 min-height: 100vh 时无限增加高度的 GrapesJS 问题,是 CSS 视口单元(vh)与GrapesJS画布动态缩放机制之间的已知交互问题,尤其是在画布渲染为 iframe 时。 根本原因分析 min-height: 100vh:该 CSS 属性指示元素至少达到视口高度的100%。在GrapesJS语境中,内容渲染在一个<iframe>中。因此,画布内元素的“视口”即是 iframe。 无限画布功能:当Grap...

#56412024年1月24日作者 yashvi20262 个回答
0 个反应

Undomanager.remove() 不工作

GrapesJS版本[X] 我确认使用最新版本GrapesJS你用的是什么浏览器? Chrome v91可复制演示链接 https://codepen.io/Harshsne/pen/WNgZzPE描述一下那个虫子 如何复现这个漏洞?将图片附加到画布并关闭图片模态。(这样该组件就会从追踪中移除,因为我已经从UndoManager堆栈中移除了该组件) ' editor.on('asset:close', () => { console.log(“接近”) const selected = editor.getSelected(); 如果 (selected & & selected.is('image'))) { editor.Un...

artf

这里的问题不在于“Undomanager.remove”,而是追踪了什么。 当你调整图像大小时,你不是在编辑“组件”本身,而是在编辑它的“CssRule”对象,所以它没有按预期工作。 我建议你干脆跳过那些你不想跟踪的操作的撤销管理器 “''js 编辑。UndoManager.skip(() => { // .... }); ```

GJS Helper

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

#56332024年1月20日作者 kla-ko3 个回答
0 个反应

无法在“component:remove”处理程序中选择组件

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome 版本 120.0.6099.225 可复制演示链接 https://jsfiddle.net/wattnu/opmwfvjn/ 描述一下那个虫子 如何复现这个漏洞?打开并拉动小提琴画布上有两个组件。“hello world” div 和一个蓝色背景 div。“hello world” div 是根据命令 'editor.select(editor.getComponents().models[0]); ' 选择的在选择蓝色框并在画布位置选择删除时,调用“component:remove”处理程序。然而,“hello world...

artf

谢谢@kla-ko,实际上有一个逻辑会阻止在“组件:移除”事件中选择其他组件,我会在下一个版本修正,但我建议你切换到另一个事件。 “component:remove”事件会针对每个被移除的组件触发,这意味着它会针对你决定移除的组件内嵌套的组件触发。你可以使用“run:core:component-delete”事件,该事件在删除命令完成后只触发一次,目前应该能正常工作,无需修复。

kla-ko

谢谢@artf。这招管用得非常顺利! /

GJS Helper

你遇到的 editor.select() 在 component:remove 处理程序中无法正常工作的问题,是由于事件的时间点和 GrapesJS的内部组件生命周期有关。component:remove事件在组件完全脱离 DOM 并从编辑器内部组件树中移除之前就触发了。在此阶段,编辑器可能处于选择的中间状态,任何同步尝试更改选择的尝试都可能被后续的内部逻辑覆盖或忽略,从而完成组件移除过程。 根本原因 当component:remove被触发时,GrapesJS正在主动处理...

#56302024年1月18日作者 kla-ko2 个回答
0 个反应

配置 onStart() resize 回调可以防止调整大小

GrapesJS 版本 [x] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome 版本 120.0.6099.225 可复制演示链接 https://jsfiddle.net/wattnu/y8L6whun/ 描述一下那个虫子 如何复现这个漏洞?Goto jsfiddle运行代码在画布上,选择蓝色的div组件尝试拖动位于底部中央的调节把手调整大小手柄不会随着鼠标移动在 js 代码中,查看顶部的插件实现。在那里,考虑以下部分:注释 onStart 配置 --> '// onStart: (event, opt) => { console.log('resize started') } ,'重新运行小提琴。现在...

artf

说得好,我会修正的

GJS Helper

你遇到的问题是,配置onStart回调以resizable属性,导致组件无法调整大小,是因为GrapesJS(以及通常底层的拖拽/缩放库)处理自定义事件回调的方式。当定义了onStart回调时,如果你想继续默认的调整大小操作,通常会显式返回true。如果回调返回undefined(这是没有 return 语句时的隐式返回值)或 false,则调整大小操作实际上被取消或阻止启动。 根本原因 GrapesJS 中的resizable功能依赖于一个内部机制,检查onStart回调...

#56182024年1月15日作者 Ashwinvalento3 个回答
0 个反应

导入时旧组件脚本不会被删除。导致脚本重复

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Edge v120.0.2210.121 可复制演示链接 https://codepen.io/ashwinvalento/pen/jOJMPqx 描述一下那个虫子 如果我们设置了 config.parser.optionsHtml.allowScripts: true 并创建了一个包含脚本的组件,那么当我们用 grapesjs-preset-webpage 插件导入代码时,脚本标签会被重复。 如何复现这个漏洞? 在演示链接(https://codepen.io/ashwinvalento/pen/jOJMPqx)将“复制脚本块”放入画布。...

artf

直接将 JS 导入为组件从来不可能,所以它被视为一个新的组件。

Ashwinvalento

有没有办法识别现有组件的脚本并在导入时删除它们?我们无法移除所有脚本标签,因为需要保留手动添加的脚本。

GJS Helper

你遇到的脚本重复问题是,在多次导入HTML时,尤其是在 GrapesJS中,尤其是 config.parser.optionsHtml.allowScripts: true,是 GrapesJS 在 setHtml 操作中如何对合组件的已知行为。虽然 setHtml 设计用于替换画布内容,但脚本组件的对账逻辑可能并不总是正确识别和替换现有的相同脚本,导致它们被附加而非更新或移除。 根本原因 当 config.parser.optionsHtml.allowScripts 设...

#56072024年1月10日作者 Ju99ernaut2 个回答
0 个反应

无法扩展之前空过的图层

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v120.0.6099.199 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?将第1列方块拖到画布上将任何其他块拖入单元格,例如文本选择单元打开图层面板 预期的行为是什么? 我们应该能够展开单元格,并通过图层选择单元格内的元素 <img width=“1438” alt=“截图 2024-01-10 下午5 42 36” src=“https://github.com/GrapesJS/grapesjs/assets/48953676/043150f3-9c7...

artf

说得好,我会修好的

GJS Helper

这是GrapesJS中已知的一个漏洞,与图层面板(特别是Layer视图)对组件子集合变化的反应有关。问题出现在组件(如列或单元格)最初是空的,然后内容被拖入时。图层面板未能更新父组件的图层以显示展开/折叠的插入点,阻止访问其嵌套元素。 根本原因 GrapesJS中的Layer视图负责渲染图层面板中的每个项目,会监听其关联组件模型上的change:open和change:components事件,以决定是否渲染展开/折叠的插入点。然而,在Backbone.js(GrapesJ...

#55932024年1月3日作者 thigh4 个回答
0 个反应

图层管理器在页面切换时无法刷新

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? MS Edge 120.0.2210.91 可复制演示链接 无 描述一下那个虫子 如何复现这个漏洞?更新至最新版本 grapesjs 建立一个多页项目注意当前层管理器的层级结构调用 pagemanager.select(pageId) 方法,针对当前选中的页面以外的其他页面图层管理器仍然反映上一页的层级结构,尽管页面管理器显示新页面当前为激活状态,画布正确渲染新选中的页面降级到 grapesjs v0.21.6,重复步骤3-5。每当选择不同页面时,图层管理器都会正确反映活跃页面的层级结构 预期的行为是什么? ...图层管理器应更新以反映活跃...

artf

谢谢你的反馈@thigh会解决的

sunnynk19

你好,@thigh,看起来还是没用。你部署了最新的 npm 包吗?

artf

尚未出版,你可以在这里找到所有 https://github.com/GrapesJS/grapesjs/releases

#55842023年12月27日作者 vian0132 个回答
0 个反应

当所有组件都挂载到画布中时,“存储:结束:加载”事件不会触发

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v91 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞? 最近我必须将 grapesjs 0.14.62版本升级到最新版本(0.21.8)。在旧代码中,我们用“storage:end:load”来做一些操作,前提是所有组件都挂载到画布上。 但在当前版本中,它的工作方式已经不一样了。正如我在文档中看到的,“storage:end:load”现在会在存储加载请求完成后立即触发。有没有什么方法或其他事件能达到和之前相同的效果? 目前我只能在“storage:end:l...

artf

@vian013请只用可复现的演示链接打开bug问题,快速检查一下活动似乎正常运行

GJS Helper

从版本0.14.62到0.21.8,GrapesJS中storage:end:load事件行为的变化是有意为之,反映了更细致的事件系统。在新版本中,storage:end:load会在数据成功从存储管理器中检索时触发。这发生在组件解析、添加到编辑器模型树并随后渲染到画布之前,DOM.To 实现所有组件挂载到画布后才执行代码的预期行为,你应使用editor.on('load', ...)事件。### 根本原因与解释 storage:end:load事件的目的是表示存储加载过程...

#55632023年12月18日作者 leo-budgetsimple1 个回答
0 个反应

脚本标签的属性正在画布上被移除。

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? 最新版本的Chrome浏览器可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 如何复现这个漏洞? 用这个代码把一个html字符串渲染成 grapesjs (我启用了allowScripts) 这是渲染好的画布 ![图片](https://github.com/GrapesJS/grapesjs/assets/107002063/21087a5d-348b-4e16-a349-43243ac8f2e1) 这是可以导出的HTML字符串图片 ![图片](https://github.com/GrapesJS...

GJS Helper

你观察到脚本标签属性不出现在 GrapesJS 画布上,而导出的HTML中却存在,这是预期且设计中的, GrapesJS 处理非视觉元素,尤其是携带数据的脚本标签。这不是漏洞,而是编辑器内部架构及其专注于提供稳定安全的视觉编辑环境的结果。 根本原因解释 内部组件模型与画布渲染: 当你使用 editor.setComponents()时, GrapesJS 会将你的 HTML 字符串解析到其内部组件模型中。使用 allowScripts: true时, <script> 标签...

#55452023年12月5日作者 AFriboulet-ii1 个回答
0 个反应

拖动组件类型 text trigger “rte:disable”

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 版本 119.0.6045.200 可复制演示链接 https://jsfiddle.net/d64pkcom/1/ 描述一下那个虫子 如何复现这个漏洞?在 Canvas 中拖拽组件文本观看jsfiddle控制台 预期的行为是什么? 不要触发RTE:禁用 目前的行为是什么? 触发RTE:禁用 https://github.com/GrapesJS/grapesjs/assets/128728949/b7fc7998-aeef-47d5-84f4-af74966d56cf 行为准则 [X] 我同意遵守本项目的行为准则

GJS Helper

你准确地识别出GrapesJS中一个小但意外的行为:当从块面板拖拽新组件(比如文本块)到画布时,触发了rte:disable事件。这确实不是预期的行为,因为富文本编辑器(RTE)只有在之前在所选组件上激活时才应该被禁用。 根本原因 rte:disable事件由GrapesJS RTE模块在其disable()方法被调用时发出。该方法通常在取消选中具有活跃RTE的组件,或编辑者内部状态要求停用RTE时调用。在从块面板拖拽操作时,GrapesJS的内部逻辑可能执行隐式触发“清除...

浏览所有主题