问题 #1683💬 已回答提出于 2018年12月26日作者 AkibDeraiya1230 个反应

当编辑器或渲染元素带有动态IP时,如何更改ID/类?

快速解答作者 artf

在你的“block:drag:stop”回调中,你应该修改“droppedComponent”(是[Component](https://grapesjs.com/docs/api/component.html 的一个实例),所以用它的API),“$('#staticId'根本不存在,画布在文档的另一帧里。 “''js const randomId = '...'; droppedComponent.addAttributes({ id: randomId, onclick: 'jsFunc('#${randomId}''), }) ```

阅读下方完整回答 ↓

问题

你好,@artf, 希望你一切安好。 我有两个关于动态方块添加的问题, 1)能用动态ID渲染方块吗? 2)能否更改 'block:drag:stop' 或 'component:add' Grapesjs 方法中的 id/class/onClick 方法? 这是我的一些代码, 在上面的例子中,我需要把“dynamic”设置为“dynamic”而不是“staticId”。这也被传递到点击功能中。 我正在尝试更改那个ID。 但在通过“$('#staticId').attr('id', 'random id is here');' 进行更改后,实际上并没有获得任何变化。 实际上我用的是grapes.js angular.js(Angular 1)。 所以,你能建议我用grapes.js解决我的问题吗? 如果你觉得可以用jQuery解决,也请推荐我用jQuery解决。

回答(3)

artf2018年12月27日

在你的“block:drag:stop”回调中,你应该修改“droppedComponent”(是[Component](https://grapesjs.com/docs/api/component.html 的一个实例),所以用它的API),“$('#staticId'根本不存在,画布在文档的另一帧里。 “''js const randomId = '...'; droppedComponent.addAttributes({ id: randomId, onclick: 'jsFunc('#${randomId}''), })

AkibDeraiya1232018年12月27日

你好,@artf, 感谢你们的快速支持。 现在对我来说很有效, 这对我来说很有效。 假设我有这样的内容, 有没有可能更新img标签的ID和OnClick功能?

相关问答

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

问题 #1691

如何在脚本之外使用变量/函数

你好,@artf, 我怎么才能访问这个变量和函数,这些函数不在脚本里? 我的编码是, 我用的是angular.js(Angular1)。上面的代码是控制器文件的。 请问你能帮我解释一下,我该如何在脚本中同时使用这个全局变量和函数吗?

2 个回答更新于 2020年1月4日

问题 #1817

在编辑器渲染块时更改 HTML 内容

你好@artf 我有一个区块进入了区块管理器 和上面的脚本一样,我希望在该块渲染到界面的同时添加动态HTML内容。 我知道我不需要改变DOM。但我需要用模型来更改,但我不知道怎么用 ID/类别的模式来更改。 你能帮我吗?我该怎么实现?

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

问题 #1733

如何移除由添加块管理器脚本添加的脚本标签

你好@artf 我想导出最终/基于制作的HTML内容,但不包括脚本(只导出由块管理器添加的脚本)。 假设我用block-manager添加一个新块,比如 现在当我把这个块放进编辑器时,它会在文档里创建一个 div 标签,同时还会生成类似的脚本, 所以,当我尝试用“editor....

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

问题 #1325

如何禁用特定方块/组件的掉落

你好, 通过以下代码,我们能够指示是否可以在该组件内丢弃其他组件(方块)......: 我们希望能说明是否可以只针对特定方块丢弃其他组件。 例如: A. 容器块 - >我们只想丢弃列 B. 列块 - >我们只想丢弃列和组件 我们原以为可以通过使用一系列选择器来实现这一点(正如文...

3 个回答更新于 2019年9月17日

与此问题匹配的付费插件

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

查看全部插件

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

免费方案

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

浏览免费插件 →
高级方案

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

浏览高级插件 →

相关教程

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

全部教程 →

浏览插件分类

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