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

GrapesJS 问题

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

找到 220 个问题

🔍 canvas
#52452023年7月16日作者 riteshdalal4 个回答
0 个反应
提问组件缺陷画布typescript

带有 editable：false 的组件内容仍然是可编辑的

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 114.0.5735.198 可复制演示链接 https://jsfiddle.net/riteshdalal/obnx7sg3/22/ 描述一下那个虫子 如何复现这个漏洞？在模型中创建一个带有 editable：false 的组件将组件放置在画布上 预期的行为是什么？ 不可编辑组件的内容不应被GJS解析 目前的行为是什么？ 不可编辑组件的内容会被解析并可编辑 请查看附带的演示链接行为准则 [X] 我同意遵守本项目的行为准则

artf

“可编辑”属性默认没有意义，只有其他扩展组件如“文本”或“图像”在内部使用。

riteshdalal

@artf我们如何创建一个组件，使 GJS 不解析这些子节点。

riteshdalal

“可编辑”属性默认没有含义，只被其他扩展组件如“文本”或“图像”内部使用。 这在旧版GJS上是有效的。0.21.3 版本就完全不工作了

查看详情
#52412023年7月14日作者 hanzuken2 个回答
0 个反应
提问组件缺陷画布

在缩放画布中移动时，元素的绝对位置与光标位置不同

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 114.0.5735.199（官方构建）（64 位） 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？启用绝对拖拽模式 editor.editor.set('dmode', 'absolute')将变焦调至50 editor.Canvas.setZoom(50)选择一个组件。按下工具栏上的移动按钮 预期的行为是什么？ 光标与元素之间的距离与画布缩放为100时相同。 目前的行为是什么？ 光标与元素之间的距离相对较远。 行为准则 [X] 我同意遵守本项目的行为...

artf

与绝对模式相关的问题在此 https://github.com/GrapesJS/grapesjs/issues/3770

GJS Helper

你准确指出了GrapesJS中与绝对位置和画布缩放相关的常见问题。这确实是一个bug，拖拽操作的差值计算没有考虑画布当前的缩放水平，导致光标位置和元素实际移动之间存在差异。 根本原因解释 当dmode设置为absolute时，GrapesJS 利用 top 和 left CSS 属性来定位组件。在拖动操作过程中，编辑器根据屏幕像素计算鼠标位置的变化（deltaX， deltaY）。然后尝试将这些差异直接应用于组件的 left 和 top 样式值，这些值以画布像素为单位。 问...

查看详情
#52292023年7月10日作者 joukhar4 个回答
1 个反应
提问缺陷style-manager组件画布

内容为“null”的TextNode被渲染为“null”，而不是空白

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 版本 114.0.5735.199（官方构建）（64位）可复制演示链接 无描述一下那个虫子 如何复现这个漏洞？丢弃该组件 <div class=\"flex items-center rounded shadow-md overflow-hidden max-w-xl relative dark:bg-gray-900 dark:text-gray-100\"> <div class=\"self-stretch flex items-center px-3 flex-shrink-0 dark:bg-gray-700 dark:...

artf

大概是在八月的第一周

artf

你好@joukhar最新版本是不是也这样？ 如果我用你的 JSON 示例，我能在导出代码中看到“null”（这应该可以修复），但我无法用你的 HTML 示例生成带有 “null” 的 “textnode”，你能为这个用例创建一个可复现的演示吗？ 不确定在哪种情况下textnode可能是“null”，但我们可以肯定能防止这种情况......

joukhar

谢谢你的重玩，如果你需要试玩版，请给我点时间，等我做完会再评论 问题只在存储和加载时出现，但第一次丢弃组件时却没有反应

查看详情
#51842023年6月14日作者 acantepie2 个回答
1 个反应
提问组件缺陷画布style-manager

Ckeditor组件工具栏未正确刷新

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 版本 113.0.5672.126（Build officiel）（64 位）可复制演示链接 https://grapesjs.com/demo-newsletter-editor.html描述一下那个虫子 如何复现这个漏洞？访问演示网站：https://grapesjs.com/demo-newsletter-editor.html清空画布并添加文字块两次： https://github.com/GrapesJS/grapesjs/assets/12775815/b6bf6a1a-6907-4054-a93b-f5939efb353f =>...

