#58122024年4月15日作者 jogibear99881 个回答
可复制演示链接 https://node-projects.github.io/web-component-designer-demo/index.html描述一下那个虫子 几年前我开始用 Webcomponents 设计网页的框架，现在发现了 GrapeJS。想说也许我们目标相同，可以互相受益？（目前不知道具体怎么做，但也许吧）（链接：https://node-projects.github.io/web-component-designer-demo/index.html） 目前我的流程布局设计支持缺失，但它在网格和Flexbox以及绝对定位元素中表现非常好。转换（旋转）内容也有效。我为此创建了一个VSCode扩展：https...
GJS Helper
感谢你的联系以及对 GrapesJS的关注！看到网页设计领域有其他创新项目真是太好了。你的Web Component Designer看起来非常有趣，尤其是它对网页组件的重视，高级布局能力（网格、灵活盒、绝对定位）以及VSCode集成。 GrapesJS 是一个开源、高度可扩展的网页构建框架，旨在为创建可视化编辑器提供坚实基础。虽然它已经支持网页组件并具备广泛的样式功能，包括 flexbox 和 grid，但我们始终期待不同方法如何提升用户体验和开发者工具。 探索项目间潜在...
#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: 中的预期行为 默认情况下，链接组件的可见文本是内联可编辑的。你应该可以在画布中点击链接，然后再...
#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可以测试🥲）。
#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...
#57182024年3月4日作者 mitcht2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 122.0.6261.95（官方版本）（64 位） 可复制演示链接 https://jsfiddle.net/n4x6L1v0/2/ 描述一下那个虫子 如何复现这个漏洞？保存早期版本 grapejs （0.18）的组件数据尝试将 grapesjs 作为项目数据导入到最新版本 预期的行为是什么？ Grapes 可以简单地替换旧的“textnode”条目，并更新为“封装”式。 目前的行为是什么？ 控制台会触发偏移错误 这段代码并非重现该漏洞的必要条件，但它目前让我能够绕过这个问题。 这里附上了我现有 grapesjs 拖动文...
artf
谢谢@mitcht，但正如我之前提到的，主组件根本不可能是 textnode，所以在核心处理这种情况或开启这个问题都没有意义。 总之，如果逻辑对你有效，就直接在编辑器里用它。
GJS Helper
你遇到的问题是一个已知的破坏性变更，涉及GrapesJS内部组件架构的演进，特别是帧根组件的处理方式。在旧版本（比如0.18）中，帧的默认根组件类型可能是textnode或类似，而在最近版本中，它已被标准化为wrapper。 根本原因 GrapesJS 经历了大规模重构，以提升其核心组件模型、渲染和操作能力。作为这些变化的一部分，wrapper 组件被引入为一个特殊的、不可渲染的容器，作为GrapesJS帧内所有内容的根元素。该wrapper组件对编辑器的内部逻辑至关重要，...
#57052024年2月26日作者 bernesto4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v122 可复制演示链接 https://jsfiddle.net/Lk2bwhp4/ 描述一下那个虫子 如何复现这个漏洞？将编辑器放入容器中，然后通过程序调整容器的宽度。 预期的行为是什么？ 编辑器及其所有子节点应相应调整大小。 目前的行为是什么？ 编辑器中所有组件的画布位置都保留了画布调整前的偏移。 注意，窗口调整大小会重置位置。这必须在窗口内通过程序实现。用例包括编辑器在页面上，有其他面板可以调整编辑空间大小。在下面的示例中，查看在将编辑器调整到更大宽度后，工具如何与相关元素对齐。工具保持在原来的位置，直到某个事件触发更...
artf
感谢@bernesto报告，但由于我们无法检测程序布局的变化而不影响性能，在这种情况下，你必须通过 ['editor.refresh（）]]（https://grapesjs.com/docs/api/editor.html#refresh） 手动更新编辑器布局（例如，在你的例子中，调用直接放在 resizeEditor 函数的末尾）
bernesto
你好，@artf，我其实不小心把这个混在你最后接受的拉取请求里（src/canvas/model/Frame.ts）。你可以看看我添加的内容，看看是否造成了问题。我们现在正在测试中，没有看到性能下降，而且它解决了问题。
artf
我其实把这个误混在你上次接受的拉取请求里了 我实际上删掉了，因为看起来没什么关系 🤣 补充回来没问题，但要考虑你的例子只有桌面设备才会有效。宽度填充了容器，这会触发iframe窗口的缩小（然后触发新增事件）。如果你换成更小的设备，这个方法就不行了，那时不会触发调整大小事件，所以你仍然需要刷新调用。