GrapesJS 问题

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

找到 877 个问题

🔍 question
#63322024年11月26日作者 tim-prom1 个回答
0 个反应

IMG SRCset 404 导致无限请求循环

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v131可复制演示链接 https://jsfiddle.net/cmq9end2/1/描述一下那个虫子 如何复现这个漏洞?在 canvas 中添加一个 img,但 srcset 里的 URL 是无效的检查Chrome开发控制台的网络标签页——资产请求正确返回了404,但浏览器却不断无限循环发送请求。 <img width=“646” alt=“截图 2024-11-26 上午9:40 17” src=“https://github.com/user-attachments/assets/e737d681-a0e0-4155-80ee-e8...

ClaudeCode

谢谢你举报,@tim-prom。 关于 img srcset 404 会导致无限请求循环 的问题非常好。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('som...

#63242024年11月22日作者 badiuciprian4 个回答
2 个反应

Sorter.setDragHelper 不是块拖拉的函数

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 131.0.6778.86可复制演示链接 https://jsfiddle.net/badiuciprian/qe28obhr/1/描述一下那个虫子 如何复现这个漏洞?尝试将任意方块拖到画布上 预期的行为是什么? 组件被渲染到画布上 目前的行为是什么? 什么都没发生,浏览器控制台显示错误: BlockView.ts:103 未捕获类型错误:a.setDragHelper 不是函数 在o.startDrag(BlockView.ts:103:12) 在 HTMLDivElement.t (cash-dom.ts:765:36) 在我的真实应用中,我会收到“...

mohamedsalem401

我成功复现了它。这只发生在“nativeDnD: false”上。这可能让块视图使用旧排序器的API。我会尝试解决这个问题。

artf

@mohamedsalem401你能帮我检查一下这个吗?

badiuciprian

谢谢你帮我处理这件事。我会关注更新。

#63182024年11月20日作者 tonypapousek4 个回答
3 个反应

无法在Block media svg中使用透明填充

葡萄JS版本[X] 我确认使用最新版本的GrapesJS本期提交时为“[email protected]”你用的是什么浏览器? Firefox 132,Chrome 131可复制演示链接 https://jsfiddle.net/x54f9v68/1/描述一下那个虫子 如何复现这个漏洞?添加自定义块,将“media”属性设置为带有透明填充的SVG查看方块标签,然后 注意填充会自动设置为“currentColor” 预期的行为是什么? 填充应该是透明的 ![截图 2024-11-20 10 38 00](https://github.com/user-attachments/assets/4e1b546c-9b65-47ec-bafe-...

samex

我认为这取决于具体使用的SVG。如果你检查其他SVG图标,你会发现它们主标签上没有填充属性(内联),<svg>而是在子<path>标签上。通过在该SVG的两个元素上设置fill=“none”属性<path>,图标应该会正确显示。希望这些建议能帮你解决这个问题!

tonypapousek

@samex 指定“fill=”none“后解决了问题,谢谢!这肯定能让我的自定义内容更可预测地工作。 除此之外,我觉得主要的痛点是尝试使用第三方SVG(比如“反应图标”)或所见即所得输出,但这些输出没有明确设置“填充”属性。考虑到这些用例,除非维护者希望关闭,否则我暂时会保持这个漏洞开放。

artf

是的,我会关闭这个,因为它和核心本身关系不大,但谢谢你指出

#63082024年11月13日作者 maxming23333 个回答
0 个反应

React 自定义界面“模态”无法显示“代码”

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 130.0.6723.117 可复制演示链接 https://stackblitz.com/edit/grapesjs-react-custom-ui?file=src%2FApp.tsx 描述一下那个虫子 如何复现这个漏洞?开放 https://grapesjs-react-custom-ui.stackblitz.io/点击此按钮 <img width=“537” alt=“image” src=“https://github.com/user-attachments/assets/35d33966-60b6-4a88-96c6-0c260d52...

danstarns

你好@maxming2333,试着点击文本框中高亮区域内的任意位置,对我来说它加载代码...... https://github.com/user-attachments/assets/89f61dc6-466a-476a-b437-d0f8ae51c7ef

maxming2333

嗨@maxming2333,试着点击文本框中高亮区域内的任意位置,对我来说它会加载代码......Screen.Recording.2024-11-19.at.23.21.03.mov 是的,确实可以在点击弹窗区域后显示,但应该在弹窗打开后立即显示,而不是点击后。

ClaudeCode

谢谢你举报,@maxming2333。 关于React自定义UI“模态”无法显示“代码”的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('someth...

#63072024年11月12日作者 maxming23331 个回答
0 个反应

MJML 组件 'tagUpdated' 将使“悬停”变得不可能

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 130.0.6723.117 可复制演示链接 https://grapesjs.com/demo-mjml 描述一下那个虫子 如何复现这个漏洞?随机选择一个组件,比如演示页面的第二个“mj-section”在编辑器中将该组件悬停(你可以看到它可以悬停)找到该组件的ID,并执行“编辑器”。Components.getById('iv19a').tagUpdated()'再次尝试悬停该组件,发现无法悬停。 预期的行为是什么? 没有报错,你可以继续悬停 目前的行为是什么? 错误会被报告且无法悬停 <img width=“668” alt=“image” s...

ClaudeCode

谢谢你举报,@maxming2333。 关于 MJML 组件 'tagUpdated' 会让它无法“悬停” 的问题,这个问题很棒。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () =>...

#62962024年11月5日作者 maneeshp972 个回答
0 个反应

自定义的 React 组件会被包裹在一个 div 里

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Arc v1.61.1 可复制演示链接 https://codesandbox.io/s/grapesjs-react-components-n6sff 描述一下那个虫子 @artf首先感谢你提供这个了不起的图书馆。我当时试图在 Grapesjs 内创建自定义 React 组件,偶然看到了之前报告的一个与 React 集成相关的问题中的沙盒链接。 [https://codesandbox.io/s/grapesjs-react-components-n6sff] 我通过引用沙盒后成功让自定义 React 组件运行,但有一个问题依然存在。每当自定义 R...

artf

是的,从演示的角度来看这是正常的。 你可以玩代码找到解决办法,但我会关闭这个,因为它不是核心漏洞。

ClaudeCode

谢谢你举报,@maneeshp97。 自定义 react 组件被包裹在 div 里 的问题似乎是竞态条件或状态管理时序的问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有助于...

#62902024年11月4日作者 svex992 个回答
1 个反应

从项目数据加载数据源时,数据源会被忽略

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefix v132.0 可复制演示链接 https://jsfiddle.net/skdegqun/4/ 描述一下那个虫子 如何复现这个漏洞?运行小提琴的日志可以看出,编辑器初始化时传递的数据源未被加载。 预期的行为是什么? 将项目数据源加载到编辑器数据源管理器(“editor.数据来源) 目前的行为是什么? 当编辑器加载项目数据时,数据源并未被加载,而是数据源列表是空的。 这个问题既在编辑器初始化时传递项目数据,也发生在从远程存储加载项目数据时(在小提琴里重现起来稍微难一些,但希望修复第一个情况能解决)。我最初是通过从远程存储加载数据才发现这...

artf

你需要等编辑准备好再做。 “''js editor.onReady(() => { console.log(“数据来源总数应为1:”,编辑。DataSources.getAll().length) console.log('test-source should exist:', editor.DataSources.get(“test-source”)); }); ```

ClaudeCode

谢谢你举报,@svex99。 关于从项目数据加载数据时数据源被忽略的好问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed...

#62812024年10月30日作者 sumasal3 个回答
1 个反应

图层管理器不允许在同一层级重新排序。只有在顶部(正下方)的旧版本(例如:0.21.8)上方才允许嵌套。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 最新的Chrome、Firefox、Edge 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 如何复现这个漏洞?在图层管理器中拖动一个组件,尝试将其置于本体下方的其他物品之间不允许。允许筑巢 预期的行为是什么? ...嵌套和重新排序都应被启用 目前的行为是什么? ...顶层仅启用嵌套行为准则 [X] 我同意遵守本项目的行为准则

artf

下次版本会修复。 感谢@sumasal的报告,也感谢@mohamedsalem401的修复 🙇 ♂️

sumasal

期名被删减了。我的意思是,它似乎能在较旧版本如0.21.8及以下运行

ClaudeCode

谢谢你举报,@sumasal。 关于图层管理器不允许在同一层重新排序的建议很棒。只有在顶部(正下方)的旧版本(例如:0.21.8!)上方才允许嵌套。虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法:* 听取“selector:add”以获取CSS选择器更改 使用“selecto...

#62712024年10月25日作者 padcom4 个回答
1 个反应

在最新的Firefox上,组件拖放功能无法使用

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Linux和Mac上的Firefox 131.0(64位) 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 如何复现这个漏洞?开始拖动“悬停我”按钮尽量把它放在“所有文本块都可以轻松编辑......”的上面。 预期的行为是什么?按钮可以随处放置图层管理器可用于重新组织元素 目前的行为是什么?按钮只能在容器开头放置图层管理器内的拖拽也有同样的限制行为准则 [X] 我同意遵守本项目的行为准则

padcom

你们太棒了!正是时候,正好及时:)我今天下午有个演讲,现在我也能演示它在Firefox上的工作了!

padcom

我已经追踪到Firefox版本109.0的重大变更。这是第一个有问题的。108.0.2版本运行良好。希望这些信息对你有帮助。

padcom

我也测试了2024-10-24-21-16-15-mozilla-central的133.0a1,问题依然存在。

#62692024年10月25日作者 bt-mkt4 个回答
3 个反应

组件模型和视图每次被拖拽到Canvas中所有可以放置的组件时都会加载

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 130.0.6723.59(官方版本)(arm64) 可复制演示链接 https://codepen.io/btmkt/pen/QWeOJRB?editors=1111 描述一下那个虫子 如何复现这个漏洞?打开控制台。在画布内放置多个组件(例如用三列方便复现)。将“额外”类别末尾添加的“测试-合成”组件拖拽到新增组件上。 预期的行为是什么? 组件“模型”和“视图”初始化事件(至少不确定是否有其他事件)应该只在将组件放入画布时触发,而不是每次拖动到可丢弃组件上方时触发。 目前的行为是什么? 组件的“模型”和“视图”初始化事件每次拖动...

artf

@mohamedsalem401这很可能是因为编辑器太肤浅了。 我觉得利用canMove中的“临时”选项(我们已经用它跳过部分动作)是合理的。你怎么说? “''js const wrapper = this.getShallowWrapper(); srcModel = wrapper?.附录(来源,{ 临时:真实})[0] ||无效; ```

mohamedsalem401

@artf 是的,我怀疑这和“浅层编辑器”有关。希望临时方案能奏效,然后我再开永久居民申请

bt-mkt

@mohamedsalem401这很可能是因为编辑器太浅了。我觉得利用canMove中的“临时”选项(我们已经用它跳过部分动作)是合理的。你怎么说?“''jsconst 包装器 = this.getShallowWrapper();srcModel = wrapper?.附录(来源,{ 临时:真实})[0] ||无效;``` 你好,@artf, 上面看到的改动(我看到已经实现了)似乎并没有解决我遇到的问题。它和0.22.1版本一样。 我已经把手写笔升级到了0.22.3(ht...

浏览所有主题