#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问题，建议使用讨论区。
#53572023年9月3日作者 peters-ben-00071 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 铬 可复制演示链接 https://jsfiddle.net/vmeywbk8/11/ 描述一下那个虫子 我们遇到一个小问题——在给 RichTextEditor 添加动作时，RichTextEditorAction 的“icon”属性被标记为字符串。 但在 addAction 中 （https://github.com/GrapesJS/grapesjs/blob/793599cbd5493c0104db1134bd4b1684341274a7/src/richtexteditor/model/RichTextEditor.ts#L363...
GJS Helper
你准确地指出了GrapesJS关于富文本编辑器（RTE）动作icon属性的类型不匹配。RichTextEditor.addAction方法确实设计成接受string（针对SVG路径或类名）和对icon属性的 HTMLElement实例，但TypeScript对RichTextEditorAction['icon']的定义目前过于严格，只允许string。 根本原因 正如你指出的，addAction方法通过isString(icon)检查提供的icon是否是字符串。如果是字符...
#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...
#53542023年9月1日作者 rozek4 个回答
GrapesJS版本[X] 我确认使用最新版本GrapesJS你用的是什么浏览器？ 版本 1.56.20 Chromium：115.0.5790.171（Offizieller 构建）（arm64）可复制演示链接 没有描述一下那个虫子 引用`canvas.scripts 的脚本 无法基于“导入映射”导入第三方模块。 如果同一模块需要同时被编辑器、预览和HTML导出使用，可能需要准备两个不同的脚本版本——一个用于开发（GrapesJS内），另一个用于部署——这绝对应避免行为准则[X] 我同意遵守本项目的行为准则
artf
https://github.com/GrapesJS/grapesjs/issues/5353#issuecomment-1704023749
rozek
你测试过吗？ 尝试时 在当前版本的GrapesJS中，浏览器日志中会出现以下（扩展版）错误信息：
#53532023年9月1日作者 rozek3 个回答
GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器？ 版本 1.56.20 Chromium：115.0.5790.171（Offizieller 构建）（arm64）可复制演示链接 没有描述一下那个虫子 已建立的联系 不能引用JavaScript模块，否则可能会遇到以下错误： 这使得将现代JavaScript与 GrapesJS结合使用变得非常困难 行为准则[X] 我同意遵守本项目的行为准则
artf
“''js 剧本：[ { src： '...file.js'，类型：'module'}， ], ```
GJS Helper
你遇到的问题是“Uncaught SyntaxError： Cannot use import statement outside outside a module”，是因为GrapesJS中的canvas.scripts选项注入了使用标准<script>标签的脚本URL。默认情况下，浏览器将这些视为经典脚本，不支持ES模块语法（import/export）。要使用现代JavaScript模块，脚本标签必须明确包含type="module"属性。 由于canvas.scri...
#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 时，结果是一个包含方法签名的字符串，例如： "...
#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属性，以实现自由形式拖拽。这正是预...
#53312023年8月24日作者 rozek3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 版本 1.56.20 Chromium：115.0.5790.171（Offizieller 构建）（arm64） 可复制演示链接 没有 描述一下那个虫子 这个bug类似于因缺乏对话而被锁定的问题#596。这个版本可能为当前版本的 GrapesJS提供修复。 如何复现这个漏洞？ 当在靠近视窗边缘打开色彩选择器时，该选择器可能只能部分可见 <img width=“329” alt=“Screenshot-of-Bug” src=“https://github.com/GrapesJS/grapesjs/assets/514882/9300e2...
artf
谢谢@rozek公关总是受欢迎的，我很乐意做评测。
GJS Helper
感谢你报告这个问题，并提供了如此详细的分析和可行的解决方案！你准确指出了一个常见的UI问题，动态定位元素，比如颜色选择器，可能会超出视口边界，尤其是在靠近边缘时。 根本原因 GrapesJS色彩选择器超出视口的根本原因在于其定位逻辑。虽然它尝试正确地将选择器相对于输入字段放置，但并未完全考虑可用的视口空间或GrapesJS编辑器容器中的相对位置。这意味着如果输入字段太靠近屏幕的右侧或底部边缘，计算出的颜色选择器位置会导致部分渲染在屏幕外。 解决方案 你提出的解决方案稳健，正...