问题 #3140💬 已回答提出于 2020年11月13日作者 ZeroCoolHacker0 个反应

画布中的交互组件

快速解答作者 artf

你必须[扩展自定义组件的视图](https://grapesjs.com/docs/modules/Components.html#view)

阅读下方完整回答 ↓

问题

我正在用 Grapesjs 开发一个测验生成器插件。我在想我们是否可以添加一个组件,它是交互式的,点击后会添加新的组件。 例如: ![图片](https://user-images.githubusercontent.com/18724529/99068996-56d21a80-25cf-11eb-8aa7-29ca26ac4e6c.png) 大概是这样的。当丢弃时,没有输入,但点击“添加新字段”时,输入会出现。

可能吗?怎么做?

回答(2)

ClaudeCode2026年5月17日

谢谢你举报,@ZeroCoolHacker。 关于Canvas中的互动组件,这是个很好的问题。推荐的组件方法是使用事件驱动的API。 从这里开始: 查看你所在模块的[GrapesJS文档](https://grapesjs.com/docs/) 寻找“on()”事件监听器方法 大多数操作可以通过监听编辑器和组件事件来实现 常见模式: “JavaScript 留意变化 editor.on('change', () => console.log('something changed')); 组件生命周期 editor.on('component:mount', (c) => console.lo...

相关问答

通过相似的问题讨论继续研究。

问题 #3287

包装造型

首先,祝贺@artf完成了这个了不起的项目 💯 我目前正在做一个项目,想问一下是否可以像编辑里面其他组件那样编辑包装器(主体)。 例如,我想像编辑背景色一样编辑包装的填充部分。 ![葡萄提问](https://user-images.githubusercontent.com...

4 个回答更新于 2022年3月2日

问题 #3579

在放置“activeOnRender”组件后立即打开RTE时丢失了

版本: 0.17.4 你能重现演示中的bug吗?[x] 是的[ ] 不 繁殖步骤:前往[演示](https://grapesjs.com/demo.html)在画布内放置一个“文本”方块点击刚刚丢弃的“文本”组件打开的RTE丢失了位置(参见[附图](https://user-i...

4 个回答更新于 2022年1月17日

问题 #3674

隐形网络组件

版本: 0.17.19 目前的行为是什么? 新增的 webcomponent 是可见的: 在 grapesjs 容器内添加网页组件时,如果组件在 shadow DOM 中有元素,组件是空的。(如果不使用 shadow dom 创建组件,则没有问题。)在图层管理器中可以看到,但是...

4 个回答更新于 2021年8月30日

问题 #3447

JavaScript 因编码问题无法使用

1 - 我复制了打字文本组件代码,而不是演示HTML代码; 2 - 并增加了allowScripts:1; 你可以在这里看到示例:http://bashworld.ru/demo.html 点击 查看代码,我们会看到许多 JS 编码字符。 我该如何解决这个问题?我需要解码所有...

4 个回答更新于 2021年5月22日

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。