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