GrapesJS 问题

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

找到 336 个问题

🔍 style-manager
#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)——这有助于团队更快识别根...

#60962024年8月30日作者 kanaihyakumar4 个回答
2 个反应

可调整大小的框在组件重新选择时消失

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 https://jsfiddle.net/kanaihyakumar/oedg76nt/ 描述一下那个虫子 描述 当选择画布上的任何组件时,它会根据设置高亮底部的缩小框。但是,当再次点击同一个组件时,调整大小框就会消失。繁殖步骤使用提供的HTML代码打开GrapesJS。选择画布上的任意组件以查看底部的缩放框。再次点击同一个组件。注意缩小框消失了。预期行为 底部的缩放框即使在重新选择相同组件后仍应保持可见。实际行为 重新选择同一个组件后,底部的缩放框会消失。代码 '''html <!DOCTYPE html> <html lang...

kanaihyakumar

之前,我需要更清楚地说明重现问题的步骤。以下是制作该期的精细步骤。 重现问题的步骤:直接点击该部分。观察显示的可调整大小选项。点击该部分中有列组件的区域(我为视频中所有元素添加了边框以便清晰)。注意,已选中分区组件,但底部可调整大小选项未显示。 [视频链接](https://drive.google.com/file/d/1YUEYZxjpD1Un-xaBRUybuKDZO0_Xffmu/view) 实际行为:直接点击该部分时,底部可调整大小选项如预期显示。然而,当点击有列...

kanaihyakumar

相信我,我很幸运能找到这种点击不同地方的悲惨行为,虽然表现不同,但表现不同。

artf

我觉得如果不是按点击键,它不会消失,但这是预料之中的,因为它准备被拖动

#60512024年8月9日作者 SAJAD-CH2 个回答
0 个反应

插件问题

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬 可复制演示链接 ASDASD 描述一下那个虫子 我在安装 NPM 插件包(如 preset-webpage、preset-newsletter)时遇到了问题,检查 node module 文件夹时,CSS 文件都不见了。我想在 Angularts 中集成 Grapejs。 现在它包含了像 index.d.ts、index.ts 等页面。 行为准则 [X] 我同意遵守本项目的行为准则

artf

@SAJAD-CH,请在打开漏洞问题时提供可复现的实时演示(例如通过 stackblitz 进行)

ClaudeCode

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

#60392024年8月6日作者 Gryphonn4 个回答
3 个反应

无法设置块显示值

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 铬126 可复制演示链接 https://jsfiddle.net/Gryphonn/ob1pznh6/ 描述一下那个虫子 如何复现这个漏洞?选择任意单词。包装得有型。保持该词被选中。进入通用->显示我要布洛克。我点击了“屏蔽”,但什么都没发生。 预期的行为是什么? 显示值必须是空的,这样我才能立即选择所需的内容。 或者它必须显示所选文本当前的实际显示值。这里是Inline,而不是Block。 目前的行为是什么? 目前我需要点击两次。 首先,点击除屏蔽以外的任何东西。显示场被激活。 那我应该点击屏蔽。 如果需要执行某些代码以重现该漏洞,请将其粘贴到下...

artf

是的,问题就在这里: https://github.com/GrapesJS/grapesjs/blob/1e3766f0060e6da502fccf9ba9eb938d5ac860bb/src/style_manager/model/PropertyFactory.ts#L267 添加一个新选项,比如“初始”,并设为默认选项,这样做合理吗?

danstarns

> 你好@Gryphonn,>我试图复现你的问题,但步骤不太清楚,请重新表述。bandicam.2024-08-08.21-07-14-667.mp4 感谢您的详细报告 🙏 看起来我们应该更好地处理默认显示,这样你就不用先切换到另一个显示器再切换回来。

danstarns

你好,@Gryphonn, 我试着重现你的问题,但步骤不太清楚,请重新表述。

#60122024年7月21日作者 aswinkumar8631 个回答
0 个反应

使用上下箭头时,输入数字值不会保持

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v126 可复制演示链接 https://codepen.io/aswinkumar863/pen/VwJaVYG 描述一下那个虫子 如何复现这个漏洞?打开[演示](https://codepen.io/aswinkumar863/pen/VwJaVYG)。点击编辑正文中的“点击我”部分。导航到Style Manager并选择General > Top。在输入框中输入任意数字,但不点击外部。点击上或下箭头。 注意: 仅在输入字段未点击外部时观察到此行为。数字特征也受此问题影响。 预期的行为是什么? 输入数字应与当前输入的值递增或递减。...

ClaudeCode

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

#59902024年7月4日作者 ihatov084 个回答
1 个反应

当你删除组件时,组件间的重复类也会被删除。

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 126.0.6478.127(Windows) 可复制演示链接 https://jsfiddle.net/t06s4oLb/8/ 描述一下那个虫子 如何复现这个漏洞?将第1节添加到画布上在第1节下将第2节添加到画布中将画布上的第2节移除。第一节的风格将被打破。 https://github.com/GrapesJS/grapesjs/assets/14024165/097dbe62-d8d3-4270-930d-5668ef10c2df 预期的行为是什么? 我希望即使不同组件有相同的类,它也不会被删除。 目前的行为是什么? 原因是第一节...

artf

你应该避免把共享样式放在组件相关的样式里。 请查看关于如何预防这种情况的讨论:https://github.com/GrapesJS/grapesjs/discussions/5968

ihatov08

作为临时变通,每个组件的样式前缀都带有 id。 “''js 从 './data/hero-1' 导入 { HTML 作为 hero1html,css 作为 hero1css }; 从 './data/content-1' 导入 { html 作为 content1html,css 作为 content1css }; 连续来源 = [ { 编号:“英雄-1”, 名字:“英雄1号”, 分类:“英雄”, HTML:hero1html, CSS:hero1css, 类别:“BG-G...

ihatov08

@artf 谢谢你的回复。 我想确认一下#5968

#59842024年7月2日作者 Ju99ernaut1 个回答
0 个反应

“&nbsp;”正在被RTE删除

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome v123.0.6312.124 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?添加文本元素打开RTE并输入单词选择单词并将其作为链接或包裹以符合风格添加空格并输入第二个单词选择第二个词,并将其设置为链接或包裹风格 预期的行为是什么? 空间应当被保留 目前的行为是什么? 空间正在被清理 https://www.loom.com/share/e4638445ed264ce6826657975b0c9a4c?sid=ad27081d-045b-40d7-9041-3858b8...

ClaudeCode

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

#59822024年7月2日作者 ihatov082 个回答
1 个反应

诸如 md:flex-row(tailwind) 等组件样式被移除

葡萄JS版本[x] 我确认使用最新版本的GrapesJS你用的是什么浏览器? Chrome 126.0.6478.127可复制演示链接 https://jsfiddle.net/6m53pwy7/4/描述一下那个虫子 如何复现这个漏洞? 我想用 [Tailwind](https://tailwindcss.com/) 搭配 GrapesJS,但这个框架使用 Utility-First CSS 类来构建快速布局。问题在于它还使用[“特殊”类](https://tailwindcss.com/docs/state-variants/#app)来定义样式变体,例如:hover:bg-blue 或 md:w-full 等。 包含冒号的样式...

artf

你需要正确地逃离CSS “''js .md\\:p-18 { 填充:4rem; } ```

ClaudeCode

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

#59692024年6月25日作者 uncldrw1 个回答
0 个反应

导出CSS时@container指令名称缺少空格

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome LTS 可复制演示链接 / 描述一下那个虫子 我注意到导出代码时@container指令缺少空白。 这是我提供的代码: “''CSS @container便携(最大宽度:639px){ .teaser-paaheadline { 字体大小:24px; 线高:29px; 最大宽度:272像素; 净胜率:0 自动; } } 为了确保间距,我尝试加了一个“逃脱”空格,但没成功: “JavaScript @container 可携\u0020(最大宽度:639px){.teaser-paawrapper{max-width:calc(100%...

ClaudeCode

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

#59422024年6月12日作者 adarshsingh1972 个回答
0 个反应

BUg 在 RichTextEditor 中的应用

葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 镀铬 可复制演示链接 我在期刊中提供了代码 描述一下那个虫子 [截屏时间:2024年12月6日 下午3:09:58 IST.webm](https://github.com/GrapesJS/grapesjs/assets/130237200/d5bbb21e-2e44-4564-a407-4768776c1cd8) 问题是,刚应用任何加粗或斜体后,点击某处就会消失。 onMounted(async () => { componentsTypeScript.value = {}; componentsDefaults.value = {}; appI...

artf

从官方演示来看,它似乎按预期工作,所以我猜这和你的自定义逻辑有关。 请提供一个简短且可复现的问题演示。

ClaudeCode

谢谢你举报,@adarshsingh197。 错误 error: any) { 发生在 ProseMirror 尝试访问属性时,尚未完全初始化组件生命周期。这是GrapesJS中常见的竞争条件。 立即解决办法: 如果你控制代码,可以用空检查包裹调用: “JavaScript if (component && typeof component.getPlugins === 'function') { 你的准则 } ``` 根本原因分析: ProseMirror 在调用 'ge...

浏览所有主题