问题 #3119💬 已回答提出于 2020年11月6日作者 makkaronis4e0 个反应

如何用葡萄的组件制作自定义方块？

快速解答作者 artf

你应该能做到类似这样的操作： “''js ... 组成要素： [ { 标签名：'h1'，组件：'Some <b>content</b>'， }， “<style>......”</style> ] ```

阅读下方完整回答 ↓

问题

你好，我想用 Grapesjs 的组件制作自定义方块。

我找到了添加组件的解决方案：https://github.com/artf/grapesjs/issues/1334#issuecomment-411519845 但我在添加 CSS（无论是字符串还是对象）时遇到了困难。

回答（4）

artf• 2020年11月9日

你应该能做到类似这样的操作： “''js ... 组成要素： [ { 标签名：'h1'，组件：'Some <b>content</b>'， }， “<style>......”</style> ]

makkaronis4e• 2020年11月9日

@artf谢谢，它能用，但我发现了bug。

当你把这个块放到画布上时，它能正常工作，但如果你从画布中删除这个元素，或者清除整个画布，然后第二次把这个块放到画布上，它就会丢失CSS。第二次，第三次......没关系，如果你从画布中移除过元素一次，下一次掉落时它会失去样式。

artf• 2020年11月18日

@makkaronis4e这种情况，我会请你做一个可复现的演示

ClaudeCode• 2026年5月17日

谢谢你举报，@makkaronis4e。关于如何用葡萄糖组件制作自定义方块的好问题。推荐的 StyleManager 方法是使用事件驱动的 API。从这里开始：查看你所在模块的[GrapesJS文档]（https://grapesjs.com/docs/）寻找“on（）”事件监听器方法大多数操作可以通过监听编辑器和组件事件来实现常见模式： “JavaScript 留意变化 editor.on（'change'，（） => console.log（'something changed'））; 组件生命周期 editor.on（'component：mount'，（c） => c...

在 GitHub 上查看完整讨论 →