#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...
#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 转...
#57202024年3月6日作者 bernesto2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 https://jsfiddle.net/n38vbktg/ 描述一下那个虫子 如何复现这个漏洞？创建一个组件，传播包含可分层=true的默认值。 在“有能力”下引入一条评论。 预期的行为是什么？ 评论要么保持隐藏，要么不会导致错误。 目前的行为是什么？ 编辑器将该注释视为 HTMLElement。当编辑器尝试从节点读取不存在的属性（如 getComputedStyle 或 getClientRects）时，会触发多个错误。这两种方法都应先进行检查。或者——应为注释引入一个新类型，覆盖从父节点传播的默...
GJS Helper
这是一个有效的错误报告。问题出在GrapesJS的组件系统，尤其是传播layerable: true时，试图将HTML注释节点当作标准HTML元素来处理。这会导致在HTMLElements上调用特定于s的方法，如getComputedStyle或getClientRects时，Comment节点上出现错误。 根本原因 当组件默认中有layerable: true（或继承）时，GrapesJS期望其子节点在图层面板中可渲染。在解析DOM时，GrapesJS遍历所有子节点Nod...
#57152024年3月4日作者 afrinxnahar1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 版本 123.0（64 位） 可复制演示链接 不在 描述一下那个虫子 我猜大多数.js文件都已经变成打字稿了，但可能还有像下面这个那样的坏链接...... ![GJS3]（https://github.com/GrapesJS/grapesjs/资产/125039325/A42D8156-13e5-4ba0-9cd5-6249ded1d75a）行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
感谢你在GrapesJS API文档中报告了这个坏链。你已经正确识别了根本原因。 根本原因 GrapesJS项目正在经历从JavaScript向TypeScript的重大迁移。作为这一过程的一部分，许多.js源文件被重命名为.ts或.tsx文件。你提供的链接https://github.com/GrapesJS/grapesjs/blob/dev/src/editor/model/Editor.js指向一个在dev分支上该路径和扩展名下已不存在的文件。 解决方案/变通方法...
#57032024年2月25日作者 bernesto1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 https://jsfiddle.net/v4e5d90z/ 描述一下那个虫子 如何复现这个漏洞？将编辑器放入任意容器中。 预期的行为是什么？ 颜色选择器应该相对于打开该选项的输入显示。 目前的行为是什么？ 选择器相对于窗口，而不是编辑器容器。这导致选择器的开启偏移量是所有偏移父容器累计偏移量。 行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
你遇到的GrapesJS颜色选择器偏移出现的问题，是第三方弹出组件（如颜色选择器、工具提示或下拉菜单）如何处理其位置的常见问题，尤其是在主应用容器本身偏移或定位时。在GrapesJS中，颜色选择功能通常由spectrum-colorpicker库驱动。 根本原因 默认情况下，spectrum-colorpicker库会直接将其选择器元素附加到document.body。当元素被附加到document.body并完全定位时，其top和left坐标相对于视口计算。库尝试根据触发...
#57002024年2月24日作者 upadhyay88442 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 镀铬可复制演示链接 无法提供数据敏感描述一下那个虫子 如何复现这个漏洞？在编辑器/Canvas中放置一页。将高度设定为ex-600pt，并且四边各加10pt的缓冲。现在在页面内放置两个部分。将最小高度设为某一部分，比如30点，高度为另一部分。现在，100%高度的部分与页面/父页面重叠 预期的行为是什么？ 该部分不应与页面重叠，只应覆盖父页面的可用空间，包括填充边距等。 目前的行为是什么？ ...它在页面上重叠 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则[X] 我同意遵守本项目的行为准则
upadhyay8844
@artf你能帮我看看吗？
GJS Helper
你遇到的问题是，当父部分有固定高度和填充时，子部分与父height: 100%部分重叠，且有其他兄弟节点存在，这是常见的CSS布局挑战。这不是GrapesJS本身的bug，而是CSS中默认表现height: 100%导致的，尤其是与标准盒模型结合时。 根本原因解释 当你在区块级元素上设置height: 100%时，它会尝试占用其父元素内容区域高度的100%。它不会自动考虑： 父级填充： 如果父节点有 padding，子节点的height: 100% 仍会针对内容区域计算，而...