artf

谢谢@acantepie请在[proper repo]（https://github.com/GrapesJS/ckeditor）中打开问题，因为这不是核心相关的问题

GJS Helper

你遇到的问题是，GrapesJS 的富文本编辑器（RTE）工具栏在切换多个文本组件时无法正确刷新状态（例如加粗、斜体按钮），这是一个已知的同步问题。这通常是因为浏览器内部选择状态或GrapesJS RTE 的更新机制无法可靠地重新评估新选中的contenteditable元素的激活命令。 根本原因 GrapesJS 使用一个 RichTextEditor 模块（通过 editor.RichTextEditor访问）来管理 RTE 工具栏。该模块监听document上的sel...

查看详情
#51642023年6月6日作者 shomeel2 个回答
0 个反应
提问组件缺陷画布typescript

默认情况下，组件是用我的演示项目中的表格创建的，但演示用flex属性来创建组件

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 112.0.5615.49（官方构建）（x86_64） 可复制演示链接 https://jsfiddle.net/shomeelconovo/k7L2rthg/1/ 描述一下那个虫子 我需要一些关于 grapes.js的帮助。我创建了一个项目，每当我在Canvas中放置一个组件时，默认每个组件都有display ： table属性。不过我在 grapes.js 官方演示中尝试过，每个元素在演示中默认都有display ： flex。可能出了什么问题？为什么本地项目默认有不同的属性？ 行为准则 [X] 我同意遵守本项目的行为准则

artf

https://github.com/GrapesJS/grapesjs/discussions/5163#discussioncomment-6162516

GJS Helper

你GrapesJS项目和官方演示默认display属性的差异，源于GrapesJS画布iframe中加载的CSS，而不是因为GrapesJS本身普遍强制执行display: table或display: flex。GrapesJS提供了一个干净的起点，最终渲染取决于你（或演示）注入到编辑器画布中的基础CSS。 根本原因 您的本地项目： 您的本地项目很可能包含一个全局 CSS 文件或 CSS 框架，默认display: table某些通用元素（如 div 或 section）...

查看详情
#51412023年5月24日作者 rajevar3 个回答
1 个反应
提问组件缺陷画布typescript

组件在更新性状时重置属性值（仅首次）

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 113.0.5672.63 可复制演示链接 https://jsfiddle.net/rajevar/zLs8q97f/4/ 描述一下那个虫子 这是针对本次讨论 https://github.com/GrapesJS/grapesjs/discussions/4759 如何复现这个漏洞？ https://jsfiddle.net/rajevar/zLs8q97f/4/从块中选择Text CAT：Basic组件，拖曳到画布。HTML 步骤1之后的代码 <div class="text-primary" id="ixci">...

rajevar

抱歉，是我错了。我没用最新的。

artf

@rajevar我无法用最新版本复现，你确定你用的是最新版本吗？

GJS Helper

你发现了GrapesJS中常见的与组件属性管理方式相关的同步问题，尤其是在通过样式管理器修改类，然后其他特征（如id或title）首次更新时。这种行为确实可能导致类意外丢失。 根本原因解释 问题的核心在于组件DOM元素上的实际class属性与组件内部attributes模型属性之间的暂时不同步。以下是分解： 初始组件状态： 当组件首次添加到画布时，其初始属性（包括class和id）会同时设置在DOM元素和组件的内部attributes模型属性上。 通过样式管理器进行类修改：...

查看详情
#50862023年5月2日作者 SagarMaria3 个回答
0 个反应
提问style-manager组件缺陷画布

Style：property：update 和 Property onChange 都被过度触发

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 112.0.5615.137（官方版本） 可复制演示链接 https://jsfiddle.net/SagarMaria/sunygp2f/3/ 描述一下那个虫子 如何复现这个漏洞？在 jsfiddle 中只需点击“Hello World”组件。 观察大量控制台日志。点击画布上其他地方，重复。 预期的行为是什么？ style:property:update 应该只在所选组件的样式属性更改时触发 目前的行为是什么？ style:property:update 事件反而会多次触发，即使只是选择了某个组件 如果需要执行某些代码...

artf

