问题 #2850💬 已回答提出于 2020年6月22日作者 Aiyush-G0 个反应

添加下拉菜单来用特质来屏蔽

快速解答作者 cartifon

我不确定添加后是否还能更改该块......也许你应该给积木添加类别,可以改变颜色、大小之类的。 你可以看看 CSS composer 的相关内容。 https://grapesjs.com/docs/api/css_composer.html#add

阅读下方完整回答 ↓

问题

你好@artf, 希望你一切安好, 我想知道你是否能帮我解决一个简单的问题(我最近开始使用GrapeJS。 问题:使用插件创建方块,在“特质”部分设置一个下拉菜单,可以更改显示的方块类型。 这是我当前的插件代码,显示两个模块: 我希望在设置(特质)标签下拉菜单中能出现,让我可以选择其他内容选项,例如: 简单区块 ------------> 红色 ------------> 橙色 ------------> 黄色 然后相应地调整内容如下: 红色:内容:“<div class=”my-block“>这是一个简单的红色块</div>',” 橙色:内容:“<div class=”my-block“>这是一个简单的橙色块</div>',' 黄色:内容:“<div class=”my-block“>这是一个简单的黄色块</div>', ` 此致敬礼 哎呀

回答(3)

cartifon2020年6月24日

我不确定添加后是否还能更改该块......也许你应该给积木添加类别,可以改变颜色、大小之类的。

你可以看看 CSS composer 的相关内容。

https://grapesjs.com/docs/api/css_composer.html#add

artf2020年7月2日

@Aiyush-G,我觉得你应该创建一个带有该特性的自定义组件,然后改变内容,块本身只包含该组件 “''js 编辑。BlockManager.add('my-first-block', { 标签:“简单块”, 内容:{ 类型:'your-custom-component', yourProp: 'red', 分类:“苹果” }); 编辑。BlockManager.add('my-second-block', { 标签:“第二块”, 内容:{ 类型:'your-custom-component', yourProp: 'orange', 分类:“苹果” }); ```

Aiyush-G2020年7月2日

你好,是的,这就是我在想的,你介意给我举个例子,比如选择红色会显示你选择了红色作为<p>标签;如果你选择橙色,那表示你选择了橙色和一个<p>

相关问答

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

问题 #2491

Anglar 中将事件附加到新插件的问题

大家好, 我试图在我的 Angular 项目中为 Grapejs 添加一个新插件。 需求:新插件,产品名称。当用户在HTML中插入产品插件时,应该会打开一个模态,用户可以输入一些属性,并有一个自动补全搜索,用户可以搜索多个产品,并提交模态,我必须将这些产品注入HTML格式。 我...

1 个回答更新于 2020年1月12日

问题 #2146

插件选项不工作——为什么?

大家好, 我刚接触葡萄,但到目前为止我真的很喜欢它!现在我遇到了一个我似乎无法解决或找不到解决办法的问题,或者说我太笨了。 我自己玩了几个命名插件,然后导入到 grapejs-script 里。它运行正常,创建的方块也能显示出来。唯一的问题是,我的插件Opts值被直接忽略了。有...

3 个回答更新于 2019年8月10日

问题 #3078

如何让 Bootstrap 4 旋转木马在 Grapesjs 上工作?

我成功地用 Grapesjs 做了一个小型拖放构建器。效果很好。我遇到的问题是在拖拽Bootstrap旋转木马进入建造器时。旋转木马在普通页面上正常运作。但在框架内,只有第一张图片显示,我无法用控件切换图片。我研究过lory插件,但我很想用Bootstrap实现这个功能。有葡萄...

3 个回答更新于 2025年1月7日

问题 #1584

无法从 editor.getComponents() 获取 Block 的脚本

下面是我要添加的组件。this.editor.BlockManager.add('dob-mmyy-pii', { ID:“多布-米”, 标签:“DOB(MM,YYYY)(PII)”, 类别:“形式”, 属性:{class:'fa fa-birthday-cake'}, 内容:...

3 个回答更新于 2019年11月19日

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

浏览插件分类

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