GrapesJS 问题

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 （不含...

artf

你好，@FaisalShaikhHA这是预期中的行为，但我猜“setRule”的文档有点误导。规则实际上是更新的（不会用相同的选择器创建新的规则），但样式只是被替换。 如果你需要添加新样式而不是替换它们，这就是你应该做的 “''js const selector = '#${this.getId（）}'; const rule = 编辑器。Css.getRule（selector）; 编辑。Css.setRule（selector， { ...统治？getStyle（），...

FaisalShaikhHA

感谢@artf的澄清

GJS Helper

你在editor.Css.setRule上观察到的行为不是bug，而是GrapesJS CSS Composer API设计时如何处理规则更新。当你调用editor.Css.setRule(selector, styleObject)时，如果已经存在带有该选择器（以及媒体查询、状态等其他上下文）的规则，GrapesJS会用你提供的新styleObject版本替换该规则的整个样式对象。它不会自动将新属性与现有属性合并。 这与GrapesJS（以及GrapesJSBackbon...

sneddobuilds

我也遇到同样的问题。

GJS Helper

GrapesJS 中的 TypeError: g.usePlugin is not a function 错误通常源于对插件注册和加载方式的误解，特别是将全局 grapesjs 库对象与 editor 实例混淆。 根本原因 TheThe usePlugin 方法是主 grapesjs 库对象的静态方法，不是editor对象的实例方法。它的目的是以特定 ID 全局注册一个插件，并以特定 ID 与 GrapesJS 库进行，以便以后可用。你错误中的gg.usePlugin is...

artf

https://github.com/GrapesJS/grapesjs/discussions/5163#discussioncomment-6162516

GJS Helper

你GrapesJS项目和官方演示默认display属性的差异，源于GrapesJS画布iframe中加载的CSS，而不是因为GrapesJS本身普遍强制执行display: table或display: flex。GrapesJS提供了一个干净的起点，最终渲染取决于你（或演示）注入到编辑器画布中的基础CSS。 根本原因 您的本地项目： 您的本地项目很可能包含一个全局 CSS 文件或 CSS 框架，默认display: table某些通用元素（如 div 或 section）...

CaptSadaf

CC：@jcamejo @artf

artf

这些动作只在内置RTE上使用，如果你用自定义RTE比如CKEditor替代，就看不到它们。你必须用 CKEditor 来实现自定义逻辑。

GJS Helper

你遇到的问题源于GrapesJS默认的富文本编辑器（RTE）和CKEditor工具栏自定义方式的根本差异。当你启用grapesjs-plugin-ckeditor时，GrapesJS会用功能齐全的CKEditor取代其轻量级的内置RTE。因此，设计用来扩展默认GrapesJSRTE工具栏的rte.add()方法不再适用于CKEditor。 根本原因： 你用rte.add()的代码片段试图修改GrapesJS内部RTE。不过，当grapesjs-plugin-ckeditor...