GrapesJS 问题

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

找到 466 个问题

🔍 components
#62632024年10月24日作者 yashvi20264 个回答
1 个反应

重复链接通过RTE添加

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 铬可复制演示链接 https://codepen.io/Harshsne/pen/xxoOyXO描述一下那个虫子 如何复现这个漏洞?使用 RTE 添加词语链接,添加链接组件现在在链接组件后输入一个不留空格的词,再次选择该词,添加链接。添加后,点击文本框外。 预期的行为是什么? 第二个新增链接应包裹在第一个链接和文本上。 目前的行为是什么? 新增了两链接组件。 代码 var URL = window.prompt('输入链接链接的URL:'); rte.insertHTML('<a class=“link” href=${url}>${rte.select...

sirbeagle

点燃——唯一的坏处是我们可能永远不知道最终的修复结果。 @artf - 我觉得我们可以结束这个问题了。

sirbeagle

我已经玩了不少,能在@yashvi2026提供的Codepen上重现出这个错误。我大多数情况下的繁殖步骤非常相似: 在文本框中输入两个单词,中间有许多空格。 双击单词或用鼠标手动选择单词,选中第一个单词 使用自定义RTE添加链接 跳出框框点击 在现有文本中的链接后双击返回 在链接后高亮单词,并用鼠标将高亮扩展为包含第一个链接的首字母 使用 RTE 添加另一个链接 点击文本框外 然而,我在开发环境中无法复现这种效果。经过多次反复试验,我发现Codepen使用的是GrapesJ...

yashvi2026

是的,升级到最新版本后,这个问题就不出现了。

#62602024年10月24日作者 hr12012 个回答
0 个反应

当我在组件中使用 component:clone 时出现错误

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Microsoft Edge 130.0.2849.46可复制演示链接 https://jsfiddle.net/uwybfd98/描述一下那个虫子 如何复现这个漏洞?选择旋转木马组件点击图片右上角或左下角的空格并选择 div;克隆二次 预期的行为是什么? 克隆只触发一次 目前的行为是什么? 它递归,导致卡壳 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js onRender({ el, model }) { model.getChildAt(0).forEachChild(child => { child.on('component:c...

artf

@hr1201 onRender可以多次触发,如果你不好好清理,就绝不应该在那里附加监听器。 你的逻辑也完全是模型相关的,所以它不应该出现在视图里,只需在“model.init”方法中移动代码

ClaudeCode

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

#62502024年10月23日作者 maxming23332 个回答
0 个反应

克隆页面提示“将循环结构转换为 JSON”

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 129.0.6668.101可复制演示链接 https://grapesjs.com/demo描述一下那个虫子 如何复现这个漏洞? 开放 https://grapesjs.com/demo 在 DevTools 中运行这个脚本: “''js const page = 编辑。Pages.getSelected(); const component = page?.getMainComponent()?clone(); 编辑。Pages.add({ 名称:“11111”, 组成部分, }, { 选择:真, }); TypeError:将循环结构...

maxming2333

除了上述方法,还有其他复制页面的方法吗?

ClaudeCode

