GrapesJS 问题

artf

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

wunksert

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

artf

是的，绝对和核心无关

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

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

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 样式值，这些值以画布像素为单位。 问...

artf

@joukhar“npm install GrapesJS/grapesjs#dev”是不够的，我还没在开发分支里创建构建，所以如果你想本地解决这个问题，必须先自己构建。 无论如何，即使相关问题关闭了，也没必要新建，你仍然可以在那里添加更新，问题没有被锁定。

GJS Helper

感谢您报告此问题并详细说明相关代码部分。您已正确识别问题根源。 根本原因分析： 问题源于JavaScript的textContent属性和document.createComment方法如何处理null或undefined值。当执行el.textContent = null;或document.createComment(null);时，JavaScript隐式地将null转换为字符串的字面值"null"。这是标准的DOM行为，但当 model.content 表示空或不存...

artf

你好，@bgrand-ch，不幸的是，所有涉及解析器（HTML/CSS）的内容都需要使用与DOM相关的API。对于CSS，也许你可以试试用[parser-postcss插件]（https://github.com/GrapesJS/parser-postcss），我预计它能在工作环境下工作

bgrand-ch

你好，@artf，非常感谢你的快速回复😄，我这周会试试看。

bgrand-ch

@artf Post CSS 解析器插件在 Web Worker 中运行得非常完美！谢谢你的帮助。

artf

大概是在八月的第一周

artf

你好@joukhar最新版本是不是也这样？ 如果我用你的 JSON 示例，我能在导出代码中看到“null”（这应该可以修复），但我无法用你的 HTML 示例生成带有 “null” 的 “textnode”，你能为这个用例创建一个可复现的演示吗？ 不确定在哪种情况下textnode可能是“null”，但我们可以肯定能防止这种情况......

joukhar

谢谢你的重玩，如果你需要试玩版，请给我点时间，等我做完会再评论 问题只在存储和加载时出现，但第一次丢弃组件时却没有反应

gxanshu

你好！😊 我不认为这是GrapesJS的bug。我查看了你的复制链接，尝试在画布中添加组件，完全没问题。👍

artf

你必须绕过Vue的代理观察者 https://github.com/GrapesJS/grapesjs/issues/4497#issuecomment-1213078160

GJS Helper

你遇到的问题是，当程序性添加新组件时页面卡顿，源于组件创建和附加方式不当， GrapesJS。你本质上是在添加一个已经作为另一个组件子节点附加到编辑器根包装器的组件，导致无效状态并导致编辑器卡死。 根本原因 让我们拆解一下你的原始代码： this.editoren.DomComponents.getWrapper().append(...)：该行根据提供的定义（{ type: 'text', content: 'New text component' }）创建一个新组件，并...

artf

这是有意为之，我不打算改变这种行为，因为如果你需要每页不同的样式，可以很容易地创建特定的 CSS 选择器。 这种方法的最大好处是允许在不同页面间重复使用选择器。

hasan-aa

我觉得我遇到了这种方法的问题。 我把页面保存到服务器上是这样： “JS const component = page.getMainComponent（）; const css = editor.getCss（{ component， avoidProtected： true }） saveToBackendApi（component，css） 针对 ID 的 CSS 规则运行正常，但带类的规则即使加载在不同页面时也会重复。 例如，'.gjs-row' 类的 #s 规则在每...

GJS Helper

你遇到的 GrapesJS 中多个页面重复 CSS 的问题，是一个常见的混淆点，涉及 GrapesJS 如何在编辑器实例内全局管理样式。默认情况下，GrapesJS的 CssComposer（负责管理所有 CSS 规则的组件）会累积样式。当你初始化多个具有各自styles属性的页面时，这些样式会被添加到全局 CssComposer中，并在所有页面保持活跃，导致样式合并的情况。 根本原因 GrapesJS 中的CssComposer设计为在单一编辑器实例内存储所有 CSS 规...