自定义组件类型和表单元的问题

Question

你好！我正在尝试添加自定义组件类型： “JavaScript domc.addType（'image-block'， { 扩展：“单元”， 型号：{ 默认值：函数 （） { 返回 { 名称：“背景图片”， 类型：“图像块”， 标签名称：“TD”， 虚无：虚假， 可掉落：确实如此 } } }, isComponent （el） { if （el.tagName === 'TD' & el.classList.contains（'bg-image'））） { return { 类型：“image-block” } } } }) 但当我把这个方块放到画布上时，<td>标签在画布和DOM上都不显示。如果我从组件定义中移除 isComponent 函数，它就正常工作。我能得到帮助吗？

artf · Accepted Answer

@kuhelbeher你的代码是正确的（除了是“extend： 'cell''，而不是”extends： 'cell'“），不幸的是，行组件上应用了一个[bug]（https://github.com/artf/grapesjs/blob/af602c30743b54288088d965c3805c0b6e0dac40/src/dom_components/model/ComponentTableRow.js#L19）（或错误逻辑），所以目前我建议先添加这个作为补丁： “''js const modelDefault = domc.getType（'default'）.model; domc.addType（'row'， { 型号：{ initialize（） { modelDefault.prototype.initialize.apply（this， arguments）; }, } }); ``` 现在它应该能成功了：https://jsfiddle.net/corasd1h/

noogen · Answer

@kuhelbeher因为你的组件根据你上面的内容定义是“table”，而不是你 addType 定义的 'td'（tagName' 属性）吗？

kuhelbeher · Answer

@noogen 我觉得问题不在这上面。我尝试这样定义组件和模块： “JavaScript domc.addType（'custom-cell'， { 扩展：“细胞”，型号：{ 默认值：{ 可移除：错误，名称：“自定义单元”，类型：“自定义单元”，可复制：错误，标签名：“TD” } } }) bm.add（'root'， { 标签：“页面包装机”，类别：opt.类别，内容： <表宽度=“400px”> , }) `` 但问题依然存在——td标签（以及里面的所有内容）没有出现在Canvas上，也许是作有误？我正在尝试从内置的“单元”类型创建新的组件类型，但它应该是在表格中。这就是我创建新区块的原因。也许你能给我一些其他解决方案？

自定义组件类型和表单元的问题

问题

回答（3）

相关问答

重新加载自定义组件编辑器后未显示特征

工作者 - 无头“文档未定义”

文本元素在事件扩展后无法重复选择

如何让 TextNode 编辑更新组件内容？

与此问题匹配的付费插件

相关教程

Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)

GrapesJS DevTools: A Developer Panel Inside Your Editor

How We Built Composeit in Record Time Using GrapesJS Shadcn

浏览插件分类