如何动态控制编辑器的高度,以避免笨重的滚动
尽量用'VH'代替'PX'。 例如:给编辑器“height: '80vh'',给导航栏'height: '20vh'''。这样,只要所有元素的“vh”之和≤100,纵向滚动就永远不会显示或需要 希望这些信息对你有帮助。
阅读下方完整回答 ↓问题
我注意到如果我在初始化函数中设置高度,它会根据特定的像素数量来设置,比如“500px”。但是如果你尝试用百分比设置,比如高度:“90%”,编辑器根本没有高度。
另外我也想知道,如果什么都没设置,为什么设置了高度,因为它似乎自动计算了一个像素数量,占用了整个页面(比如100%)。
我实际上把编辑器包裹在我们CMS后台的标准页面模板里,这个页面模板在侧边菜单栏里有更多内容,迫使页面变成可滚动页面(也就是页面模板的内容总是在屏幕折叠下方)。这让编辑器功能非常差,因为如果你想在编辑器下方滚动,就必须把光标移出编辑器并滚动,这会导致用户体验很差。
我还有一个“保存”按钮,可以提交到表单,但这不属于编辑器,所以要进入保存按钮,你得再次把光标移出编辑器区域并滚动——这并不理想。
我考虑过把页面模板放到编辑器里,允许它几乎全屏,但保存按钮必须直接在编辑器正下方的问题。我在这里的最佳选择是什么?我本以为如果动态把编辑器高度设置为80-90%,下面会留出空间,但没用。
任何见解都将不胜感激,因为我已经为这个问题绞尽脑汁了好几天。
回答(4)
尽量用'VH'代替'PX'。
例如:给编辑器“height: '80vh'',给导航栏'height: '20vh'''。这样,只要所有元素的“vh”之和≤100,纵向滚动就永远不会显示或需要
希望这些信息对你有帮助。
尝试用“VH”代替“px”。
例如:给编辑器“height: '80vh'',你的导航栏'height: '20vh''。这样,只要所有元素的“vh”之和≤100,纵向滚动就永远不会显示或需要
希望这些对你有帮助。
谢谢,这很有用!
这更多是布局问题,与GrapesJS编辑器本身无关。
谢谢你举报,@samichamoun。 关于如何动态控制编辑器高度以避免笨重滚动的建议,真是太棒了!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件进行细致跟踪 构建一个插件,扩展编辑器并具备此功能 正式宣布: 如果此功能能惠及更多用户,考虑在 Grap...
相关问答
通过相似的问题讨论继续研究。
问题 #3770
:改进并修复绝对拖拽模式
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v93 可复制演示链接 https://codepen.io/damnslow/pen/yLXXOxQ 描述一下那个虫子 如何复现这个漏洞?选择两个元素使用拖曳图标拖曳 预期的行为是...
问题 #3639
:改进UndoManager API
我认为一个更详细的历史堆栈会带来很棒的功能。你可以拿到撤销堆栈,然后从中建立一个记录所有编辑的历史报告,但对我来说每次编辑具体是什么不太清楚(至少对我来说是这样,如果我遗漏了什么,请告诉我)。比如用公式化描述,比如组件[组件名称]在[页面位置或组件添加]处添加/删除/编辑,或者...
问题 #3307
成就:提供一个未被压缩的版本
有没有被压缩的 Grapesjs 单文件版本? 如果能有个专门的,方便修复漏洞和快速测试新功能/改进,那就太好了。
问题 #3939
在预览中禁用拖放功能
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 第95卷可复制演示链接 https://codesandbox.io/s/grapes-border-issue-forked-2c0ib?file=/src/index.js:10258-10261...
与此问题匹配的付费插件
根据问题关键词和标签相关性精选,助你更快交付。
正在加载付费插件推荐……
相关教程
关于同一主题的深入指南。
教程
GrapesJS DevTools: A Developer Panel Inside Your Editor
If you've ever debugged GrapesJS with console.log(editor.getSelected()) and a dozen throwaway event listeners — this post is for you.
教程
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
教程
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
浏览插件分类
直接跳转到市场上的插件分类页面。