GrapesJS 问题

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

找到 466 个问题

🔍 components
#53462023年8月30日作者 pittleCheung3 个回答
0 个反应

删除组件而不删除其对应样式

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 最新版本的Chrome浏览器 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞? <img width=“1665” alt=“image” src=“https://github.com/GrapesJS/grapesjs/assets/114127651/657cbaf6-7e87-4702-ac7f-36c710464728”> 预期的行为是什么? 风格可能会被简化, 目前的行为是什么? 首先,我的编辑只用一页。每次切换页面,它都会用后端的页面替换当前配置。因此,当我实现公开头部和...

pittleCheung

https://github.com/GrapesJS/grapesjs/issues/1855 的扩展想法

artf

这里讲解了如何创建具有相关样式的组件 https://grapesjs.com/docs/modules/Components.html#components-css 只有在那种情况下,编辑者才会安全地删除相关的样式。

ClaudeCode

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

#53422023年8月26日作者 wsaca1 个回答
0 个反应

ScrollCanvas 不起作用

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 116.0.3 可复制演示链接 https://grapesjs.com/demo-mjml.html 描述一下那个虫子 如何复现这个漏洞?在画布上滚动到底部并选择一个组件打开层次选择画布顶部的组件,滚动功能无法使用。 预期的行为是什么? 滚动应该能用。 目前的行为是什么? 滚动不起作用。 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 你的代码在这里 scrollTop 和 scrollLeft 总是为 0,可以替换为: “''js const { scrollTop, scrollLeft } = this.ge...

ClaudeCode

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

#53392023年8月26日作者 rozek2 个回答
0 个反应

