让代码更简单

当前位置:代码狗 > 开发教程 > WEB开发教程 > 正文

Web可视化页面设计器VvvebJs

重要:本文最后更新于2020-04-08 08:21:21,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

Web可视化页面设计器VvvebJs是什么?前面给大家分享过可视化前端编辑插件ContentTools所见即所得,虽然它也能可视化编辑,但功能较弱,只能在已有的元素上编辑,不能改变网页结构。今天给大家分享个更加强大的可视化页面设计工具VvvebJs。

Web可视化页面设计器VvvebJs

Web可视化页面设计器VvvebJs

预览地址:http://www.vvveb.com/vvvebjs/editor.html

GitHub地址:https://github.com/givanz/VvvebJs

功能特性

  • 组件和块/片段拖放。
  • 撤销/重做操作。
  • 一个或两个面板界面。
  • 文件管理器和组件层次结构导航添加新页面。
  • 实时代码编辑器。
  • 包含示例php脚本的图像上传。
  • 页面下载或导出html或保存页面在服务器上包含示例PHP脚本。
  • 组件/块列表搜索。
  • Bootstrap 4组件等组件

使用方法

<!-- jquery-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.hotkeys.js"></script>

<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- builder code-->
<script src="libs/builder/builder.js"></script>	
<!-- undo manager-->
<script src="libs/builder/undo.js"></script>	
<!-- inputs-->
<script src="libs/builder/inputs.js"></script>	
<!-- components-->
<script src="libs/builder/components-bootstrap4.js"></script>	
<script src="libs/builder/components-widgets.js"></script>	


<script>
$(document).ready(function() 
{
	Vvveb.Builder.init('demo/index.html', function() {
		//load code after page is loaded here
		Vvveb.Gui.init();
	});
});
</script>

当然,仅仅如此可是不行的,你还需要为设计器准备HTML页面,这个就需要你自己的功底了。不会的直接复制官方例子就好,右键查看源代码,或者下载源码文件,里面有例子。

PHP保存文件也有,不过写法太过于简单,存在webshell漏洞,仅供测试使用!

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论 抢沙发

×

请作者吃根烤肠!

支付宝