#44742022年7月22日作者 bimsina3 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome 103.0.5060.134可复制演示链接 https://stackblitz.com/edit/node-zrdtg4?file=index.js描述一下那个虫子 如何复现这个漏洞？在无头模式下初始化编辑器仅用一个基础文本节点加载项目数据 <details> <summary>点击展开查看样本数据。</summary> “JavaScript cont justTextData = { 资产：[]， 风格：[]， 页码：[ { 帧数：[ { 组件：{ 类型：“包装”， 可造型：[ “背景”， “背景色”， “背景图像”， “背景重复”，...
artf
这里已修正 https://github.com/artf/grapesjs/commit/f61222ec904ed56794f7b97e362ea2006dfceaf6
ClaudeCode
谢谢你举报，@bimsina。 关于无头模式运行需要窗口的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something change...
#44352022年7月10日作者 bovealexandre4 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome 最新版本可复制演示链接 暂时没有描述一下那个虫子 如何复现这个漏洞？创建包含Pages API函数的页面管理器测试select函数（如果你脑子里有东西，它会消失;如果你重新添加那个代码，它不会生效）测试加法函数 你只能运行一次 预期的行为是什么？ 选择不要破坏画布上的一切 添加以增加多页 目前的行为是什么？ Select会破坏设备管理器，无法运行重新添加的代码 添加，即使多次呼叫，也只能跑一次 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 选择函数 “''js const selectedPage = 编辑者。Pages.get（p...
bovealexandre
加法函数已经修复了，虽然我发送的数据有错误，但我仍然不明白为什么Tailwind的CSS不适用，尽管它在头部标签里
artf
你用的是“config.canvas.styles”这个选项吗？ https://github.com/artf/grapesjs/blob/b657428b3efc343513f6c92eb6b418935d2a8ac9/src/canvas/config/config.js#L14-L22 你能创建一个可重复的用例演示吗？
bovealexandre
你好@artf很遗憾，我无法在CodePen或JSFiddle上创建可复现的演示，因为里面内容太多，而且我用的是nextJS等技术，但如果你需要，我可以给你访问仓库的权限，那是个私有仓库。 我用的是 Grapesjs-Tailwind，他会把它附加到标题，但当我尝试同样做时，换页时帧完全崩溃。
#44322022年7月9日作者 booellean2 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 103.0.5060.66（官方构建）（64位）（同级：稳定版） 可复制演示链接 https://codesandbox.io/s/cranky-morning-fh5diz?file=/index.js 描述一下那个虫子 如何复现这个漏洞？将自定义块“图片”放入画面并调整大小。查看标记预览，你会看到CSS中有两个带有重复标记的ID（图片ID和img ID）“撤销”直到再次调整大小查看标记预览，现在 CSS 标记的 ID 与图片元素重复，阻止了进一步的样式 预期的行为是什么？ “图片”元素依赖于 CSS 样式化的 'img' 标签，以确保尺寸正确显示...
artf
我不太确定具体发生了什么，但我建议切换到“styleable：change”事件，并将其选项传递给“setStyle”，比如说， “''js Editor.ON（“styleable：change”， （model， prop， opts） => { let component = editor.getSelected（）; 如果（分量？.attributes.styleShared） { let child = component.attributes.component...
ClaudeCode
谢谢你举报，@booellean。 关于撤销管理器在自定义命令中创建重复CSS的问题非常好。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'som...
#43862022年6月15日作者 contentfree2 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 版本 102.0.5005.61 可复制演示链接 https://jsfiddle.net/tLvwfhu3/ 描述一下那个虫子 从演示小提琴开始，把一个文字块放进狭窄的画布里。会弹出一个提醒，显示 CanvasView.getPosition（） 包含这些奇怪值的结果。看起来“左边”或“宽度”值都错了，因为“左边”是可见画布的左边边缘，但宽度包含了画布两侧的所有空白边距。 我认为这导致了在编辑器设计模式下初始组件定位时出现的一些问题。Canvas.getMouseRelativeCanvas 将左侧（和顶部值）添加到 clientX/Y 的值上。也...
artf
是的，我觉得确实很混淆（宽度和高度指的是画布，顶部和左边指框架），但任何对这些功能的直接更改都会破坏其他部分的功能，因为这些功能是基于这种复杂的逻辑😞构建的（比如标准模式中的方块排序器）。 所以我想在做任何改变之前，我们应该先重构其他观点的逻辑。 我可能会关闭这个问题，因为这个方法本身并没有公开或文档。
ClaudeCode
谢谢你举报，@contentfree。 CanvasView.getPosition 在设计模式下用窄设备返回奇怪值的问题，似乎是竞态条件或状态管理时序问题。这通常发生在组件生命周期事件和DOM修改重叠时，导致状态不一致。 尝试什么： 添加setTimeout包装器以确保DOM已稳定： “JavaScript setTimeout（（） => { 你在这里的行动 }, 0); 推荐的下一步步骤： 如果还没测试过，请用最新的GrapesJS版本测试 提供最小可重复的示例（Co...
#43622022年6月2日作者 tuongnguyendev2 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ Chrome 版本 102.0.5005.61 可复制演示链接 https://jsfiddle.net/tuongnguyendev/25kcypuj/ 描述一下那个虫子 如何复现这个漏洞？画布上的一根柱子。选择组件测试背景 ![截图 2022-06-02 08 48 36]（https://user-images.githubusercontent.com/16423468/171530144-7eb410a6-1f1a-41b8-a87f-f28efec0c6cf.png）装饰 => 背景 => 选择第一个物品背景 ![截图 2022-06-0...
tuongnguyendev
你好@artf 更新了#4350的新bug。 谢谢。
ClaudeCode
谢谢你举报，@tuongnguyendev。 关于背景图片预览显示错误链接的好问题。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something cha...
#43502022年5月26日作者 ronaldohoch3 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 勇敢浏览器 v1.39.111 可复制演示链接 https://jsfiddle.net/e7oau8v6/ 描述一下那个虫子 如何复现这个漏洞？画布上的一根柱子。 ![图片]（https://user-images.githubusercontent.com/2287371/170560918-15d2df09-58d4-41ee-b3f8-3313950b1669.png）选择文本组件进入风格标签页，查找装饰背景设置背景图像。 ![图片]（https://user-images.githubusercontent.com/2287371/1705...
artf
你好@ronaldohoch问题出在你的自定义类型背景上，你添加它的方式不正确（[正确使用API]（https://grapesjs.com/docs/modules/Style-manager.html#adding-new-types））。 'addType' 主要用于添加新的 UI 输入，如果你不需要新的 UI（比如你这种情况），你可以依赖 ['addBuiltIn']（https://grapesjs.com/docs/api/style_manager.html#...
tuongnguyendev
你好@artf，我遇到的问题和@ronaldohoch用最新版本的GrapesJS时很相似 背景图片预览显示错误链接 详情见下方图片： ![截图 2022-06-01 15 49 03]（https://user-images.githubusercontent.com/16423468/171366767-be2677e7-d1b7-4fc7-ac45-7c54737dd41a.png）
ClaudeCode
谢谢你举报，@ronaldohoch。 关于样式管理器在选择组件时不会更新背景，这个问题很棒。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'so...
#43232022年5月12日作者 mohdSuhailCoditation4 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Google Chrome 版本 101.0.4951.41（官方版本）（64 位）可复制演示链接 https://jsfiddle.net/Laze0pyg/描述一下那个虫子 如何复现这个漏洞？使用以下脚本添加2k组件。'for（设i = 0;i<2000;i++） editor.addComponents（'<div>ABC</div>'）;'尝试将文本块拖曳到画布上。 预期的行为是什么？ 应该没有延迟。 目前的行为是什么？ 绿色的占位符出现了延迟 JS小提琴 https://jsfiddle.net/Laze0pyg/ 演示 https://use...
GedMarc
但是......给任何页面添加2000个带有基本样式的支配元素，就会有延迟？这可能不是工具本身的问题，而是工具的使用方式？ 另外检查一下浏览器渲染速度和电脑的关系——http://speed-battle.com/speedtest_e.php https://www.webfx.com/web-development/learn/why-does-your-website-load-slowly/ [2015年，平均页面大小为2MB]（https://www.soasta...
artf
最新版本包含了@mohamedsalem401分拣器的重构，之前的演示现在似乎运行良好 🥳
vizardkill
https://github.com/GrapesJS/grapesjs/assets/37307788/2d653d49-1a57-458c-bc8c-4833c8c7a690 我也有同样的问题，我觉得不是因为体积，我用的是pageManager，预加载HTML模板，试图拖动新元素到画布时，画布只有10秒后才插入组件，甚至会短暂卡死
#42552022年4月13日作者 am1rb2 个回答
葡萄JS版本[X] 我确认使用最新版本的GrapesJS你用的是什么浏览器？ Chrome v98.0.4758.80可复制演示链接 https://jsfiddle.net/am1rb/3uzkn5t7/8/描述一下那个虫子 如何复现这个漏洞？在画布上渲染一个简单的组件将组件的程序性设置为可拖曳=false在编辑器中选择组件移动按钮存在于提示中，但无法使用 预期的行为是什么？ 组件工具栏应该重新渲染，如果可拖拽道具设置为false，移动按钮应该被移除。可复制和可拆卸道具也有同样的问题。 目前的行为是什么？ 移动按钮存在但无法使用，控制台上会出现以下错误： ![图片]（https://user-images.githubuserc...
artf
是的，工具栏其实不是动态的，所以如果你需要重新计算，必须手动强制 “''js model.set（{ draggable： false， toolbar： null }） model.initToolbar（）; ```
ClaudeCode
谢谢你举报，@am1rb。 关于如果你在程序上将可拖拽道具设置为false，初始工具栏的移动按钮不会被移除，这个问题很棒。推荐的 Canvas 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console...
#42492022年4月8日作者 iamqinglong3 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ 铬100 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？我正在使用外部设备将图像块拖曳到画布上从自定义模态中选择图像查看代码检查模型/目标对象属性 预期的行为是什么？ 导出代码的“src”属性应包含实际的URL“<img src=”actual-url“ />' 目前的行为是什么？ 我正在使用一个外部模块来自定义资产管理。 model/target 的“src”属性应该包含实际的URL。 <img width=“682” alt=“截图 2022-04-08 下午2点26分” src...
m-jojo-s
要么使用 select.set（'src'， doc.URL）要么启用 unsafe html 属性 参见#4148
artf
是的，我建议你直接切换到“select.set（'src'， doc.url）'，就像之前建议的那样。
ClaudeCode
谢谢你举报，@iamqinglong。 关于导出HTML中图片字符不会改变的好问题。ProseMirror 推荐的方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'something...
#42482022年4月7日作者 protozoo2 个回答
葡萄JS版本 [X] 我确认使用最新版本的GrapesJS 你用的是什么浏览器？ VSCode（VSCode 扩展中的 WebView） 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？创建一个新的 vscode 扩展（或使用你已有的扩展）创建一个包含 HTML 文档的 Webview，加载 GrapesJS 演示的 iframe（见下方示例代码）运行扩展和 webview 以加载 GrapesJS 演示尝试在画布上拖拽葡萄块 预期的行为是什么？ 拖曳的方块应加入画布 目前的行为是什么？ 拖拽的组件不会被添加到画布中。 你可以在这里观看一个展示问题的视频：https...
artf
你好@protozoo我不太清楚具体原因，但看起来 vscode iframe（可能是沙箱的）阻碍了原生的 HTML5 拖放功能（这是块上用的操作）。 由于这与核心内容不完全相关，我就把这个问题移到讨论区。
ClaudeCode
谢谢你举报，@protozoo。 关于在VScode扩展网页视图中阻挡拖放交互失败的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式： “JavaScript 留意变化 editor.on（'change'， （） => console.log（'som...