问题 #2722💬 已回答提出于 2020年4月17日作者 tomaskallup0 个反应

高亮和工具栏在外部滚动中位置错误

快速解答作者 artf

是的,真的很奇怪,我最初猜测是Canvas工具栏在窗口“滚动”时没有更新,所以我尝试创建一个非全屏的长页面示例,但我发现主窗口上没有“滚动”监听器,因为不需要,工具栏的位置是正确的。 所以,我能想到的唯一合理问题可能是Firefox浏览器(请尽量在Chrome浏览器里查看你的页面),或者你可能在iframe里加载页面,因为这可能是个问题,这种情况下你需要设置一个“滚动”监听器并将其传播到编辑器

阅读下方完整回答 ↓

问题

你用的是最新版本吗(旧版本不支持)?是的 你是在本地版GrapesJS遇到这个bug,还是当前的演示版?地方操作系统:Archlinux浏览器:Firefox 74.0 和 Firefox 开发者版 75.0b11葡萄:v0.16.3 预期的行为是什么?高亮应在外部滚动时更新其位置 结果会怎样? ![葡萄卷轴发行](https://user-images.githubusercontent.com/26621166/79562540-91142180-80ab-11ea-9fc3-8107c94759c6.gif) 我尽力模仿这种行为,但没成功。即使使用同一个栈(Parcel、Typescript、React、Ant Design),似乎也能正常工作。所以我想请教一下如何调试这个问题。 看Inspector里的事件,卷轴事件是有的。 ![图片](https://user-images.githubusercontent.com/26621166/79566113-49dd5f00-80b2-11ea-8445-8078caaa6e3b.png) 在我 https://github.com/tomaskallup/grapesjs-react-scroll-issues 年的复制尝试中,应该应用差不多相同的样式(有个Flexbox有滚动内容),但问题在那里没有出现。(更新 仓库已更...

回答(3)

artf2020年4月21日

是的,真的很奇怪,我最初猜测是Canvas工具栏在窗口“滚动”时没有更新,所以我尝试创建一个非全屏的长页面示例,但我发现主窗口上没有“滚动”监听器,因为不需要,工具栏的位置是正确的。 所以,我能想到的唯一合理问题可能是Firefox浏览器(请尽量在Chrome浏览器里查看你的页面),或者你可能在iframe里加载页面,因为这可能是个问题,这种情况下你需要设置一个“滚动”监听器并将其传播到编辑器

tomaskallup2020年4月21日

你好,谢谢你的回复! Firefox似乎不是问题所在(Chrome上也有同样的行为) ![图片](https://user-images.githubusercontent.com/26621166/79864366-a655bc80-83d9-11ea-99f9-25349e219ab9.png) 而且复制仓库在两个浏览器中都能正常运行,没有这个bug。 我没有在iframe里加载任何东西(这是从实际页面的检查员布局) ![图片](https://user-images.githubusercontent.com/26621166/79864693-2d0a9980-83da-11ea-9...

tomaskallup2020年4月21日

@artf我想我找到了原因,我们的根元素 '<div id=“❤”“>' 有这样的样式: “''CSS #❤ { 高度:100 VH; 显示:flex; }


把它添加到复制仓库后,问题就出现了!(去除“弹性”似乎能解决问题,我会调查是否真的需要,但至少现在有实际的繁殖能力了)

相关问答

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

问题 #761

文本分量问题

嗨。我希望有个文本组件,不会每次按“回车”键创建新段落时都生成新组件(这不方便使用)。此外,葡萄核心的实际文本部分存在一个问题(见下面的截图)。提前感谢大家的关注! ![动图-屏幕葡萄](https://user-images.githubusercontent.com/777...

3 个回答更新于 2021年2月20日

问题 #2878

不可能让H1的一部分变得非粗体

步骤:https://grapesjs.com/demo-newsletter-editor.html 开放通讯演示清洁画布删除“文本部分”选择H1内的任何单词,例如单词“title”按粗体修饰键一两次 预期:所选文本变为非粗体 实际情况:文字保持粗体 以上步骤是针对CKE编辑...

3 个回答更新于 2020年9月1日

问题 #1936

绝对/设计模式

大家好, 本期概述了它是什么、已完成的、该做什么以及完成设计师模式功能的好事。序言 那么我们先来描述一下它是什么,以及这个功能的目标是什么。设计者模式应该允许用户在画布上自由拖动组件,没有HTML固定的位置限制,更像Photoshop/Sketch等工具里的操作。这样移动组件会...

3 个回答更新于 2025年1月8日

问题 #2828

链接与CKEditor的问题

链接和CKEditor存在问题。我启用了标签的可编辑属性<a>: “JavaScript CKEDITOR.dtd.$editable.a = 1; ``` 当我双击链接时,它可以编辑,一切正常。但当我完成编辑并再次尝试编辑时,我却做不到。 ![simplescreenreco...

3 个回答更新于 2023年7月26日

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

浏览插件分类

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