GrapesJS 问题

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

找到 3,464 个问题

#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...

#49722023年3月12日作者 FaisalShaikhHA1 个回答
0 个反应

复选框特性在撤销/重做操作中未被勾选或取消勾选。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 版本 110.0.5481.177(官方构建)(arm64) 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 目前的行为是什么? 复选框特性未勾选或取消,撤销/重做时(我这边的特征值会更新)。 可在Grapesjs网页[demo](https://grapesjs.com/demo.html)上复现。 预期的行为是什么? 复选框特性应该在撤销/重做时被勾选或取消。 https://user-images.githubusercontent.com/102785785/224533486-045ae63b...

ClaudeCode

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

#49672023年3月9日作者 wyxcoder3 个回答
0 个反应

新存储不起作用

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://jsfiddle.net/1vknjLst/ 描述一下那个虫子 如何复现这个漏洞? 点击运行 预期的行为是什么? 应该会在新存储中读取并保存,控制台应该显示“正在加载中” 目前的行为是什么? 什么都没发生 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 你的代码在这里 ```行为准则 [X] 我同意遵守本项目的行为准则

artf

你必须使用插件 'plugins: [dbStoragePlugin, 'gjs-blocks-basic']'使用“autosave: false”时,你是在禁用自动保存,这意味着只有在程序调用(例如“editor.store()”)时,“Storage.store”才会被触发。没有“setStepsBeforeSave”选项,只有“stepsBeforeSave”

wyxcoder

谢谢你!这样很好用

ClaudeCode

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

#49652023年3月8日作者 RohitLad1 个回答
0 个反应

PropertyComposite 带滑块,适用于四边(左、右、右、B)。一个滑块的变动会导致其他数值重置。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 狩猎 可复制演示链接 https://codesandbox.io/s/funny-williamson-thb52d?file=/index.js 描述一下那个虫子 如何复现这个漏洞?前往 https://codesandbox.io/s/funny-williamson-thb52d?file=/index.js 预期的行为是什么? 选择默认组件,看看样式管理器。当一个滑块(例如,底部填充)移动后,其他滑块应保持在预定义或恒定值。有趣的是,如果类型是“number”而不是“slider”,它就能正常工作 目前的行为是什么? 当移动一个滑块时(例如...

ClaudeCode

谢谢你举报,@RohitLad。 关于PropertyComposite带四边滑块(左、右、右、B)的好问题。一个滑块的变动会导致其他数值重置。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('chang...

#49622023年3月7日作者 himansh-gjr1 个回答
0 个反应

文档中的链接断裂

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 任何 可复制演示链接 不 描述一下那个虫子 我相信文档中许多“配置对象”的链接仍然是指向JavaScript文件,但代码已经更新为typescript <img width=“1437” alt=“截图 2023-03-07 上午10 44 05” src=“https://user-images.githubusercontent.com/77732259/223326934-2d937ef8-b227-468e-b327-cd278add16c3.png”>行为准则 [X] 我同意遵守本项目的行为准则

ClaudeCode

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

#49472023年2月27日作者 FaisalShaikhHA4 个回答
2 个反应

撤销管理器在撤销移除操作时无法正常工作

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome - 版本 110.0.5481.100(官方构建)(arm64)可复制演示链接 https://codepen.io/faisal-praella/pen/ExeNwxJ描述一下那个虫子我添加了一个自定义的columns组件,带有编号特征名称columns,用于添加或移除子组件列。当我用该特性添加新列并撤销更改时,效果正常,但当我移除列并撤销更改时,会多加一列。这可能是因为当Grapesjs撤销移除更改时,它会附加已移除的列并还原列特征,但该列特征的更改触发了“this.listenTo(this, ”change:columns“, th...

artf

是的,撤销会触发“change:columns”,在你的情况下,你可以尝试用“editor”封装你的“updateColumns”更改。UndoManager.skip'。 “''js updateColumns() { 编辑。UndoManager.skip(() => { 你的行动 }) } ```

artf

好的,那我就关闭这个,请打开一个与复选框特性相关的新漏洞问题。

FaisalShaikhHA

谢谢你,@artf它有效,为了解决这个问题,我之前通过听“撤销命令”和“运行事件”来切换特质更改监听器,但这样感觉更干净了。 复选框特性在撤销/重做时未被勾选或取消勾选(我这边的特征值会更新)。可在Grapesjs网页[demo](https://grapesjs.com/demo.html)上复现。这里也需要帮助,再次感谢。 https://user-images.githubusercontent.com/102785785/224402423-fd04268a-896...

#49402023年2月21日作者 mani-rai2 个回答
0 个反应

销毁并重新初始化时,会出现“无法读取未定义属性(读取'get')”。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Google Chrome 版本 110.0.5481.100(官方版本)(64 位) 可复制演示链接 https://stackblitz.com/edit/js-3urscf?file=index.html,index.js 描述一下那个虫子 如何复现这个漏洞?初始化编辑器销毁编辑器再次初始化编辑器 预期的行为是什么? 使用的代码只是官方文档中的入门代码。它应该可以毫无问题地重新初始化。 目前的行为是什么? 控制台上显示多个错误。类型错误:无法读取未定义的属性(读取“get”) at o.runDefault (Editor.ts:874:28)...

artf

是的,由于某些延迟异步函数(例如StorageManager),编辑器实例预计不会立即被销毁,但这可以修复。 目前你可以通过这样做来解决这个问题: “''js setTimeout(() => { editor.destroy(); ... ```

ClaudeCode

谢谢你举报,@mani-rai。 关于销毁和重新初始化会产生“无法读取未定义属性(读作'get')”的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.l...

#49372023年2月20日作者 besart-k2 个回答
1 个反应

Block:custom 在 React 上无法使用

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 版本 110.0.5481.100(官方版本)(arm64)可复制演示链接 没有描述一下那个虫子 我试图在 React 中复制像这个例子 [Vue 块管理器](https://jsfiddle.net/artur_arseniev/xyofm1qr/)那样自定义块管理器,但“block:custom” 回调没有被调用。 如何复现这个漏洞? 把它放在初始配置中 'blockManager: { 方块:方块, 自定义:真实 }, 把这个放进 useEffect useEffect(()=>{ editor.on('block:custom',...

artf

@besart-k,你必须提供一个可复现的演示,因为如果它能和当前的Vue演示示例兼容,React中也不应该有不同。也许你用的是旧版的 Grapesjs,或者在 React 应用里做错了什么,所以在这种情况下,可复现的演示是必须的。 我决定关闭这个版本,因为演示本身使用的是最新版本,似乎对自定义方块能正常工作。

ClaudeCode

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

#49292023年2月14日作者 handhikadj4 个回答
0 个反应

标签内侧按钮被移除

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 最新动态可复制演示链接 https://codesandbox.io/s/interesting-bell-xntbtr描述一下那个虫子 如何复现这个漏洞?进入代码沙盒拖放自定义代码块。将此代码放入自定义代码编辑器中,点击保存: '''html <button 类=“btn bg-primary text-white”> <a href=“https://www.example.com/” target=“_blank”>点击我</a> </button> ```点击按钮。点击href链接时按钮应该会打开,但实际上并没有。注意到按钮标签里的...

artf

这是因为[Forms插件](https://github.com/GrapesJS/components-forms)中的[按钮实现](https://github.com/GrapesJS/components-forms/blob/6a63e9edb7b085790e90e98acf54accc5f4bd642/src/components.ts#L260),该插件只允许文本节点作为子节点。 如果你移除表单插件,你就能看到“<a>''元素(如果你愿意,也可以用自己的逻辑...

handhikadj

那么按钮的“正常”实现代码是什么? 顺便问一下,为什么你在Forms插件里让按钮那样表现?

artf

如果我没记错,主要原因是内联文本编辑和按钮元素出现问题,所以这种方法是解决常见问题最简单的方法。 我猜“正常”实现是跳过或覆盖“init”方法,但你应该考虑如何正确处理内联文本编辑。

#49222023年2月11日作者 clonefunnels2 个回答
0 个反应

使用这里提供的!重要代码会破坏背景图像和渐变。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 可复制演示链接 https://jsfiddle.net/jLgb0mv3/1/ 描述一下那个虫子 如何复现这个漏洞?...把这个代码放进编辑器: editor.on('styleable:change', (model, property) => { const value = model.getStyle()[property]; 如果 (value.indexOf('!important') === -1) { model.addStyle({ [property]: value + ' !important' }); } })...

artf

我只看到“复合”/“堆栈”样式管理器属性的问题,因为并非所有样式管理器属性都包含在样式中,所以在你的代码中,你只需要检查样式的值是否真实存在,比如说,'如果 (value && value.indexOf('!important') === -1) {...'

ClaudeCode

谢谢你举报,@clonefunnels。 关于使用这里提供的!重要代码会破坏背景图像和渐变,问题非常好。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.lo...

浏览所有主题