Web可视化页面设计器VvvebJs

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

Web可视化页面设计器VvvebJs

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

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

功能特性

使用方法

<!-- 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漏洞，仅供测试使用！