小韦云链二次开发手册

模块可视化编辑

小韦云科技-区块链+小程序+公众号+商城+分销+直播+企业官网+外贸电商-为您提供优质的开发服务-电话/微信联系:18123611282

上一节介绍了单行或单元素的可视化编辑的实现

但对于一些比较整体的多元素内容,希望能同时编辑,如以下这些模块

我们可以同时编辑图片,标题和描述

在实现这样的模块化编辑,只需要在模块标签中加入block-id标签,这是当前这个模块的ID名称,同一个页面内不能重复,并且在class属性中加入block-edit这个关键字。以上面的截图为例

<div class="block-edit" block-id="adout1">
    <img src="{$adout1.img|default='__ROOT__/home/hengyi/images/5-6.jpg'}" block-name="img" />
    <h4 block-name="title">{$adout1.title|default='DCS直放站80W功放'}</h4>
    <p block-name="desc">{$adout1.desc|default='具有丰富的运营管理特性'}&&</p>
</div>
<div class="block-edit" block-id="adout2">
    <img src="{$adout2.img|default='__ROOT__/home/hengyi/images/5-6.jpg'}" block-name="img" />
    <h4 block-name="title">{$adout2.title|default='DCS直放站80W功放'}</h4>
    <p block-name="desc">{$adout2.desc|default='具有丰富的运营管理特性'}&&</p>
</div>

上面可以看到,在模块里,每个元素使用block-name标签来定义变量,类似单行中的ele-name

和单行操作一样,模块也是支持图片,多行文字,富文本和超链接的编辑,标签名同样为ele-type,值也是一样的, 如

  • 多行编辑:ele-type="textarea"
  • 超链接需要指定:ele-type="link"
  • 富文本需要指定:ele-type="editor"

然后变量有些不一样,它的格式是:模块ID.变量名,模块中的变量名只需要保存在模块中是唯一就行,模块之间是可以重复的,如上面的block-name="title"在两个模块adout1adout2中都存在,但调用时使用{$adout1.title|default='xx'}{$adout2.title|default='xx'}的方式调用,不存在冲突。

上一节中讲到超链接编辑,我们可以看到只能编辑href熟悉的值,需要还需要同时编辑链接的标题,这里就需要使用模块,如:

<dd  class="block-edit" block-id="company_map">
    <h3><a href="{$company_map.map_url|default='##'}" target="_blank" block-name="map" ele-type="link">{$company_map.map|default='在地图上找到我们'}</a></h3>
</dd>

本文由小韦云原创,转载请注明出处:https://www.bctos.cn/doc/11/1888,否则追究其法律责任

关键词:可视化编辑

广告位招商