如何由 grapesjs 组件制作定制方块？

快速解答作者 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这种情况，我会请你做一个可复现的演示

GJSBlock• 2026年5月17日

谢谢你举报，@makkaronis4e。关于如何由 grapesjs 组件创建自定义块的好问题。推荐使用 StyleManager 的方法是使用事件驱动的 API。从这里开始：查看你所用模块的[GrapesJS 文档]（https://grapesjs.com/docs/）寻找 on() 事件监听者方法大多数操作可以通过监听编辑器和组件事件来实现常见模式：如果你还卡住了：分享最小的CodeSandbox复制品把你已经尝试过的都写进去提及你的 GrapesJS 版本社区来帮忙！

在 GitHub 上查看完整讨论 →