DragMode:“absolute” 表现怪异

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 版本 1.56.20 Chromium:115.0.5790.171(Offizieller 构建)(arm64)可复制演示链接 没有描述一下那个虫子 我希望编辑器中的组件可以通过拖动来移动。经过一些研究,我发现 “JavaScript let Editor = grapesjs.init({ dragMode:“绝对”, ``` 实现此功能是必要的。至少,我的组件现在可以移动了......但由于编辑器使用包裹器包裹实际组件视图,包装器位置可能是正确的,但视图位置是相对于包装器测量的,这是错误的: <img width=“284” alt=“moving...

rozek

抱歉——这是我这边的问题,在编辑器里才显现出来——抱歉打扰了!

ClaudeCode

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

#53342023年8月24日作者 DreamCloudProject4 个回答
1 个反应

在画布中选择自定义组件类型无法正常工作

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome、Opera、Edge 等 可复制演示链接 https://jsfiddle.net/crszh0jo/6/ 描述一下那个虫子 我正在尝试让它像这里描述的那样工作[[问题] Canvas #951](https://github.com/GrapesJS/grapesjs/issues/951)无法选择自定义组件,但还是没成功。 我怎样才能让画布中的选择功能和图层管理器的选择功能一样?因为这里描述的解决方案对我来说不适用。我需要允许用户从画布中选择自定义组件,而不是每次都打开图层管理器。 行为准则 [X] 我同意遵守本项目的行为准则

DreamCloudProject

@artf 是的,你说得对。我阻止了点击传播,所以编辑器无法接收点击事件,因此无法执行选择元素的逻辑。 我尝试通过在组件内将“e.stopPropagation()”替换为“e.preventDefault()”,将点击传播设置为仅对当前元素进行,现在编辑器中的元素选择逻辑正常了。问题似乎已经解决了。谢谢!

DreamCloudProject

https://github.com/GrapesJS/grapesjs/assets/7961936/12180b41-4c29-489d-9bcd-1ea025a96a8f 这个例子展示了它在我的编辑器中的工作原理。

yatoogamii

你好@DreamCloudProject,看起来你的组件MSC头锁住了。这是一个属性,允许从图层点击组件,但不能从Canva本身点击 你能分享或验证你的组件定义,并检查“锁定”属性是否设置为true吗?

#53282023年8月22日作者 sdimitrenco2 个回答
0 个反应

移除RTE焦点后可编辑文本,返回之前的内容状态。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://jsfiddle.net/sdimitrenco/wao1rh0q/30/ 描述一下那个虫子 那是我的组件结构 如果我在文本编辑器中更改span标签中的文本,然后移除该词的焦点,它会返回文本的前一个状态。组件的结构看起来正常,是链接,但内容在图片和文字中,都放在span标签里。 演示 ![图片](https://github.com/GrapesJS/grapesjs/assets/39157717/1a21766a-d945-4d0b-9360-13390722c5dd) 现场演出 https://jsfiddl...

artf

你不应该在文本区间里有“内容”,事实上,如果你用“components”: “[email protected]”来替代它,它会正常工作。

ClaudeCode

谢谢你举报,@sdimitrenco。 移除RTE焦点后可编辑文本的问题,返回了之前的内容状态。似乎是竞赛条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeSandbox)——这有...

#53192023年8月18日作者 AFriboulet-ii2 个回答
0 个反应

撤销不会刷新组件上的类

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome V116.0.5845.96 可复制演示链接 https://jsfiddle.net/AdrienFriboulet/npdkshaf/8/ 描述一下那个虫子 https://github.com/GrapesJS/grapesjs/assets/128728949/e85b65c4-53ad-43d0-9f5f-74dc0a181dd0 如何复现这个漏洞?开放提供的小提琴 [此处](https://jsfiddle.net/AdrienFriboulet/npdkshaf/8/)删除一个组成部分的“段落”选择之前的组件,下放并点击工...

artf

谢谢@AFriboulet-ii,我会在下次发布时修复。

ClaudeCode

谢谢你举报,@AFriboulet-ii。 关于Undo不会在组件上刷新类,这个问题问得很好。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethin...

#53162023年8月17日作者 BenKhz3 个回答
0 个反应

编辑者未订阅选择器:移除

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome v115.0.5790.170可复制演示链接 https://jsfiddle.net/BenKhz/yfwqc6mu/1/ 参考[这里的文档](https://grapesjs.com/docs/api/selector_manager.html#available-events)描述一下那个虫子开放式提供的小提琴 [此处](https://jsfiddle.net/BenKhz/yfwqc6mu/1/)在 Canvas 上选择一个组件,并通过选择器管理器添加类。(“添加”和“更新”事件将被捕获)从类管理器中移除一个类'editor.on...

artf

你好,@BenKhz之所以这样,是因为“selector*”事件与全局Selectors容器有关(当你从组件中移除选择器时,Selector本身仍然存在,因为它可以在其他地方使用),如果你想跟踪组件选择器的变化,必须使用'component:update:classes'事件

BenKhz

啊!我误会了。谢谢你的澄清。继续加油!

ClaudeCode

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

#53052023年8月13日作者 rajevar2 个回答
0 个反应

“Component:add” 事件在组件移动时触发

葡萄JS版本 0.21.4[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 版本 113.0.5672.63可复制演示链接 https://jsfiddle.net/szLp8h4n/11/描述一下那个虫子 如何复现这个漏洞? 在页面上移动任何文本组件。 警报将会显示。 可能是倒退。 https://github.com/GrapesJS/grapesjs/issues/868 没看到重新开启bug的选项,所以新建一个。 预期的行为是什么? 警报只会在向画布添加新组件时显示 目前的行为是什么? 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 你的代码在这里 ```行为准则[X] 我同...

artf

你好@rajevar我觉得你是在找“component:create”事件,因为“component:add”是正常工作的(比如用来跟踪某个组件内的任何新移动)

ClaudeCode

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

#52972023年8月10日作者 FahemAhmad2 个回答
0 个反应

GetJS 无法工作

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 版本 115.0.5790.171(官方构建)(64位)可复制演示链接 https://codesandbox.io/s/1r0w2pk1vl?file=/index.html描述一下那个虫子 如何复现这个漏洞?...添加此表单类型和表单块 预期的行为是什么? ...在 getJS 中,我希望编辑器中有相关的 js 代码,我不确定我的期望是否正确,如果不正确,请告诉我该如何实现 目前的行为是什么? ...getJS({component}) 返回空字符串 '' 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 你的代码在这里 Compon...

artf

'getJs' 返回的是你组件模型的 JS(你会放在 'model.defaults.script' 里的那个),而不是组件视图。 请仔细阅读 [组件与JS](https://grapesjs.com/docs/modules/Components-js.html)

ClaudeCode

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

#52802023年8月7日作者 fluke7772 个回答
0 个反应

视图中的事件处理程序未绑定到组件

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 版本 115.0.5790.114 可复制演示链接 https://jsfiddle.net/mcraf3se/5/ 描述一下那个虫子 你好,我刚开始用GrapesJS,所以很可能我误解了某些根本性的问题。 我在为自定义组件视图设置事件处理程序时遇到了困难。 如何复现这个漏洞? 在链接的JS小提琴中。将我的分区拖拽到画布上点击其中(应该有带有“stuff”的div)。 预期的行为是什么? 根据文档[这里](https://grapesjs.com/docs/modules/Components.html#define-custom-co...

artf

这里的错误是用了箭头函数,只需用 'clickOnElement() {' 来替代它

ClaudeCode

谢谢你举报,@fluke777。 关于事件处理程序在视图中但不绑定到组件,这个问题很棒。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something c...

浏览所有主题