#60122024年7月21日作者 aswinkumar8631 个回答
葡萄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(...
#60012024年7月13日作者 thigh1 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? MS Edge 126.0.2592.87(官方版本)(arm64) 可复制演示链接 无 描述一下那个虫子 如何复现这个漏洞?...使用 grapesjs 的 0.21.11 或 0.21.12 版本,创建一个多页项目。在A页时,图层管理器正常工作。切换到B页同样正常。...切回页面A会导致图层管理器停止响应,使其失去使用功能。实际上,切换到任何之前加载的页面都会引起这个问题,但第一次切换到任意页面则正常。切回v0.21.10问题解决 预期的行为是什么? ...图层panager应反映当前加载页面的组件并允许交互。 目前的行为是什么? ...图层管理...
ClaudeCode
谢谢你举报,@thigh。 关于图层管理器在页面切换时会断裂的建议很棒!虽然这个具体功能还没有出现在核心 API 中,但有几种方法可以实现类似的行为。 使用事件系统: “JavaScript editor.on('component:update', (component) => { 你的逻辑 }); ``` 替代方法: 听取“selector:add”以获取CSS选择器更改 使用“selector:custom”来表示自定义规则 利用“change:*”事件进行细致跟踪...
#59932024年7月5日作者 TutorialMan77272 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? 歌剧109 可复制演示链接 https://jsfiddle.net/9zmyrhoe/ 描述一下那个虫子 如何复现这个漏洞? 打开上面的 jsfiddle 然后跑 预期的行为是什么? 这些面板本不该展示 目前的行为是什么? 黑色空面板 如果有任何额外信息,欢迎随时提问 行为准则 [X] 我同意遵守本项目的行为准则
TutorialMan7727
所以,下面的CSS没有工作。我不得不手动更改grapes.min.css文件里的CSS。 CSS 无法在 grapes.min.css 中覆盖 CSS。 .gjs-cv-canvas { 顶部:0; 宽度:100%; 身高:100%; }
ClaudeCode
谢谢你举报,@TutorialMan7727。 关于显示空面板的问题很棒。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed'...
#59902024年7月4日作者 ihatov084 个回答
葡萄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
#59892024年7月4日作者 ihatov083 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 126.0.6478.127(Windows) 可复制演示链接 https://jsfiddle.net/vbu18q5f/2/ 描述一下那个虫子 如何复现这个漏洞?如果标签嵌套,则无法在画布上选择 Demolink中的第2节块在section标签里面有div标签。 第2节 块无法在Canvas中选择部分标签,div标签被选中。 这带来了两个问题。选中了div标签,所以当你尝试删除画布上的方块时, 只有 div 标签会被删除,section 标签会保留。 你不能从画布中删除所有方块元素,所以要删除所有方块元素,必须在图层管理器中删除它...
ihatov08
@artf 抱歉,框架并不像你说的那样解决所有问题。 我以后会认真阅读文档。 谢谢你的回复。
artf
这不是个bug,更像是与HTML整体工作方式相关的用户体验问题,这也是我们在工具栏里提供“选择父”按钮的确切原因。 不要指望框架能帮你解决所有问题,提供用户友好界面和更好的用户体验是开发者的责任,有很多[组件属性](https://grapesjs.com/docs/api/component.html#properties)可以帮上忙。
ClaudeCode
谢谢你举报,@ihatov08。 关于如果标签嵌套,无法在Canvas上选择,这个问题很棒。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something...
#59842024年7月2日作者 Ju99ernaut1 个回答
葡萄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。 关于“ ”正在被RTE删除的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something...
#59822024年7月2日作者 ihatov082 个回答
葡萄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 个回答
葡萄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 个回答
葡萄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...
#59412024年6月11日作者 shahsalmanbukhari3 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器? Chrome 125.0.6422.113 可复制演示链接 <script src=“https://grapesjs.com/js/toastr.min.js”></script> 描述一下那个虫子 如何复现这个漏洞?只需点击这些链接中的任意一个,他们会显示404页 预期的行为是什么? 它应该能从CDN加载文件 目前的行为是什么? 文件不会从CDN加载 如果需要执行某些代码以重现该漏洞,请将其粘贴到下面: “''js 不,需要执行,只需点击任何提供的链接 ```行为准则 [X] 我同意遵守本项目的行为准则
artf
嘿,@shahsalmanbukhari你说的不是CDN,而是公开网站上的简单资源。请不要使用它们,因为没有版本控制,甚至不保证不会被迁移(因为网站迁移导致的)。 请使用真实的CDN作为使用方式 https://unpkg.com/grapesjs
shahsalmanbukhari
嘿@shahsalmanbukhari你说的不是CDN,而是公共网站上的简单资源。请不要使用它们,因为没有版本控制,甚至不保证不会被迁移(因为网站迁移导致的)。使用真实的CDN作为 https://unpkg.com/grapesjs 你好@artf 非常感谢,让我试试你建议的解决方案
ClaudeCode
谢谢你举报,@shahsalmanbukhari。 关于GrapesJS CDN无法使用的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('...