GrapesJS 问题

artf

我觉得你得向 Vite 社区反映这个问题，核心现在用的是 webpack，运行正常

GJS Helper

谢谢你举报，@pittleCheung。 关于use tsup-node build grapesjs appear Uncaught Error：不支持“codemirror/lib/codemirror”的动态要求，非常好的问题。GrapesJS 推荐的方法是使用事件驱动 API。 从这里开始： 查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/） 寻找“on（）”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现...

artf

@saharelhage请避免将讨论转化为议题。GitHub 问题应仅通过正确遵循模板从[这里]（https://github.com/GrapesJS/grapesjs/issues/new/choose）创建。

GJS Helper

你遇到的选择和调整边框在较小屏幕上出现错误位置的问题，尤其是MacBook，是一个常见问题，通常与浏览器在不同缩放条件（浏览器缩放、操作系统显示比例）下渲染内容的方式或CSS冲突有关。GrapesJS依赖JavaScript通过选中组件的 getBoundingClientRect() 等方法计算选中和调整大小的handle位置和尺寸。如果浏览器的渲染上下文被缩放或变换，这些计算值可能无法准确反映屏幕上的视觉位置，导致对齐不一致。这种差异在较小的视口中更为明显，哪怕是轻微的...

artf

这里的错误是用了箭头函数，只需用 'clickOnElement（） {' 来替代它

GJS Helper

你遇到的问题是，this在自定义组件的视图事件处理程序中window或undefined，是常见的JavaScriptthis绑定问题，尤其是在使用箭头函数时。这不是GrapesJS的bug，而是对对象方法中箭头函数this工作的误解。 根本原因 在JavaScript中，箭头函数（() => { ... }）词法绑定this。这意味着它们没有自己的this上下文;相反，它们继承了定义时的包围作用域的this。在像你view定义这样的对象文字上下文中，词汇this通常是全局...

artf

@wunksert看起来编辑器会多次初始化自己，你是否正确地用 destroy 清除编辑器实例（例如在 useEffect 中）？

wunksert

也许我编辑项目中的结构或命名规范，解决这个问题会更简单。如果比在 GrapesJS Core 里改动更快，我很乐意这么做。

artf

是的，绝对和核心无关

GJS Helper

你遇到的问题是，“对象字面可能只指定已知属性，'el' 不存在于类型 'PanelProps'”，是 TypeScript 编译错误。它表明 el 属性在 PanelProps 接口中不是有效或识别的属性GrapesJS。 根本原因 el属性不包含在GrapesJS的PanelProps界面中。GrapesJS中的面板设计为由编辑器的UI系统内部管理和渲染。PanelProps界面定义了诸如id、content、buttons、visible、className和attri...

SLain123

我自己能修复这个bug，但我无法用fix把分支推送到仓库。看起来我没有推送或创建新分支的权限。

artf

@SLain123你必须从分支 https://stackoverflow.com/questions/38918942/pull-request-from-a-different-repository 创建一个PR

GJS Helper

你遇到的YouTube和Vimeo自动播放无法GrapesJS正常工作的问题，并不是GrapesJS本身的bug，而是现代浏览器自动播放政策的结果。像Chrome、Firefox和Safari这样的浏览器已经实施了严格规则，以防止不想要的媒体播放，这会干扰用户并消耗数据。 根本原因：浏览器自动播放政策 大多数现代浏览器会阻止有声音的自动播放视频，除非满足特定条件。最常见的条件包括： 视频静音： 如果视频以静音状态开始播放，浏览器通常允许自动播放。 用户互动： 如果用户已与页...

pittleCheung

是的，你说得对，我复制了所有匹配的样式，这样我可以粘贴到任何地方，甚至跨浏览器粘贴，我觉得这非常有用。当我删除组件时，对应的样式不会被移除。这是一个大问题，当我在同一个网站上多次复制粘贴时，会导致大量重复的样式，容易引发样式冲突。 所以我不能指望那些风格被简单删除。如果可能的话，我会很感激一些建议。 “如果你复制了所有匹配的样式，它还会包含其他元素使用的样式，所以你不能指望那些样式被简单删除。”

pittleCheung

这仍然是个问题

artf

我不明白这怎么会是核心漏洞。 你用的是自己的复制粘贴逻辑，感觉也不对，你应该注意每个组件/规则的唯一ID。删除这些子组件后，它们的样式依然保留。 如果你复制了所有匹配的样式，它还会包含其他元素使用的样式，所以不能指望那些样式被简单删除。 请，如果你提交了bug，务必提供可复现的演示。

artf

这不是个bug，'Css.addRules'没有任何选项参数。 你可以就这个话题展开讨论，我们可以看看是否有必要引入它

pittleCheung

好的，我明白了，我需要在数组前面添加样式，而不是在最后。比如 arr.unshift（css）。我该怎么做？我可能需要你帮帮我

GJS Helper

你观察到的 editor.Css.addRules() 行为实际上是 GrapesJS CSS API预期且预期的功能。默认情况下，当你使用 editor.Css.addRules(targetCss);时，新的CSS规则会附加在由 GrapesJS管理的样式表末尾。这是许多CSS管理系统中常见的模式，新规则是顺序添加的。 不过， GrapesJS 提供了一个灵活的选项来控制CSS规则的插入点。你正确识别并使用了 at 选项，它允许你指定新规则在样式表中插入的准确索引。当你...

artf

“可编辑”属性默认没有意义，只有其他扩展组件如“文本”或“图像”在内部使用。

riteshdalal

@artf我们如何创建一个组件，使 GJS 不解析这些子节点。

riteshdalal

“可编辑”属性默认没有含义，只被其他扩展组件如“文本”或“图像”内部使用。 这在旧版GJS上是有效的。0.21.3 版本就完全不工作了

artf

与绝对模式相关的问题在此 https://github.com/GrapesJS/grapesjs/issues/3770

GJS Helper

你准确指出了GrapesJS中与绝对位置和画布缩放相关的常见问题。这确实是一个bug，拖拽操作的差值计算没有考虑画布当前的缩放水平，导致光标位置和元素实际移动之间存在差异。 根本原因解释 当dmode设置为absolute时，GrapesJS 利用 top 和 left CSS 属性来定位组件。在拖动操作过程中，编辑器根据屏幕像素计算鼠标位置的变化（deltaX， deltaY）。然后尝试将这些差异直接应用于组件的 left 和 top 样式值，这些值以画布像素为单位。 问...