GrapesJS 问题

artf

这似乎和 https://github.com/microsoft/TypeScript/issues/35945 有关 作为一个临时的变通方法，你可以先这样做： “''js pluginsOpts： { [myPlugin.toString（）]： { customField： 'customValue' } }

jchautreux

听起来是个好主意

artf

添加了辅助工具[这里]（https://github.com/GrapesJS/grapesjs/commit/7d5d074e4d2735245541bfcbaad666e7bc37ea56）（我稍后也会更新文档中的使用情况）

artf

我决定以 https://github.com/GrapesJS/grapesjs/issues/5149 相关为由结束此事

jchautreux

这其实不是同一个问题，在#5149中，bug是关于如何在工具初始化时设置插件选项。 这里的漏洞与项目最后一次更新有关，该更新定义了一个新index.d.ts，但该新代码与之前插件使用方式不兼容

artf

在上一个版本中，'index.d.ts' 插件签名是一样的，所以我不确定你说的是什么变化 https://github.com/GrapesJS/grapesjs/blob/095466c8cc8034e54888d67beef4cb9296c823e4/index.d.ts#L50-L53 你能分享一下组装过程中的具体错误吗？

duclet

@artf - 你没读完整句子。你可以清楚地看到代码本身，它要求作为完整的“面板”对象给出的参数。在你的文档（如链接所示）中，你并没有给它完整的“面板”对象，而是给它一个带有这些项目的对象。你的例子如下： TypeScript 会抱怨的是，分配给它的对象既不是“面板”的实例，也不是对象属性的数组。

artf

网站上的文档说给出的参数只能是具有以下属性的对象 抱歉，你具体在哪里读到这句话？

GJS Helper

感谢你举报并提醒我们。确保类型定义与文档之间的清晰非常重要。 在查看了GrapesJS v0.21.1 源代码和文档后，似乎并没有差异，而是对 TypeScript 类型定义的潜在误解PanelManager.addPanel。 理解类型定义 PanelManager.addPanel方法（定义在src/panels/index.ts#L82（v0.21.1）中具有以下特征： 让我们来拆解一下“Panel”和“PanelProps”的含义： Panel：这指已经实例化的Gr...

rajevar

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

artf

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

GJS Helper

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

SachinPuthiyoth

看起来 StyleManagerConfig.sectors 中的类型定义没有变化 ： https://github.com/GrapesJS/grapesjs/blob/5c890449a52f526bc480d6dc649ff5e01ec59140/src/stylemanager/config/config.ts#L8 我们是不是应该更新它，使用像 PropertyTypes 这样的功能： https://github.com/GrapesJS/grapesjs/bl...

GJS Helper

感谢您报告此问题。在查看GrapesJS源代码，特别是 dev 分支和最新的稳定版本（0.21.10时），发现 PropertyProps 接口确实包含了 options 属性。因此，StyleManager.addProperty 的类型定义应是正确的，允许你在 PropertyProps 对象中提供options而不会导致 TypeScript 编译器错误。 让我们澄清当前类型的定义： 1.PropertyProps 接口 PropertyProps接口定义于src/s...

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

artf

谢谢@Baghunts，发现得很好。目前的解决方法是 '.addStyle（{ 'border-left'： '...' }）`

GJS Helper

GrapesJS中组件中没有正确应用background-image样式的问题通常有两个常见原因之一：CSSurl()语法错误，或者组件缺乏足够的维度来显示背景。 根本原因分析 缺少url()封装： 在 CSS 中设置background-image时，图像路径必须包含在 url() 函数中。如果你只提供 URL 字符串而没有url()，浏览器会将其视为无效的 CSS 值，样式不会被应用。 错误： "https://example.com/image.jpg" 正确： "u...

artf

正如[这里]（https://grapesjs.com/docs/modules/Storage.html#project-data）解释的，编辑项目时不应重新导入输出HTML，只需导入JSON。

GJS Helper

你遇到的组件 script 函数在保存并重新加载页面后运行两次的问题，是 GrapesJS脚本管理系统中的已知行为（或者说是个 bug，视角度而定）。这源于 GrapesJS 如何处理和序列化组件脚本，用于编辑器画布和最终导出的 HTML。 根本原因解释 当你在GrapesJS组件模型中定义script属性为函数时，GrapesJS执行两个主要动作导致双重执行： 内联脚本嵌入： GrapesJS将脚本函数序列化成字符串，并直接嵌入组件HTML结构中的<script>标签中。...

davidrhoderick

有趣的是，基于CSS的样式确实有效。

artf

看起来 Parcel 变换器试图导入的是 'codemirror/lib/codemirror.js'，而不是 'codemirror/lib/codemirror.css'： “''CSS @import“codemirror/lib/codemirror”; ``` 所以我建议你在相关包裹上开启问题

GJS Helper

你遇到的问题，@parcel/transformer-sass: expected "{"导入GrapesJSSCSS时，是模块捆绑器如Parcel解析和流程样式表导入时常见的问题，尤其是在处理既有JavaScript又包含CSS组件的第三方库时。 根本原因 GrapesJS 利用 CodeMirror 实现其富文本编辑器和代码编辑器功能。虽然 GrapesJS的核心 SCSS（grapesjs/src/styles/scss/main.scss）对自身组件进行了样式化，但...