#54572023年10月11日作者 boardmain4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome 117.0 可复制演示链接 本地主持 描述一下那个虫子 grapesjs“： ”^0.21.7“， editor.loadProjectData({ “资产”： []， “风格”： []， “pages”： [{ “组件”： “<div>TEST TEST TEST</div>” }] }) 编辑冻结 行为准则 [X] 我同意遵守本项目的行为准则
antoinematyja
Hi, I encountered the same issue using Vue 3 and using a vue 0 to store the editor. Not sure if this is a good idea though. 代码复制品大致如下： 解决办法：不要用 ref 😅
artf
你能提供一个可复现的演示吗？试了你的例子，我没看到冻结......
boardmain
尝试使用最新版本21.7 我试着把它放到网上，但我只是用自定义命令粘贴了 HTML，粘贴了源代码，但之后编辑器卡住了（我需要关闭页面）。 例如： ~~~ btnImp.onclick = （） => { editor.runCommand（'core：canvas-clear'） 编辑。css.clear（） editor.setComponents（codeViewer.getContent（）.trim（）） 编辑。Modal.close（） } ~~~ 其中 code...
#54412023年10月3日作者 padcom2 个回答
GrapesJS版本[X] 我确认使用最新版本GrapesJS你用的是什么浏览器？ Chrome最新款可复制演示链接 https://github.com/padcom/grapesjs-无ID-for-element-示例描述一下那个虫子 在创建自定义GrapesJS组件时，如果这些组件具有script()（组件的运行时行为），且该组件没有样式，那么根元素没有id属性，这会导致document.querySelectorAll('#<id-goes-here')失败，运行时脚本也不会被调用。 在给出的示例中，我创建了一个特殊的自定义元素，称为<content-preview>（https://github.com/padcom/...
artf
问题源于'jsInHtml： false'的使用以及内部JS生成器的处理方式。 我会尽量在下一个版本里修复这个问题。
GJS Helper
你描述的问题是GrapesJS中已知的行为，涉及HTML序列化过程中组件ID的生成和优化。当自定义组件有script()函数但没有显式样式应用时，GrapesJS可能会在最终HTML输出中省略组件根元素中的id属性（由editor.getHtml()生成）。这是因为GrapesJS主要使用ID来引用组件以进行样式设计。如果没有样式，ID可能被认为内部GrapesJS操作中没有必要，从而省略。 这种遗漏会破坏依赖document.querySelectorAll('#<com...
#54252023年9月26日作者 javadsamiee2 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 117 可复制演示链接 https://jsfiddle.net/mirjavad/ctsx7zer/5/ 描述一下那个虫子 我想为一个页面创建一个克隆动作，并注意到了这个bug。 如何复现这个漏洞？创建多个具有相同组件ID和CSS的页面 页码： [{ 编号：“第1页”， 名称：“第1页”， 组件： '<div id=“comp1”>Page 1</div>'， 风格：“#comp1 { 颜色：红色 }'， }, { 编号：“第2页”， 名称：“第2页”， 组件： '<div id=“comp1”>Page 2</div>'， 风格：'#c...
artf
好的抓包@javadsamiee将在下一次版本中修正
GJS Helper
你遇到的问题是GrapesJS中在初始化多个组件时已知的行为，这些组件拥有相同的初始 ID 和对应的内联样式。GrapesJS 正确识别并重命名组件 ID，以确保编辑器 DOM 内的唯一性（例如 comp1、comp1-2、comp1-3）。但它不会自动解析和更新每个页面对象 styles 属性中定义的 CSS 选择器。结果是所有页面最终都采用针对原始非唯一 ID（#comp1）的 CSS 规则，导致样式错误。 根本原因 当GrapesJS在初始化时处理pages数组，它将...
#54242023年9月26日作者 bgrand-ch2 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 116.0.5845.187可复制演示链接 https://jsfiddle.net/yLcvbwjd/描述一下那个虫子 如何复现这个漏洞？添加 component:styleUpdate 事件用 addStyle 或 setStyle更新组件样式 预期的行为是什么？ component:styleUpdate 开除 目前的行为是什么？ component:styleUpdate 没有被解雇 行为准则[X] 我同意遵守本项目的行为准则
GJS Helper
GrapesJS中的component:styleUpdate事件是编辑层事件，主要由GrapesJS风格管理器或其他内部编辑器机制触发，当组件样式通过UI修改时触发。当你直接调用Component模型实例的component.setStyle()或component.addStyle()时，你是在修改组件底层的骨干模型的style属性。此操作会触发组件模型本身的change:style事件，但不会自动传播到编辑器触发component:styleUpdate事件。 根本原...
#53792023年9月12日作者 Sw33tgt4 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ Chrome 版本 116可复制演示链接 https://jsfiddle.net/h5b0ndvL/1/描述一下那个虫子 当组件在画布中重新渲染时，模型定义中添加的新属性会被渲染，但新添加的类不会在渲染时添加。初始化函数Component.ts添加默认属性和组件属性。 'this.set（'attributes'， { ...（result（this， 'defaults'）.attributes ||{}), ...（this.get（'attributes'） ||{}), }); 但是，在查看 initClasses（） 函数时，我只能...
Sw33tgt
目前作为一个变通方法，我用 'editor.on（'component：mount'， （component） => {}）;' 函数添加了这个功能，直到收到反馈。看起来效果不错。如果某个类从定义中移除，该被移除的类仍然可以在已保存组件的类列表中使用，但我猜没有解决办法。 “打字稿” editor.on（'component：mount'， （component） => { const cls = component.getClasses（） ||[]; const cls...
Sw33tgt
是的，这对类是有意为之，按照你的方法，你无法从组件中移除定义的类，它们会在组件初始时不断添加。 这对于组件中某个类被遗忘，想在渲染时添加它到另一个版本插件时是可以的。我们把这些类设置为私密，这样用户看不到它们，也无法手动移除。 我相信作为一种变通方法，我可以把旧类的定义存到新属性上，然后在渲染新类之前比较它们，看看哪些需要被删除。我可以想办法解决我们需要的。 感谢你的回复@artf，
Sw33tgt
在 Component.ts 的 initClasses（） 函数中做类似这样的功能，会把新类添加到渲染的元素中。告诉我你的看法： “打字稿” const cls = this.get（'classes'） ||攻击者 ||[]; 从const变为令 令 clsArr = isString（cls） ？cls.split（' '） ： CLS; / 与默认职业对比 / cont dCls = result（this， 'defaults'）.classes ||[]; co...
#53782023年9月11日作者 Sw33tgt4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Chrome v116.0.5845.97 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？从画布中选择任意组件打开图层管理器面板选择第一个“分段”组件使用箭头移动该段并改变顺序 预期的行为是什么？ 该部门应将新位置移动 目前的行为是什么？ 控制台正在抛出一个错误：未捕获类型错误：无法读取未定义属性（读取“Canvas”）和未捕获类型错误：无法读取未定义属性（读取“方法”）。 如果需要执行某些代码以重现该漏洞，请将其粘贴到下面： ![图片]（https://github.co...
Sw33tgt
我降级到v0.21.4后这个问题就没了，所以只在最新版本上出现。
padcom
最简单的例子里也有同样的问题。降级到0.4会让它消失。回归？
artf
是的，已经修正了[这里]（https://github.com/GrapesJS/grapesjs/issues/5355）。我会推迟本周末发布新书。
#53722023年9月8日作者 uncldrw1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ Windows、Chrome、React 可复制演示链接 / 描述一下那个虫子 当尝试添加自定义 atRules 如 @container 或 @font-face 时，CSS 总是会编译成 @media。我尝试过多种方法，包括使用 Css.setRules 和 Css.addRules，以及插入 HTML 字符串，但都无济于事。 这是我给的代码： 行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
你遇到的自定义AtRules（如@container或@font-face）在使用editor.Css.addRules时被编译成@media的问题，是GrapesJS当前CssComposer中的已知限制。 根本原因 GrapesJS的CssComposer（负责管理 CSS 规则的模块）有一个内部解析器，主要用于处理标准 CSS 规则（带有属性的选择器）和一组特定的 AtRule，尤其是 @media 查询。当CssComposer遇到 AtRule 时，它没有显式识别...
#53622023年9月5日作者 rozek4 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 1.56.20 Chromium：115.0.5790.171（Offizieller 构建）（arm64） 可复制演示链接 没有 描述一下那个虫子 我用特定的类型拖拽规则定义了自己的组件类型： 但配置的函数从未被调用。相反，拖曳无需任何约束，而插入仅能进入包装元素。 一个可能很重要的细节：我的 dragMode 设置成 'absolute' 行为准则 [X] 我同意遵守本项目的行为准则
rozek
即使将“可拖拽”和“可丢弃”设置为“true”，我也无法将一个元素拖入另一个元素
rozek
第一个解决方法可以帮助将组件放入其他组件：从 'grapesjs.init（{...}）中移除'dragMode：'absolute'`相反，在你希望拖拽（甚至可能可丢弃）的每个组件类型的“model.defaults”中添加“dmode：'absolute' 然而遗憾的是，在将组件移入或移出容器后，绝对位置并不会重新计算......这使得“功能”使用起来非常困难。更不用说，在图层面板内将组件分类到容器中非常繁琐。 而且，“可拖拽”和“可丢弃”这两个函数依然没有被调用。
artf
在绝对模式下，没有移动组件在其他组件内外的概念。绝对模式下的组件只在样式位置上更新，DOM中不会移动，这就是为什么可拖拽/可放在这里不合理。 如果你不完全理解系统原理，请@rozek避免打开BUG问题，建议使用讨论区。
#53552023年9月1日作者 andcmatias1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬116 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？打开图层管理器，尝试移动组件它会禁用该组件，并在控制台中显示错误信息。未捕获类型错误：无法读取未定义属性（读取“画布”） at o.selectTargetModel （Sorter.ts：500：27） at o.onMove （Sorter.ts：545：10） e时（executeBound.js：8：65） 在HTMLDivElement.<匿名> （bind.js：10：12） 在HTMLDivElement...
GJS Helper
感谢您报告此问题。我可以确认这是最新版本GrapesJS中的一个可重现的bug，包括官方演示页面（https://grapesjs.com/demo.html）。该bug阻止用户通过图层管理器中的拖放功能重新排序组件。 根本原因分析 你遇到的错误，Uncaught TypeError: Cannot read properties of undefined (reading 'Canvas')和Uncaught TypeError: Cannot read properti...
#53522023年8月31日作者 rozek3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 1.56.20 Chromium：115.0.5790.171（Offizieller 构建）（arm64） 可复制演示链接 没有 描述一下那个虫子 我有一个带有脚本的组件类型 在使用此类组件预览项目时， GrapesJS 会创建以下 HTML 如果你仔细检查这个输出，会发现内 script () { 没有正确关闭。 我已经尝试过一些变通方法，但还没成功。不过我会继续尝试，因为这个问题最终成了障碍...... 行为准则 [X] 我同意遵守本项目的行为准则
rozek
这很有趣：定义一个独立的功能 以及定义文档中描述的组件类型 按设计运作。 但听起来还是很奇怪，内联函数在导出的HTML中会出现语法错误......
GJS Helper
你遇到的 Uncaught SyntaxError: Unexpected token '{' 源于 GrapesJS 如何处理和嵌入使用ES6方法简写语法定义的组件脚本。当 script 属性的 toString() 表示包含函数签名时，这个问题是已知的行为。 根本原因 当你这样定义组件的 script 属性时： 这是一个 ES6 方法的定义。当 GrapesJS 在内部调用该函数的 toString() 将其嵌入 HTML 时，结果是一个包含方法签名的字符串，例如： "...