谢谢你举报,@maxming2333。 关于Clone页面提示“将循环结构转换为JSON”,这个问题非常好。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('somethin...

#62112024年10月11日作者 jlafosse4 个回答
0 个反应

递归过多

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Firefox 131.0.2 可复制演示链接 https://grapesjs.com/demo-newsletter-editor.html 描述一下那个虫子 如何复现这个漏洞?进入 grapesjs 演示,然后导入以下 html: '''html <div class=“foobar”> <img data-gjs-locked=“true” width=“500” src=“https://cdn.pixabay.com/photo/2021/12/16/15/26/forest-68747171280.jpg”> </div> 我怀疑问题来...

artf

嘿,@jlafosse谢谢你的报告。 我不认为最新版本会有这个问题: <img width=“123” alt=“截图 2024-10-21 19 00 04” src=“https://github.com/user-attachments/assets/ff074a31-cd19-4547-bb27-596c92e16d64”> 你能再试着再检查一次吗?

jlafosse

果然,这似乎解决了问题!谢谢!

artf

🙌 那就关门了,谢谢 🙇 ♂️

#62022024年10月9日作者 klipto-inc2 个回答
0 个反应

Javascript CDN 在 Grapejs Canvas 上无法使用

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 129 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 const newEditor = grapesjs.init({ fromElement: true, // 允许HTML中的组件 容器:“#editor”, 画布:{ 剧本:[ “https://cdn.jsdelivr.net/npm/[email protected]/dist/preline.min.js”, ], }, 高度:“100VH”, 插件:[ gjsPreset网页, GjsBlockBasic, gjsForms, pluginTooltip...

artf

@klipto-inc,请制作带有正确且可复现的实时演示的错误报告

ClaudeCode

感谢你报告,@klipto-inc。 Javascript CDN 在 Grapejs Canvas 上无法工作的问题似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时,导致状态不一致。 尝试什么: 添加setTimeout包装器以确保DOM已稳定: “JavaScript setTimeout(() => { 你在这里的行动 }, 0); 推荐的下一步步骤: 如果还没测试过,请用最新的GrapesJS版本测试 提供最小可重复的示例(CodeS...

#61522024年9月18日作者 stpp24 个回答
1 个反应

通过自定义代码添加的CSS在移除自定义代码组件后依然存在

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 任何 可复制演示链接 https://grapesjs.com/demo 描述一下那个虫子 如何复现这个漏洞?添加带有HTML + CSS的自定义代码组件删除自定义代码组件。 预期的行为是什么? 所有代码都应被删除,包括CSS 目前的行为是什么? 自定义CSS不会被移除,但其他部分已经被移除。 [gjs.webm](https://github.com/user-attachments/assets/3fbd9a6d-ad0e-4fc6-add8-7cf31ae9293c) 行为准则 [X] 我同意遵守本项目的行为准则

artf

这与核心无关,应在[插件](https://github.com/GrapesJS/components-custom-code)层面处理。请在那里发布问题,我们会尽力找出合适的方法。

mosh-tudor

@stpp2 这其实不算是个bug;它更像是一种功能。:) 试试用“clearStyles”: https://github.com/GrapesJS/grapesjs/blob/d48e1e34a9fa363dcb83fdcca53a89563db17063/packages/core/src/editor/config/config.ts#L260-L272

stpp2

是的,我这里已经启用了“clearStyles”,但很多情况下效果不好。 无论如何,我预计“自定义代码”组件应该有一定的“容器化”,这样移除后文档里不会留下任何东西。

#61432024年9月10日作者 rhoenerSBS2 个回答
0 个反应

BUG/[问题]:如何在添加/挂载时正确包装组件?

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v128 可复制演示链接 https://jsfiddle.net/fjyk6n4a/2/ 描述一下那个虫子 你好,@artf, 我目前正在尝试将一个组件包裹在一个截面组件中,如果它还没有被包裹的话。我正在连接 component:mount 事件,并用 section 组件替换新增组件(该组件子节点为新增组件)。 我的代码大致是这样的: “''js editor.on('component:mount', (component) => { if (component.parent().attributes.tagName !== 'b...

jasonvijayy

你好,@artf, [可复制链接](https://codepen.io/Logeshwaran-codepen/pen/raLJpYb) 我用'component.replaceWith()'和UndoManager一起运行时也遇到崩溃。 这只发生在编辑器生命周期事件中触发“replaceWith()” (例如 'change:status', 'component:selected', 'component: deselect') 在撤销时,GrapesJS 尝试恢复旧...

ClaudeCode

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

#61422024年9月10日作者 rhoenerSBS2 个回答
0 个反应

页面重做无法正常工作

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v128 可复制演示链接 https://app.grapesjs.com/studio 描述一下那个虫子 添加页面后,通过撤销删除,再用重做重新添加,页面却无法正常工作。图层管理器在选择页面时不会更新。它也没有之前的内容,而且似乎没有正体,因为无法在那个页面添加新组件。我在本地开发中注意到了这种情况,但因为Grapesjs的工作室版本也出现了,我提交了工作室版本的链接以便复制此问题。 如何复现这个漏洞?打开GrapesJs工作室示例添加页面点击撤销 - >页面从列表中移除点击重做 ->页面再次添加点击重做添加的页面查看行为 预期的行为...

artf

谢谢你的报告@rhoenerSBS

ClaudeCode

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

#61222024年9月4日作者 mohamedsalem4013 个回答
3 个反应

修复和重构Sorter.ts

[x] 修正 StyleManager 中的排序器使用情况(包含排序属性层的回归) [x] 基于“Components.canMove”的重构分选器 [x] 更新“canMove”,检查将主符号丢弃在其自身实例内。

mohamedsalem401

这事结束了。

mohamedsalem401

其理念是重构分拣器以提升可维护性和可读性。我们可以实施以下改动:让“Sorter”类依赖抽象树结构,而不是依赖“Component”或“Layers”等具体实现,让“Sorter”类使用更通用、抽象的树结构。这样会让它更灵活、更易重复使用。将代码拆分为多个较小的类,每个类负责单一职责'ComponentManager.canMove': 使用 'ComponentManager.canMove' 方法来判断是否可以移动某个“组件”。这样可以避免代码重复,并确保应用不同部分的...

ClaudeCode

谢谢你举报,@mohamedsalem401。 感谢你分享关于[修复] 修复和重构Sorter.ts的报告。为了帮助团队调查并优先排序: 请提供: 一个最小可复现的例子(CodeSandbox/JSFiddle) 你的GrapesJS版本号 浏览器和操作系统信息 浏览器控制台的任何错误信息 重现问题的步骤 最有帮助的是什么: 简约代码示例(不是你整个项目) 屏幕录制或截图显示问题 明确区分预期行为与实际行为 你正在使用的GrapesJS配置 有了这些细节,维护者可以更快地识...

#61022024年8月31日作者 Alababdiy3 个回答
5 个反应

重新加载自定义组件编辑器后未显示特征

葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器? 铬91V可复制演示链接 https://jsfiddle.net/8tsj5vpb/描述一下那个虫子 我在使用 GrapesJS 时遇到了一个问题,即在重新加载编辑器后,为自定义组件定义的特征没有显示出来。这些特征在组件刚添加时正常工作,但重新加载编辑器(例如刷新页面)后,特征不再出现在特征面板中。 繁殖步骤:使用编辑器定义自定义组件类型。DomComponents.addType,包含默认值部分中的特征。将自定义组件添加到画布中。重新加载编辑器(例如,刷新页面或重新初始化编辑器)。在编辑器中选择自定义组件。 预期行为: 自定义组件定义的特征应在重新加载...

mohamedsalem401

@Alababdiy 我无法通过提供的链接重现问题。 不过,问题似乎在于 GrapesJS 不允许在组件初始化后添加或定义它。

mohamedsalem401

嘿,@Alababdiy, 我没能重现你在JSFiddle中描述的问题。

ClaudeCode

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

浏览所有主题