：我如何创建带有内置“图像”行为的背景图像块？

Question

你好，我正在尝试创建带有背景图像的方块（类似于Grapedrop Image Box）。我添加了这样的新组件： “JavaScript domc.addType（'image-block'， { 扩展：“图像”， 型号：{ 默认值：function（） { 返回 { 名称：“背景图片”， 类型：“图像块”， 标签名称：“div”， 虚无：虚假， Droppable：确实如此， 可调节大小：真 } } }, 浏览量：{ 标签名称：“div”， updateSrc： function（） { const { model， em } = this; const srcResult = model.getSrcResult（）; const style = model.getStyle（）; const isDefaultSrc = model.isDefaultSrc（）; const URL = “url（'”.concat（srcResult， “'）”）; 如果 （srcResult） { model.addStyle（{ '__bg-type'： 'img'， 'backgroun...

kuhelbeher · Accepted Answer

@noogen 谢谢你的建议，我是这样实现的： “JavaScript const domc = 编辑。主成分 domc.addType（'image-block'， { 扩展：“默认”， 型号：{ 默认值：函数 （） { 返回 { 名称：“背景图片”， 类型：“图像块”， 标签名称：“div”， 虚无：虚假， 可掉落：确实如此 } } }, 浏览量：{ 初始化（） { this.listenTo（this.model， 'active'， this.onActive） this.listenTo（this.model， 'change：src'， this.updateImage） }, 事件：{ dblclick：“onActive” }, onActive （） { editor.runCommand（'open-assets'， { 目标：This.model， 类型：['image']， 接受：'image/*' }) }, updateImage（模型，网址）{ 如果 （URL） { const style = model.getStyle（） model.setStyl...

noogen · Answer

@kuhelbeher因为，归根结底，它仍是一个形象。 它不是用来按你想要的方式使用或覆盖的，因为在后端代码（查看图像组件模型和视图）中，https://github.com/artf/grapesjs/blob/dev/src/domcomponents/view/ComponentImageView.js#L55 和 https://github.com/artf/grapesjs/blob/dev/src/domcomponents/model/ComponentImage.js#L83 仍然紧密相连。 最好你创建一个包装组件，然后在视图的“onActive”中执行命令“open-assets”。 提示，见议题 - https://github.com/artf/grapesjs/issues/2250

：我如何创建带有内置“图像”行为的背景图像块？

问题

回答（2）

相关问答

如何在样式管理器中更新样式

绝对模式，拖入画布时组件的样式缺失

从插件的脚本部分调用 updateScript

文本元素在事件扩展后无法重复选择

与此问题匹配的付费插件

浏览插件分类