#53462023年8月30日作者 pittleCheung3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 最新版本的Chrome浏览器 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？ <img width=“1665” alt=“image” src=“https://github.com/GrapesJS/grapesjs/assets/114127651/657cbaf6-7e87-4702-ac7f-36c710464728”> 预期的行为是什么？ 风格可能会被简化， 目前的行为是什么？ 首先，我的编辑器只使用一个页面。每次切换页面时，它都会用后端页面替换当前配置。因此，...
pittleCheung
https://github.com/GrapesJS/grapesjs/issues/1855 的扩展想法
artf
这里讲解了如何创建具有相关样式的组件 https://grapesjs.com/docs/modules/Components.html#components-css 只有在那种情况下，编辑者才会安全地删除相关的样式。
GJS Helper
你遇到的问题是删除组件后无法移除其对应样式，导致 CSS 重复，这是像 GrapesJS这样的网页构建器常见的挑战。这种行为是 GrapesJS的CssComposer设计，原因有几个： 根本原因解释： 共享样式： CSS 类和规则通常设计为可跨多个组件重复使用。如果删除一个组件自动移除了与其类关联的所有样式，可能会无意中破坏共享这些类的其他组件的样式。 全局样式： 有些样式是全局的（例如，body { margin: 0; }或应用于HTML标签的样式，如p、h1）。这些...
#53422023年8月26日作者 wsaca1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Firefox 116.0.3 可复制演示链接 https://grapesjs.com/demo-mjml.html 描述一下那个虫子 如何复现这个漏洞？在画布上滚动到底部并选择一个组件打开层次选择画布顶部的组件，滚动功能无法使用。 预期的行为是什么？ 滚动应该能用。 目前的行为是什么？ 滚动不起作用。 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 错误可能在这行： https://github.com/GrapesJS/grapesjs/blob/v0.21.4/src/canvas/view/FrameView.ts#L153...
GJS Helper
你准确指出了GrapesJS中的一个bug，scrollCanvas功能无法滚动画布以显示所选组件，尤其是在从图层面板中选择组件时。这个问题在MJML演示中可重现，源于对哪个元素负责iframe滚动的错误假设。 根本原因： scrollCanvas方法通过src/canvas/view/FrameView.ts中的getOffsetRect，尝试通过this.getBody().scrollTop和this.getBody().scrollLeft来获取当前滚动位置。然而，...
#53392023年8月26日作者 rozek2 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 版本 1.56.20 Chromium：115.0.5790.171（Offizieller 构建）（arm64）可复制演示链接 没有描述一下那个虫子 我希望编辑器里的组件可以通过拖动移动。经过一些研究，我发现 实现此功能是必要的。至少，我的组件现在可以移动了......但是，由于编辑器使用包裹器包裹实际组件视图，包装器位置可能是正确的，但视图位置现在相对于包装器测量，这是错误的： <img width=“284” alt=“moving-component” src=“https://github.com/GrapesJS/grapesjs/...
rozek
抱歉——这是我这边的问题，在编辑器里才显现出来——抱歉打扰了！
GJS Helper
你描述的dragMode: 'absolute'导致组件偏移的问题，确实源自一个根本性的HTML违规：DOM内复制id属性。你的分析和截图准确地定位了根本原因。 根本原因分析 当GrapesJS启用dragMode: 'absolute'时，编辑器会对组件的主包装元素（例如<div class="gjs-comp-wrapper" data-gjs-id="c123">）应用position: absolute并更新top/left CSS属性，以实现自由形式拖拽。这正是预...
#53342023年8月24日作者 DreamCloudProject4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome、Opera、Edge 等 可复制演示链接 https://jsfiddle.net/crszh0jo/6/ 描述一下那个虫子 我正试图让它像这里描述的那样工作[[问题] Canvas #951 无法选择自定义组件（https://github.com/GrapesJS/grapesjs/issues/951），但还是没成功。 我怎样才能让从画布选择和从图层管理器选择一样工作？因为这里描述的解决方案对我来说不适用。我需要允许用户从画布中选择自定义组件，而不是每次都打开图层管理器。 行为准则 [X] 我同意遵守本项目的行为准则
DreamCloudProject
@artf 是的，你说得对。我阻止了点击传播，所以编辑器无法接收点击事件，因此无法执行选择元素的逻辑。 我尝试通过在组件内将“e.stopPropagation（）”替换为“e.preventDefault（）”，将点击传播设置为仅对当前元素进行，现在编辑器中的元素选择逻辑正常了。问题似乎已经解决了。谢谢！
DreamCloudProject
https://github.com/GrapesJS/grapesjs/assets/7961936/12180b41-4c29-489d-9bcd-1ea025a96a8f 这个例子展示了它在我的编辑器中的工作原理。
yatoogamii
你好@DreamCloudProject，看起来你的组件MSC头锁住了。这是一个属性，允许从图层点击组件，但不能从Canva本身点击 你能分享或验证你的组件定义，并检查“锁定”属性是否设置为true吗？
#53282023年8月22日作者 sdimitrenco2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://jsfiddle.net/sdimitrenco/wao1rh0q/30/ 描述一下那个虫子 那是我的组件结构 如果我在文本编辑器中更改span标签中的文本，然后移除焦点，它会返回文本之前的状态。组件的结构看起来正常，是链接，但内容在图片和文字标签内。 演示 ![图片]（https://github.com/GrapesJS/grapesjs/assets/39157717/1a21766a-d945-4d0b-9360-13390722c5dd） 现场演出 https://jsfiddle.net/sd...
GJS Helper
你遇到的问题是，嵌套span（text组件）中的可编辑文本在link组件中会因失去焦点而恢复到原来的状态，这是GrapesJS处理嵌套可编辑内容时已知的同步问题。 根本原因 当你使用富文本编辑器（RTE）编辑span内的文本时，GrapesJS会正确地直接更新DOM元素。当焦点失效（禁用RTE）时，text组件的模型会更新为新内容。这会触发text组件模型上的change:content事件。 问题在于，组件的link父节点是wrapper类型，在配置中已明确设置edita...
#53192023年8月18日作者 AFriboulet-ii2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome V116.0.5845.96 可复制演示链接 https://jsfiddle.net/AdrienFriboulet/npdkshaf/8/ 描述一下那个虫子 https://github.com/GrapesJS/grapesjs/assets/128728949/e85b65c4-53ad-43d0-9f5f-74dc0a181dd0 如何复现这个漏洞？开放提供的小提琴 [此处]（https://jsfiddle.net/AdrienFriboulet/npdkshaf/8/）删除一个组成部分的“段落”选择之前的组件，下...
artf
谢谢@AFriboulet-ii，我会在下次发布时修复。
GJS Helper
你描述的问题是GrapesJS中已知的行为，撤销管理器会正确还原组件的模型属性（包括其classes集合），但负责渲染组件的ComponentView在撤销操作后并不总是视觉上重新同步其DOM元素的classList。这导致视觉上的差异，组件仍然显示与已移除的类相关的样式。 根本原因 当你向组件添加类时，GrapesJS会更新组件的内部classes属性（即Selector模型的集合）。ComponentView监听该集合的变更，并调用其syncClasses方法更新实际D...
#53162023年8月17日作者 BenKhz3 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome v115.0.5790.170可复制演示链接 https://jsfiddle.net/BenKhz/yfwqc6mu/1/ 引用[此处文档]（https://grapesjs.com/docs/api/selector_manager.html#available-events）描述一下那个虫子开放式提供的小提琴 [此处]（https://jsfiddle.net/BenKhz/yfwqc6mu/1/）在 Canvas 上选择一个组件，并通过选择器管理器添加类别。（add 和 update 事件将被捕获）从类管理器中移除一个类e...
artf
你好，@BenKhz之所以这样，是因为“selector*”事件与全局Selectors容器有关（当你从组件中移除选择器时，Selector本身仍然存在，因为它可以在其他地方使用），如果你想跟踪组件选择器的变化，必须使用'component：update：classes'事件
BenKhz
啊！我误会了。谢谢你的澄清。继续加油！
GJS Helper
感谢你举报这个问题并对GrapesJS的善意评价！你提到了一个关于GrapesJS事件的常见困惑点，这是个很好的问题。 根本原因解释 selector:remove事件，正如选择器管理器的GrapesJS API所述，当选择器管理器的全局可选集合中移除Selector模型时触发。这与从特定组件中移除类（由Selector模型表示）不同。 当你通过界面向组件添加类时，如果该类（例如my-class）在选择器管理器的集合中还没有作为Selector模型存在，GrapesJS会为...
#53052023年8月13日作者 rajevar2 个回答
GrapesJS 版本 0.21.4[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 版本 113.0.5672.63可复制演示链接 https://jsfiddle.net/szLp8h4n/11/描述一下那个虫子 如何复现这个漏洞？ 在页面上移动任何文本组件。 警报将会显示。 可能是倒退。 https://github.com/GrapesJS/grapesjs/issues/868 没看到重新开启bug的选项，所以新建一个。 预期的行为是什么？ 警报只会在向画布添加新组件时显示 目前的行为是什么？ 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： 行为准则[X] 我同意遵守本项目的行为准则
artf
你好@rajevar我觉得你是在找“component：create”事件，因为“component：add”是正常工作的（比如用来跟踪某个组件内的任何新移动）
GJS Helper
你正确地指出了事件处理中常见GrapesJS混淆点。component:add事件确实不仅在新组件从块面板拖拽到画布上时触发，也在现有组件在画布上移动时触发。 根本原因解释 这种行为源于GrapesJS内部处理组件移动的方式。当你拖拽现有组件到画布的新位置时，GrapesJS执行一个内部操作，实际上包括： 将组件从其原始父/位置移除。 将组件添加到其新的父/位置。 因为组件内部被“添加”回DOM树（即使是同一个组件实例），component:add事件会被触发。这是一种简化...
#52972023年8月10日作者 FahemAhmad2 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 版本 115.0.5790.171（官方构建）（64位）可复制演示链接 https://codesandbox.io/s/1r0w2pk1vl?file=/index.html描述一下那个虫子 如何复现这个漏洞？...添加此表单类型和表单块 预期的行为是什么？ ...在 getJS 中，我希望编辑器中有相关的 js 代码，我不确定我的期望是否正确，如果不正确，请告诉我该如何实现 目前的行为是什么？ ...getJS（{component}） 返回空字符串 '' 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： @ar 行为准则[X] 我同意...
artf
'getJs' 返回的是你组件模型的 JS（你会放在 'model.defaults.script' 里的那个），而不是组件视图。 请仔细阅读 [组件与JS]（https://grapesjs.com/docs/modules/Components-js.html）
GJS Helper
你遇到的问题是，尽管自定义表单组件的view.events里定义了submit事件处理程序，editor.getJs({ component })却返回空字符串，这是预期行为，而不是GrapesJS中的bug。 根本原因 GrapesJS的getJs方法旨在提取 JavaScript 代码，这些代码旨在独立于 GrapesJS 编辑器运行于导出页面。然而，组件view.events对象中定义的事件处理程序主要用于使组件在 GrapesJS 编辑器的 iframe 上下文中保...
#52802023年8月7日作者 fluke7772 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 版本 115.0.5790.114 可复制演示链接 https://jsfiddle.net/mcraf3se/5/ 描述一下那个虫子 你好，我刚从 GrapesJS 开始，所以很可能我误解了某些根本性的问题。 我在为自定义组件视图设置事件处理程序时遇到了困难。 如何复现这个漏洞？ 在链接的JS小提琴中。将我的分区拖拽到画布上点击其中（应该有带有“stuff”的div）。 预期的行为是什么？ 根据文档[这里]（https://grapesjs.com/docs/modules/Components.html#define-cu...
artf
这里的错误是用了箭头函数，只需用 'clickOnElement（） {' 来替代它
GJS Helper
你遇到的问题是，this在自定义组件的视图事件处理程序中window或undefined，是常见的JavaScriptthis绑定问题，尤其是在使用箭头函数时。这不是GrapesJS的bug，而是对对象方法中箭头函数this工作的误解。 根本原因 在JavaScript中，箭头函数（() => { ... }）词法绑定this。这意味着它们没有自己的this上下文;相反，它们继承了定义时的包围作用域的this。在像你view定义这样的对象文字上下文中，词汇this通常是全局...