问题 #2491💬 已回答提出于 2020年1月6日作者 sukheja-varun1 个反应

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

快速解答作者 pouyamiralayi1

@sukheja-瓦伦将任何事件附加到新插件上 在插件内,你必须先定义一个自定义类型组件: 然后定义一个使用我们之前定义的自定义组件类型的新块: 对于模态,我们定义以下函数: “createContent”会生成你模态的内部html。 “applyChanges”是模态内提交按钮的点击处理程序。最后: 现在我们有了组件作为一个块,并且有办法显示模态,我们需要在插件内为 [drop event ](https://grapesjs.com/docs/api/editor.html#canvas)定义一个监听器: 调用API 正如你在“ApplyChanges”里看到的,你可以使用任何你想要的网络库,但Grapesjs内部没有内置的网...

阅读下方完整回答 ↓

问题

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

我查了文档,找到了下面的例子

  function myPlugin(editor){
      编辑。BlockManager.add('my-first-block', {
        标签:“简单块”,
        内容: '<div class=“my-block”>这是一个简单的块</div>',
      });
  }

但当我尝试做这个时,我却无法做到:

  • 将任何事件附加到新插件上
  • 调用API
  • 注入自定义HTML

回答(1)

pouyamiralayi2020年1月7日

@sukheja-瓦伦将任何事件附加到新插件上 在插件内,你必须先定义一个自定义类型组件: 然后定义一个使用我们之前定义的自定义组件类型的新块: 对于模态,我们定义以下函数: “createContent”会生成你模态的内部html。 “applyChanges”是模态内提交按钮的点击处理程序。最后: 现在我们有了组件作为一个块,并且有办法显示模态,我们需要在插件内为 [drop event ](https://grapesjs.com/docs/api/editor.html#canvas)定义一个监听器: 调用API 正如你在“ApplyChanges”里看到的,你可以使用任何你想要的网...

相关问答

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

问题 #2850

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

你好@artf, 希望你一切安好, 我想知道你是否能帮我解决一个简单的问题(我最近开始使用GrapeJS。 问题:使用插件创建方块,在“特质”部分设置一个下拉菜单,可以更改显示的方块类型。 这是我当前的插件代码,显示两个模块: 我希望在设置(特质)标签下拉菜单中能出现,让我可以...

3 个回答更新于 2020年7月2日

问题 #2146

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

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

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

问题 #3078

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

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

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

问题 #2154

自定义组件集成

你好! 我想用 Angular CLI 7 将一个自定义组件集成到 GrapesJS,但它无法渲染。 我的组件是建立在另一个开源组件之上的。当我想在任何 Angular 项目中包含它时,我会直接导入 typescript 文件中的依赖/库,并在 HTML 中导入组件本身(例如...

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

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

浏览插件分类

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