GrapesJS 问题

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

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

artf

这与核心无关，只是导出 HTML 中缺少一个元标签demo.html '''html <meta name=“viewport” 内容=“width=device-width，initial-scale=1”> ``` 如果你想提交永久居民申请，我很乐意帮你合并

GJS Helper

你遇到的问题不是GrapesJS本身的bug，而是部署响应式网页时常见的疏忽。根本原因是导出的HTML文件<head>部分缺少viewport meta标签。 根本原因解释 现代移动浏览器依赖viewport元标签来正确响应式地渲染网页。没有该标签，许多移动浏览器（尤其是iOS上的Safari）默认将页面渲染为类似桌面的宽度（例如980px），然后缩放以适应设备屏幕。这导致移动设备上会出现“桌面版本”，即使你的CSS包含针对较小屏幕的媒体查询。 GrapesJS演示页面（h...

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 规...

artf

感谢@rmadeiraneto的报告。是的，不幸的是，如果你以这种方式变异数组/对象属性，这就是个问题，为了避免这种情况，你有两个选择：避免直接变异（更新时分配新引用）将“默认值”定义为函数 “''js 默认值： （） => （{ customArray： [1,2,3] }）， ``` 但不幸的是......第二个选项现在😅不行，我会在下一个版本修复它

rmadeiraneto

@artf使用默认值作为函数是可行的，感谢你的快速回复和提供解决这个问题的替代方案。 关于第一个建议，我认为问题不在于人们是否应该变异或不变异对象，因为我们讨论的是使用提供的方法（集合）。抱歉我没时间看源代码，但你很可能在“set”方法里变了默认对象，可能是因为引用来自组件生命周期的早期。同样，没有深入看代码，我假设当你将默认值与组件属性合并时，你保留了对默认对象的引用，而不是使用会返回副本的合并方法，比如 from immutable。 我会尽量找时间研究代码，并提出更具...

GJS Helper

你描述的问题是 JavaScript 中常见的一个陷阱，涉及当可变对象（如数组和对象）被分配为默认值时的处理方式。在 GrapesJS中，当你定义包含数组或对象的defaults组件时，这些组件是通过引用分配给新的组件实例。如果你在某个实例上修改了这样的属性，实际上是在修改原始默认引用，这会影响该组件类型创建的所有后续实例。 根本原因 当你在组件的defaults中定义customArray: [1, 2, 3]时，这个数组[1, 2, 3]只创建一次。每当一个新的“示例”...

artf

谢谢@acantepie请在[proper repo]（https://github.com/GrapesJS/ckeditor）中打开问题，因为这不是核心相关的问题

GJS Helper

你遇到的问题是，GrapesJS 的富文本编辑器（RTE）工具栏在切换多个文本组件时无法正确刷新状态（例如加粗、斜体按钮），这是一个已知的同步问题。这通常是因为浏览器内部选择状态或GrapesJS RTE 的更新机制无法可靠地重新评估新选中的contenteditable元素的激活命令。 根本原因 GrapesJS 使用一个 RichTextEditor 模块（通过 editor.RichTextEditor访问）来管理 RTE 工具栏。该模块监听document上的sel...

krishnaeverestengineering

解决方法：https://github.com/GrapesJS/grapesjs/pull/5176

artf

谢谢@krishnaeverestengineering，但这实际上是将组件移入同父节点时的预期行为。这是因为“at”还应考虑组件本身的索引。 所以，如果你尝试将“组件1”移到索引0或1，什么都不会发生。如果你需要把它移到“组件2”以下，你必须标注索引2

krishnaeverestengineering

谢谢@krishnaeverestengineering，但这实际上是将组件移入同一父节点时的预期行为。这是因为“at”还应考虑组件本身的索引。 所以，如果你尝试将“组件1”移到索引0或1，什么都不会发生。如果你需要把它移到“组件2”以下，你必须标注索引2 但我不太理解它的使用场景。通常在最后版本中，'at '应该算是索引。那怎么把组件从0移到索引1呢？

tomsleeter

这只是间歇性，现在我终于能正常看到 grapejs.com 首页了

tomsleeter

好吧，这是我的错误，我输入错了网址/域名——漏掉了 grapesjs.com 里的“s”。 访问URL grapejs.com 是一个带有大量恶意软件/弹窗的假地址 我相信错误的域名会重定向到每隔一页加载一次 grapesjs.com，这让情况更复杂。 结束了，主网站没有问题。

GJS Helper

看起来你遇到了一个恶意网站，利用 GrapesJS 域名中常见的拼写错误。感谢你报告这一关键观察。 根本原因与解释： 你描述的问题既不是 GrapesJS 框架本身的漏洞，也不是官方 GrapesJS 网站的问题。问题出在域名 grapejs.com （缺少“s”），这是一个恶意的拼写抢注域名。 官方 GrapesJS 网站： GrapesJS 的合法且安全的网站是 https://grapesjs.com。 恶意域名： 域名 https://grapejs.com （不含...