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

问题 #5705💬 已回答提出于 2024年2月26日作者 bernesto0 个反应

编辑器大小调整时组件工具会出现错位

快速解答作者 artf

感谢@bernesto报告,但由于我们无法检测程序布局的变化而不影响性能,在这种情况下,你必须通过 ['editor.refresh()]](https://grapesjs.com/docs/api/editor.html#refresh) 手动更新编辑器布局(例如,在你的例子中,调用直接放在 resizeEditor 函数的末尾)

阅读下方完整回答 ↓

问题

GrapesJS 版本

  • 我确认使用最新版本 GrapesJS

你用的是什么浏览器?

Chrome v122

可复制演示链接

https://jsfiddle.net/Lk2bwhp4/

描述一下那个虫子

如何复现这个漏洞?

  1. 将编辑器放入容器中,然后通过程序调整容器的宽度。

预期的行为是什么? 编辑器及其所有子节点应相应调整大小。

目前的行为是什么? 编辑器中所有组件的画布位置都保留了画布调整前的偏移。

  • 注意,窗口调整大小会重置位置。这必须在窗口内通过程序实现。用例包括编辑器在页面上,有其他面板可以调整编辑空间大小。
  • 在下面的示例中,查看在将编辑器调整到更大宽度后,工具如何与相关元素对齐。工具保持在原来的位置,直到某个事件触发更新。窗口大小调整或预览切换键会更新视图。

![图片](https://github.com/GrapesJS/grapesjs/assets/1020507/cce10273-49de-428e-b2d6-1f32857ddab4)

行为准则

  • 我同意遵守本项目的行为准则

回答(4)

artf• 2024年3月4日

感谢@bernesto报告,但由于我们无法检测程序布局的变化而不影响性能,在这种情况下,你必须通过 ['editor.refresh()]](https://grapesjs.com/docs/api/editor.html#refresh) 手动更新编辑器布局(例如,在你的例子中,调用直接放在 resizeEditor 函数的末尾)

bernesto• 2024年3月4日

你好,@artf,我其实不小心把这个混在你最后接受的拉取请求里(src/canvas/model/Frame.ts)。你可以看看我添加的内容,看看是否造成了问题。我们现在正在测试中,没有看到性能下降,而且它解决了问题。

artf• 2024年3月7日

我其实把这个误混在你上次接受的拉取请求里了

我实际上删掉了,因为看起来没什么关系 🤣

补充回来没问题,但要考虑你的例子只有桌面设备才会有效。宽度填充了容器,这会触发iframe窗口的缩小(然后触发新增事件)。如果你换成更小的设备,这个方法就不行了,那时不会触发调整大小事件,所以你仍然需要刷新调用。

GJS Helper• 2026年5月17日

这是GrapesJS中已知的行为,当编辑器容器在程序调整容器大小却没有相应的window.resize事件时,组件工具(如工具栏、调整大小手柄和选择器)会出现错位。根本原因是GrapesJS依赖window.resize事件来触发画布及所有相关UI元素的重新计算和重新定位。 当你通过程序更改编辑器父容器的宽度或高度时,浏览器的window.resize事件不会自动触发。因此,负责更新画布尺寸和工具位置的GrapesJS内部监听器不会被触发。这导致工具仍显示在原坐标,导致观察到的错位。 解决方案/变通方法 解决方法是在程序调整GrapesJS编辑器容器大小后,立即手动调度window对象的 r...

相关问答

通过相似的问题讨论继续研究。

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。