GrapesJS 问题

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

找到 220 个问题

🔍 canvas
#52452023年7月16日作者 riteshdalal4 个回答
0 个反应

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

葡萄JS版本 [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 个反应

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

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

artf

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

ClaudeCode

谢谢你举报,@hanzuken。 关于元素绝对位置和光标位置在缩放画布中移动时不同的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something...

#52292023年7月10日作者 joukhar4 个回答
1 个反应

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

葡萄JS版本[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:text...

artf

大概是在八月的第一周

artf

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

joukhar

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

#51842023年6月14日作者 acantepie2 个回答
1 个反应

Ckeditor组件工具栏未正确刷新

葡萄JS版本[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)中打开问题,因为这不是核心相关的问题

ClaudeCode

谢谢你举报,@acantepie。 关于ckeditor组件工具栏没有正确刷新的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somet...

#51642023年6月6日作者 shomeel2 个回答
0 个反应

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

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

artf

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

ClaudeCode

谢谢你举报,@shomeel。 默认组件是用我的演示项目中的表创建的,但演示用flex属性创建组件的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)...

#51412023年5月24日作者 rajevar3 个回答
1 个反应

组件在更新性状时重置属性值(仅首次)

葡萄JS版本 [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组件,拖曳到画布。 步骤1之后的代码2. HTML '<div class=“text-primary” id=“ixci”>将...

rajevar

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

artf

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

ClaudeCode

谢谢你举报,@rajevar。 关于组件在更新特质时重置属性值(仅首次)的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something chan...

#50862023年5月2日作者 SagarMaria3 个回答
0 个反应

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

葡萄JS版本 [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...

ClaudeCode

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

#50832023年4月29日作者 DanavsSite4 个回答
0 个反应

方块不能拖到画布上

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 陶瑞 可复制演示链接 描述一下那个虫子 如何复现这个漏洞?... 预期的行为是什么? ... 目前的行为是什么?** ... 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js “使用客户端” import { useEffect, useRef, useState } from “react” import { usePathname, useSearchParams } from “next/navigation” 从 “@/atoms/projects” 导入 { Project, ProjectsAtom } import {...

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 个反应

ShowOffsetsSelected 不工作

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

glaprida

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

artf

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

glaprida

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

#49912023年3月21日作者 glaprida1 个回答
0 个反应

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

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

ClaudeCode

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

浏览所有主题