问题 #3480💬 已回答提出于 2021年5月25日作者 samichamoun1 个反应

如何动态控制编辑器的高度,以避免笨重的滚动

快速解答作者 ahmedderkaoui1

尽量用'VH'代替'PX'。 例如:给编辑器“height: '80vh'',给导航栏'height: '20vh'''。这样,只要所有元素的“vh”之和≤100,纵向滚动就永远不会显示或需要 希望这些信息对你有帮助。

阅读下方完整回答 ↓

问题

我注意到如果我在初始化函数中设置高度,它会根据特定的像素数量来设置,比如“500px”。但是如果你尝试用百分比设置,比如高度:“90%”,编辑器根本没有高度。

另外我也想知道,如果什么都没设置,为什么设置了高度,因为它似乎自动计算了一个像素数量,占用了整个页面(比如100%)。

我实际上把编辑器包裹在我们CMS后台的标准页面模板里,这个页面模板在侧边菜单栏里有更多内容,迫使页面变成可滚动页面(也就是页面模板的内容总是在屏幕折叠下方)。这让编辑器功能非常差,因为如果你想在编辑器下方滚动,就必须把光标移出编辑器并滚动,这会导致用户体验很差。

我还有一个“保存”按钮,可以提交到表单,但这不属于编辑器,所以要进入保存按钮,你得再次把光标移出编辑器区域并滚动——这并不理想。

我考虑过把页面模板放到编辑器里,允许它几乎全屏,但保存按钮必须直接在编辑器正下方的问题。我在这里的最佳选择是什么?我本以为如果动态把编辑器高度设置为80-90%,下面会留出空间,但没用。

任何见解都将不胜感激,因为我已经为这个问题绞尽脑汁了好几天。

回答(4)

ahmedderkaoui2021年5月25日

尽量用'VH'代替'PX'。

例如:给编辑器“height: '80vh'',给导航栏'height: '20vh'''。这样,只要所有元素的“vh”之和≤100,纵向滚动就永远不会显示或需要

希望这些信息对你有帮助。

samichamoun2021年5月25日

尝试用“VH”代替“px”。

例如:给编辑器“height: '80vh'',你的导航栏'height: '20vh''。这样,只要所有元素的“vh”之和≤100,纵向滚动就永远不会显示或需要

希望这些对你有帮助。

谢谢,这很有用!

artf2021年5月25日

这更多是布局问题,与GrapesJS编辑器本身无关。

ClaudeCode2026年5月17日

谢谢你举报,@samichamoun。 关于如何动态控制编辑器高度以避免笨重滚动的建议,真是太棒了!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件进行细致跟踪 构建一个插件,扩展编辑器并具备此功能 正式宣布: 如果此功能能惠及更多用户,考虑在 Grap...

相关问答

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

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

相关教程

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

全部教程 →

浏览插件分类

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