该行为是正确的，因为“style：property：update”会在风格管理器[属性]（https://grapesjs.com/docs/api/property.html#property）的任何更新时触发（不仅仅是其值）。所以针对你的具体情况，你需要以这种方式更新回调 “''js Editor.ON（'style：property：update'， （{ property， to }） => { 检查房产名称，以及更新是否与价值相关 如果 （property.get...

SagarMaria

你好，@artf感谢你的快速回复，但实际上问题的一部分仍然是，即使你做了更改，比如点击“中心”对齐无线电选项和你建议的 if 语句，后续选择该组件时，'style：property：update' 值仍然会被 loging 出去，'property' 和 'to' 仍是现有值（即使你不改动，只选择组件）。下面有个简短的视频，我也根据你的建议更新了 jsfiddle。 有没有办法直接监听收音机值的变化，或者在样式管理器里点击不同的收音机选项？我也尝试使用属性的“onChang...

GJS Helper

谢谢你举报，@SagarMaria。 关于Style：property：update和Property onChange过度触发的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'，...

查看详情
#50832023年4月29日作者 DanavsSite4 个回答
0 个反应
提问style-manager缺陷画布typescript

方块不能拖到画布上

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 陶瑞 可复制演示链接 描述一下那个虫子 如何复现这个漏洞？... 预期的行为是什么？ ... 目前的行为是什么？** ... 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则 [X] 我同意遵守本项目的行为准则

DanavsSite

![2023-04-29 143431-Greenshot]（https://user-images.githubusercontent.com/109663198/235335067-0d202a20-e26e-4fce-8d4d-168504175239.png）

DanavsSite

我刚发现是因为 WebView2。Webview2 的支持??!

artf

我觉得这更多是因为Tauri配置的问题，而不是GrapesJS，因为我们用的是原生的HTML5拖放功能

查看详情
#49982023年3月22日作者 glaprida4 个回答
0 个反应
提问缺陷画布typescript

ShowOffsetsSelected not working

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chome v111 可复制演示链接 https://codepen.io/glaprida/pen/YzOJOGq 描述一下那个虫子 如何复现这个漏洞？打开codepen链接。拖拽任意基础块到画布上，并加以边距或填充。你会发现 showOffsets 按预期工作（当鼠标悬停未选中的元素时）选择该元素会隐藏所有偏移量。即使你悬停它，也不会显示所选元素的偏移量。（showOffsetsSelected 设置为 true） 预期的行为是什么？ 以便能够看到所选元素的偏移量。 目前的行为是什么？ 它没有展示他们 行为准则 [x] 我同意遵守本项目...

glaprida

你好，我看到现在即使选中了元素，悬停时也能正常工作（之前只对未被选中的元素有效） ...但它只在悬停时显示偏移量（我以为“showOffsetsSelected”即使没有悬停也会显示所选元素的偏移量） 这是本意的行为吗？ 有什么建议能让我在选中元素没有被悬停时看到它的偏移量吗？ 非常感谢！

artf

是的，目前这正是它的设计目的。也许有一天我们会重新考虑，让它更可定制（比如在Canvas上扩展/创建样式处理器的能力）。

glaprida

你好，抱歉一直坚持......但你能想到有什么办法能实现这个目标吗？ 我需要的是显示所选元素的偏移量，无论它是否悬停。

查看详情
#49912023年3月21日作者 glaprida1 个回答
0 个反应
提问缺陷画布typescript

拖拽display：grid元素时出现错误的占位标记

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome v111可复制演示链接 https://codepen.io/glaprida/pen/eYLLXbQ描述一下那个虫子 如何复现这个漏洞？访问codepen链接 https://codepen.io/glaprida/pen/eYLLXbQ拖拽一个部分到画布上再拖一个当你在前两个中间拖动第三个时，你会看到拖拽占位符是竖直的，而不是横的 第二部分也有类似情况，只是第三部分更明显。 第一段（身体空时）则不会发生这种情况。 预期的行为是什么？ 需要一个横向占位符 目前的行为是什么？ 它显示了一个竖直的占位符 问题和 https://gi...

GJSBlock

谢谢你举报，@glaprida。 关于拖拽display：grid元素时使用错误占位标记的问题非常好。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'some...

查看详情

浏览所有主题