小韦云链二次开发手册

让你的HTML实现可视化编辑

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

第一步 引入page_edit页面

在小韦云链中实现可视化编辑已经简单,仅需要在需要编辑的HTML模板页面中加入page_edit页面即可

{if condition="input('?page_edit')"}
    {include file="common@base/page_edit"}
{/if}

page_edit页面包含了可视化编辑需要的全部html,css和js。

为了方便从浏览模式进入可视化编辑模式,我们只加了一个条件,就是在URL中加入page_edit=1这个参数,当然你也可以加入更多限制条件,比如只有超级管理员才能编辑等。

第二步 实现编辑功能

单行/单元素编辑

假如网页中有这么一行内容

<p>联系电话:<span>020-88888888</span></p>

你想把电话号码变成可编辑的,只需修改成下面这样即可

<p>联系电话:<span ele-name="mobile">{$mobile|default='020-88888888'}</span></p>

解决一下增加的内容:

  • ele-name 是指定的单行编辑的标签,它的值mobile是自定义的变量,你可以修改为phone等任何你想定义的名称(一般是 英文,不建议中文)
  • {$mobile|default='xxx'} 前面的mobile是你指定的变量名,xxx是原来的内容,表示不配置时就显示原来的。

是不是很简单,再来一个例子:

<div>深圳市小韦云科技有限公司</div>

修改成:

<div ele-name="company">{$company|default='深圳市小韦云科技有限公司'}</div>

注意事项:同一个页面里,如果有多个ele-name标签,需要保证每个标签的值不能重复,否则修改一个另一个也会同步修改,除非你就是想要这种效果。

上面是编辑单行的文件内容,其实还支持图片,多行文字,富文本和超链接的编辑

<img src="{$img|default='123.png'}" width="100" height="100" ele-name="img"/>
<div ele-type="textarea" ele-name="intro">{$intro|raw|default='这是多行输入'}</div>
<div ele-type="editor" ele-name="content">{$content|raw|default="这是富文本内容"}</div>
<a href="{$url|default='###'}" target="_blank" ele-name="url" ele-type="link">首页</a>

需要说明以下几点:

  • 单行文字和图片可以不需要指定ele-type,系统能自动判断
  • 图片编辑是显示一个上传图片的组件
  • 多行输入需要指定ele-type="textarea"
  • 超链接需要指定ele-type="link"
  • 富文本需要指定ele-type="editor",编辑是显示一个编辑器提供编辑
  • 图片元素需要把ele-name放到img标签内,放到外面无法使用。
  • 文字/富文本的ele-name标签要放到内容的第一个上级标签中,像这样是错误的:<div ele-name="company"><div>{$company|default='小韦云'}</div></div>

第三步 进入编辑状态

要进入编辑状态,先以超级管理员的账号登录系统,然后在需要编辑的页面的URL中加入edit_page参数就可以看到编辑的按钮。

假如当前页面访问的地址是:
http://localhost/home/index/index

只需要在URL加入edit_page参数即可
http://localhost/home/index/index/edit_page/1

http://localhost/home/index/index?edit_page=1

当然如果要做得更高级些,也可以在页面里加入一个按钮进行切换

{php}if($mid==1 && input('?page_edit')) { $get = input('');unset($get['page_edit']);{/php}
    <a class="login-button" href="{:U(ACTION_NAME,$get)}"> 退出编辑 </a>
{php} } else if($mid==1 && !input('?page_edit')) { $get = input(''); $get['page_edit'] = 1; {/php}
    <a class="login-button" href="{:U(ACTION_NAME,$get)}"> 编辑页面 </a>
{php} }  {/php}

效果图

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

关键词:可视化 编辑HTML

广告位招商