#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属性，以实现自由形式拖拽。这正是预...
#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吗？
#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编辑器容器中的相对位置。这意味着如果输入字段太靠近屏幕的右侧或底部边缘，计算出的颜色选择器位置会导致部分渲染在屏幕外。 解决方案 你提出的解决方案稳健，正...
#53302023年8月24日作者 rozek3 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 没有 可复制演示链接 没有 描述一下那个虫子 yarn build 失败，有两个错误： 这可能只是TypeScript太挑剔的问题，因为你可以用 // @ts-ignore 禁用错误信息并重新编译测试会顺利运行。 但因为我刚接触 GrapesJS，不能自评。总之，通常不 // @ts-ignore TypeScript错误...... 行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
感谢你报告这个问题。你已经准确识别出在test/specs/utils/Sorter.ts文件中运行yarn build时，GrapesJS提交4f0c5b1中出现了TypeScript编译错误（TS2532: Object is possibly 'undefined'）。 根本原因 TS2532错误的出现是因为TypeScript严格的空检查（现代GrapesJS配置默认启用）检测到变量或对象在访问其属性时可能被undefined。即使测试的运行逻辑确保该对象在实际中从...
#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...
#53252023年8月21日作者 bohwaz1 个回答
GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器？ 维瓦尔第 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞？执行动作后按Ctrl+Z，以撤销动作被反转，但我的浏览器也会重新打开最后关闭的标签页 预期的行为是什么？ 阻止浏览器执行默认的按键绑定。 目前的行为是什么？ Ctrl+Z 事件传播在 JS 中不会被停止，因此浏览器仍然执行指定的快捷键。 行为准则 [X] 我同意遵守本项目的行为准则
GJS Helper
你遇到的 Ctrl+Z 同时触发撤销和浏览器“重新打开最后关闭标签页”快捷方式GrapesJS问题，是因为 Ctrl+Z 的keydown事件在 GrapesJS内没有被阻止默认操作。虽然 GrapesJS 内部处理撤销命令，但事件可以被加载到浏览器，浏览器会执行自己的默认快捷方式。 要解决这个问题，你需要明确阻止GrapesJS激活时Ctrl+Z键组合的默认浏览器操作。实现这一点最有力的方法是利用GrapesJS的Keymaps API覆盖或增强默认undo键映射行为。...