GrapesJS 问题

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呢？

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

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

loclovepop

[screencast-www.lovepoptestsite.com-2023.06.01-001711.webm]（https://github.com/GrapesJS/grapesjs/assets/124012807/a171fbbb-dd8b-45a6-901c-d0c2519c8304） 这是关于bug的视频

artf

我看到触摸插件是正常工作的，确保加载时启用移动设备（比如加载后不要模拟），这样聚合物填充才能正确加载。

GJS Helper

你遇到的拖放功能在移动屏幕上无法正常工作的问题，尽管GrapesJS嵌入在你的“测试商店”环境中，尽管使用了grapesjs-touch，这在复杂的网页应用中很常见。这通常源于CSS冲突或事件处理干扰，扰乱了GrapesJS的基于触摸的拖拽逻辑。 根本原因解释： 当GrapesJS独立运行时，它对DOM和CSS拥有完全控制权。然而，当嵌入时，尤其是在像“测试商店”这样的平台上（它很可能拥有自己的全局样式、脚本和事件监听器），这些可能会干扰GrapesJS预期的行为。特别是触...

marktamis

我把一些tsconfig设置从一个正在运行的vite gjs项目复制到我的stenciljs项目里，现在它运行正常了。我觉得你需要对你的 Angular TSCONFIG 做些调整，这样它就不会再抛出错误了 下面是我正在运行的 Stencilsjs TSCONFIG： 似乎正是这个功能让编译成为可能的原因

Deepakanandrao

“skipLibCheck”：true， “skipLibCheck”： true “”成功了。谢谢@marktamis 👍

artf

是的，在我找到该TS输出😞的修复之前，这里需要用“skipLibCheck”： true”

rajevar

抱歉，是我错了。我没用最新的。

artf

@rajevar我无法用最新版本复现，你确定你用的是最新版本吗？

GJS Helper

你发现了GrapesJS中常见的与组件属性管理方式相关的同步问题，尤其是在通过样式管理器修改类，然后其他特征（如id或title）首次更新时。这种行为确实可能导致类意外丢失。 根本原因解释 问题的核心在于组件DOM元素上的实际class属性与组件内部attributes模型属性之间的暂时不同步。以下是分解： 初始组件状态： 当组件首次添加到画布时，其初始属性（包括class和id）会同时设置在DOM元素和组件的内部attributes模型属性上。 通过样式管理器进行类修改：...

artf

如果属性的值与默认定义相同，则跳过。这由 ['avoidDefaults']（https://github.com/GrapesJS/grapesjs/blob/e217dc75d463a84333ee4d9f37216f4f56c77024/src/editor/config/config.ts#L250-L256） 配置选项控制，强烈建议尽量保持 JSON 小。

GJS Helper

这种行为不是bug，而是GrapesJS内部的有意优化，利用了Backbone.js模型。当你将GrapesJS组件序列化为JSON时，通常会省略与该组件类型默认值相符的属性，以减少序列化数据的大小。 根本原因 默认值优化：GrapesJS组件是骨干模型。当调用模型的toJSON()方法（JSON.stringify隐式使用）时，通常只序列化那些与模型定义的defaults值不同的属性。这是保持数据负载精简的常见模式。 你的自定义组件（list，ol，li）：你在defau...

artf

请避免在未遵循问题模板的情况下打开错误问题。 你可以用一个合适的描述和用例来开启新的讨论。

GJS Helper

错误editor.getSelected().view.enableEditing() is not a function之所以发生，是因为enableEditing方法并非直接在ComponentView实例上可用的公共API（editor.getSelected().view所指）。GrapesJS编辑器通过其专用的富文本编辑器（RTE）模块管理内联文本编辑，可通过editor.rte访问。 根本原因 GrapesJS Component模型（由editor.getSe...