#57852024年3月29日作者 bernesto3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 这可能是刻意为之，但考虑到其意图，这似乎有些奇怪。 如何复现这个漏洞？点击预览（眼睛） 预期的行为是什么？ 页面的浏览方式是终端用户的。所有管理标记都已从页面中移除。 目前的行为是什么？ 除虚线外的所有管理标记都被移除。 在预览阶段， .${ppfx}dashed 应从正体中移除，退出预览时启用后重新应用。 行为准则 [X] 我同意遵守本项目的行为准则
artf
谢谢@bernesto演示方面其实还有更新要做。 我已经准备好了更改，下次发布时会修正。
GJS Helper
你已经指出了关于GrapesJS预览模式的一个常见困惑点。你观察到的行为——组件轮廓（虚线边框）在预览模式下依然存在——确实不是想要一个干净、最终用户视图的用户体验。虽然GrapesJS移除了大部分管理UI元素，但负责这些轮廓的gjs-dashed类在预览时可能不会自动从body元素中移除。这可能导致预览不够精致。好消息是，用GrapesJS的事件系统解决这个问题很简单。 根本原因 GrapesJS编辑器会对body元素或编辑器的主容器应用一个全局类，通常为gjs-dash...
#57752024年3月26日作者 ctrhub2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Arc 版本 1.35.0 / Chromium 引擎 123.0 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？开放开发工具选择一个组件主机运行： 预期的行为是什么？ 应该会回归克隆版本。 目前的行为是什么？ 出现错误： 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： --- 注： .clone（） 是我发现唯一不再有效的方法。 方法链接 - https://arc.net/l/quote/ztapwusb 行为准则 [X] 我同意遵守本项目的行为准则
artf
如果你需要复制 traits，我建议简单地做这个操作：'JSON.parse（JSON.stringify（editor.getSelected（）.getTraits（））'。 我不记得文档里提到过克隆特征，所以我建议避免使用非公开API。
GJS Helper
你发现了GrapesJS中一个合理的漏洞，调用component.get('traits').clone()会抛出一个TypeError。这个问题源于Traits集合的clone()方法，内部依赖Backbone.Collection.prototype.clone()，尝试用new this.constructor(this.models)实例化一个新的Traits集合。Traits集合的构造函数或调用的内部方法有特定的依赖关系，或者期望某个上下文，但以这种方式调用时未被...
#57682024年3月19日作者 rhoenerSBS1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 不适用 描述一下那个虫子 GrapeJs 文档表明，可以将混合内容添加到块的“content”属性中（参见 https://grapesjs.com/docs/modules/Blocks.html#mixed）。但该属性的类型定义是“string |ComponentDefinition”（参见 https://github.com/GrapesJS/grapesjs/blob/dev/src/block_manager/model/Block.ts#L17）。 这会导致 TypeScript 项目...
GJS Helper
你准确指出GrapesJS文档与content属性类型定义之间的差异BlockProperties。这确实是类型定义中的一个bug，因为content属性设计成接受比当前在Block.ts中声明的更灵活的值。 根本原因 GrapesJS块的content属性旨在高度多功能，允许开发者定义拖曳到画布上的组件初始结构。根据文档和实际运行时行为，content可以接受： 一个普通的 HTML 字符串（例如 "<div>Hello World</div>"）。 单个Componen...
#57572024年3月15日作者 kuntal8113 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122，Safari 17 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？添加链接组件，尝试编辑链接文本 预期的行为是什么？ 链接文本应可编辑 目前的行为是什么？ 行为准则 [X] 我同意遵守本项目的行为准则
artf
感谢报告，将在下次发布中修复（https://github.com/GrapesJS/grapesjs/commit/a54f213c33ee90549ef06f3b505c455f1abfc323）。
GJS Helper
你遇到的问题，链接标题无法编辑，很可能源于对GrapesJS如何处理链接组件不同部分的普遍误解，特别是对链接的可见文本和其HTMLtitle属性的区别。 让我们澄清并提供两种情况的解决方案： 1.编辑链接的可见文本（内部HTML） 它是什么： 这指的是显示在<a>标签内的文本，例如<a href="#">Click Here</a>Click Here。 *在 GrapesJS: 中的预期行为 默认情况下，链接组件的可见文本是内联可编辑的。你应该可以在画布中点击链接，然后再...
#57462024年3月12日作者 rhoenerSBS4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 https://grapesjs.com/docs/getting-started.html#style-manager 描述一下那个虫子 如何复现这个漏洞？访问 GrapeJS“入门”文档中的“StyleManager”部分 尝试在编辑器中使用该部分的颜色选择器。即使你在 .editor-canvas 中添加“position：relative”，当面板不在编辑器容器外时，颜色选择器仍然会计算错误的偏移 预期的行为是什么？ 颜色选择器会显示在对应的输入旁边 目前的行为是什么？ 相对偏移计算错误，选色...
bernesto
你好，@artf， 根本问题是我们试图将弹出调色板绝对放置在页面任意位置的另一个元素之上。即使原点元素不在编辑器容器节点之外，我们也需要这样做。 为满足此要求，弹出调色板不能包含在“offsetParent”的任何位置，且必须处于最高的z指数。否则，它将受其“offsetParent”可见区域的影响，并按父节点的“z-index”排序。 在我之前的补丁中，这似乎是可行的，因为示例编辑器占用了整个窗口，因此编辑器元素内的“left： 0”和“top： 0”也在正体内部是“le...
artf
@bernesto你能检查一下这个吗？因为它似乎和[你的更改]（https://github.com/GrapesJS/grapesjs/pull/5704）有关。
bernesto
是的，我明白问题所在。逻辑需要考虑父节点在容器外的情况。让我看看能不能做。
#57432024年3月11日作者 davidgabrichidze4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Edge v122 可复制演示链接 https://jsfiddle.net/bwreyq29/1/ 描述一下那个虫子 如何复现这个漏洞？ 打开此链接 [https://jsfiddle.net/bwreyq29/1/]（https://jsfiddle.net/bwreyq29/1/），附带到 src 属性上的 JavaScript 代码将被自动执行。 预期的行为是什么？ 这段代码不应该运行 目前的行为如何？ 存在XSS漏洞行为准则 [X] 我同意遵守本项目的行为准则
bernesto
我觉得预读解析师这个选项是个很好的主意。它坚持“按功能插入”的概念。 那更新“fromElement”以接受字符串元素ID或布尔值怎么样？如果 bool == true，则和现在一样，解析容器 HTML。 如果字符串 ID，它会使用元素的内容，容器则像现在一样成为编辑器。然后我们可以更新文档，支持HTML脚本模板用于开发。这样可以防止刹车变化，并促进正确的使用。 “''js const editor = Grapesjs.init（{ 容器：“#gjs”， fromElem...
artf
完全同意@bernesto的观点，无论我们多么努力让它安全，都永远不够，我也不想让人觉得库“非常安全”，以至于缺少服务器端验证。 当前选项（例如“allowUnsafeAttr”、“allowUnsafeAttrValue”）只避免了基本的常见内容。
bernesto
使用“fromElement”从激活的DOM元素加载时，这种情况是不可避免的。页面元素同步加载和执行。GrapesJS 永远没有机会处理和解除 XSS 的 html。 这个问题需要通过阻止恶意代码永远加载来解决。这应该在服务器存档时处理。但如果客户端需要处理，可以通过用脚本标签包裹代码，然后在加载到编辑器前对代码进行净化，就像这样： https://jsfiddle.net/bernesto/5gcxa0jm/1/ 我确实看到，在初始化时通过“components”属性加载...
#57422024年3月11日作者 bernesto4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 无 描述一下那个虫子 如何复现这个漏洞？将git检查到Windows 10+机器上按照提供的流程构建。 预期的行为是什么？ 它应该和*inx系统一样建造。 目前的行为是什么？ 该构建因引用 Backbone 的错误而失败： 环境： 这个“可能”和 GrapesJS CLI 有关，我不确定，因为webpack.config.js的改动似乎tsconfig.json没有影响。 我也尝试过直接组装，但似乎 Backbone 可能在使用 cash-dom 而不是 jquery时遇到问题。 这次遇到瓶颈了。 行...
bernesto
是的，我做了所有常规的事情。锁定文件、更新、各种导入方式（{}、require、*、full path 等） 不知道为什么，但我弄坏东西的时候，会弄得很厉害。永远是2级或3级辅助，哈哈。 我确实认为问题出在CLI，或者......配合 Backbone-Undo。也许是路径相关的，或者是符号链接，或者...... ̄\(ツ)/ ̄ 总之，我明白“时间”的含义。我已经花了太多时间了，如果你有兴趣告诉我，哈哈
bernesto
说得好。我还没试过其他版本的Node。我会试试这个方法。
artf
是的，构建/服务是由CLI管理的（我们把问题移到那里），但我不确定问题出在哪里（因为没有Windows可以测试🥲）。
#57392024年3月11日作者 rhoenerSBS1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 不适用 描述一下那个虫子 最新版本附带的ColorPicker界面定义了“preferredFormat”选项，期望获得“布尔值”，但Spectrum Colorpicker的文档显示必须是类型为“string”（文档：https://bgrins.github.io/spectrum/#options-preferredFormat） 这会导致 TypeScript 项目编译时出现错误。 如何复现这个漏洞？定义ColorPicker的“preferredFormat”选项，取自Spectrum文档中...
GJS Helper
这确实是关于ColorPickerOptions接口 TypeScript 类型定义GrapesJS的有效错误报告。根据底层 Spectrum Colorpicker 库的文档，preferredFormat属性被错误地类型化为 boolean，而应string。 根本原因 ColorPickerOptions的GrapesJS类型定义（通常出现在GrapesJS包内的index.d.ts或类似声明文件中）包含了以下错误的preferredFormat类型： 然而，Grap...
#57292024年3月8日作者 Sphenox4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？开放演示创建带有链接的文本使用默认RTE编辑文本选择整个链接输入任意内容，以替换链接文本 预期的行为是什么？ 当你输入某项内容时，它应该会继续在链接内写入。 你可以编辑只包含一个字符的链接文本。 目前的行为是什么？ 目前链接内只写第一个字符。从第二个字符开始，光标不再出现在链接中，所以文本会直接在链接后面插入。链接中只有一个字符时无法编辑，因此发生这种情况后你必须删除整个链接。行为准则 [X] 我同意遵守...
bernesto
@artf，你又说对了。节点的空白很重要。如果文本紧贴关闭节点，第一个按键替换文本，下一次按键离开节点，如果不对，则按预期工作。 有一个关于这个的旧帖子（https://github.com/w3c/editing/issues/1560 年），专门在webkit和blink里，讲它们是如何这样工作的。CKEditor 5的作者之一也在场，他基本上说你必须构建一个抽象层来修复这种行为，这对我们来说简直是麻烦。 @Sphenox我觉得这个问题很可能在之前的版本中也存在，从我读...
bernesto
澄清一下，你说的是链接中文本的选择和编辑异常表现吗？ ![Kapture 2024-03-08 09 01 50]（https://github.com/GrapesJS/grapesjs/assets/1020507/ebd610fe-ca9c-43b6-87b1-a0b336775348）
#57242024年3月8日作者 bernesto2 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome v122可复制演示链接 https://jsfiddle.net/zwo0mdqf/5/描述一下那个虫子 如何复现这个漏洞？创建有效的内联块元素，如span、b、i、em等，这些元素使用多个空格、制表符或换行符作为单词分隔符。 预期的行为是什么？ 这些元素渲染时应间隔一格。HTML 导出留白应尊重输入留白。 目前的行为是什么？ 这些元素在编辑器中作为独立组件渲染，但呈现为一个单词。输出HTML去除了输入空白。注意：组件HTML是每个元素新行导出的，因此显示的输出会正确渲染，但getHtml（）不会。 行为准则[X] 我同意遵守本项...
danstarns
最终倾向于合并提交。https://github.com/GrapesJS/grapesjs/pull/5719
GJS Helper
你遇到的 GrapesJS中空白处理问题，特别是内联元素和 getHtml() 输出，源于 HTML 解析器和 GrapesJS组件模型对不同类型的空白处理方式。 根本原因 HTML 空白空间折叠： 默认情况下，HTML 在渲染时会将多个空白字符（空格、制表符、换行）合并为一个空格。内联元素中的前置和后置空格也常被忽略。这是浏览器的标准行为。 GrapesJS 组件序列化： 当GrapesJS解析 HTML（尤其是 fromElement: true时），它会将 DOM 转...