VvvebJs 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
VvvebJs 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
VvvebJs 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
VvvebJs 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
VvvebJs 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

VvvebJs是一个开源的网页拖拽自动生成的JavaScript库,你可以以简单拖拽的方式生成自己需要的网页样式,内置jquery和Bootstrap,你可以拖拽相关的组件进行网页的构建,非常的方便,而且可以实时修改代码,功能丰富,使用简单,界面友好,特别适合一些专注于展示的网页设计。

在线演示:http://www.vvveb.com/vvvebjs/editor.html

网页设计,使用拖拽的方式生成网页!JavaScript库——VvvebJs

相关特性

  • 组件和块/片段拖放。
  • 撤消/重做操作。
  • 一两个面板界面。
  • 文件管理器和组件层次结构导航。
  • 添加新页面。
  • 实时代码编辑器。
  • 包含示例php脚本的图像上传。
  • 页面下载或导出html或将页面保存在服务器上,并附带示例php脚本。
  • 组件/块列表搜索。
  • 引导4个组件。
  • Youtube,Google Maps,Charts.js等小部件。

默认情况下,编辑器附带Bootstrap 4和Widgets组件,可以使用任何类型的组件和输入进行扩展。

用法

<!- 
jquery- > < 脚本 src =“ js / jquery.min.js ” > </ 脚本> 
< 脚本 src =“ js / jquery.hotkeys.js ” > </ 脚本>

<!-bootstrap-> 
< 脚本 src =“ js / popper.min.js ” > </ 脚本> 
< 脚本 src =“ js / bootstrap.min.js ” > </ 脚本>

<!-构建器代码-> 
< 脚本 src =“ libs / builder / builder.js ” > </ 脚本> 	
<!-撤消管理器-> 
< 脚本 src =“ libs / builder / undo.js ” > </ 脚本> 	
<!-输入-> 
< 脚本 src =“ libs / builder / inputs.js ” > </ 脚本> 	
<!-组件-> 
< 脚本 src =“ libs / builder / components-bootstrap4 .js “ > </ 脚本> 	
<脚本 src =“ libs / builder / components-widgets.js ” > </ 脚本>	


< 脚本> 
$ 文档)。准备函数() 
{ 
	Vvveb 生成器INIT '演示/ index.html中' 函数() { 
		//加载代码页后在这里加载
		Vvveb INIT (); 
	} ); 
} ); 
</ 脚本>

对于编辑器html和 components/input javascript模板,请检查editor.html

对于CSS更改,请编辑 scss/editor.scss 和 scss/_builder.scss

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (28)

加载中
有点像山寨的 https://bootstrapstudio.io/
05/06 23:53
回复
举报
代码段翻译的不错
05/06 22:01
回复
举报
竟然可以评论?评论竟然可以被看见?
05/06 15:39
回复
举报
dreamweaver不服
05/06 09:46
回复
举报
不会仅支持mac吧???
05/01 21:12
回复
举报
为什么我下载源码后运行editor.htm ,没有编辑效果???
2019/11/29 07:24
回复
举报
magicaldrag?
2019/11/20 09:11
回复
举报
看起来比grapesjs好用
2019/08/24 16:54
回复
举报
收藏一下,模仿做一个自己的!
2019/08/19 10:50
回复
举报
关键要好扩展
2019/08/15 09:26
回复
举报
更多评论
暂无内容
发表了博客
2019/08/31 12:36

简单拖拽即生成网页 VvvebJs

导读 VvvebJs是一个开源的网页拖拽自动生成的JavaScript库,你可以以简单拖拽的方式生成自己需要的网页样式,内置jquery和Bootstrap,你可以拖拽相关的组件进行网页的构建,非常的方便,而且可以实时修改代码,功能丰富,使用简单,界面友好,特别适合一些专注于展示的网页设计,需要的朋友不可错过! 在线演示:http://www.vvveb.com/vvvebjs/editor.html 相关特性 1、组件和块/片段拖放; 2、撤销/重做操作; 3、一个或两个面板...

0
0
发表于DevOps专区
2019/08/30 22:22

简单拖拽即生成网页 VvvebJs

在线演示:http://www.vvveb.com/vvvebjs/editor.html 相关特性 1、组件和块/片段拖放; 2、撤销/重做操作; 3、一个或两个面板界面; 4、文件管理器和组件层次结构导航添加新页面; 5、实时代码编辑器; 6、包含示例php脚本的图像上传; 7、页面下载或导出html或保存页面在服务器上包含示例PHP脚本; 8、组件/块列表搜索; 9、Bootstrap 4组件等组件。 默认情况下,编辑器附带Bootstrap 4和Widgets组件,可以使用任何类型的组件和输入进...

0
1
发表于大前端专区
2020/01/19 14:14

可视化表单实现的技术储备

[基于 Immutable.js 实现撤销重做功能](https://qianduan.group/posts/5a956f860cf6b624d2239cae?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com "基于 Immutable.js 实现撤销重做功能") [jshare](https://jshare.com.cn/JavaScript/MH90lD "jshare") [jQuery拖拽表单](http://www.jq22.com/jquery-info22546 "jQuery拖拽表单") [基于layui,自定义表单组件](http://www.jq22.com/jquery-info22103 "基于layui,...

0
1
发表了博客
02/06 07:01

实现可视化布局,要用什么可视化拖拽编辑器比较好呢?

关于可视化布局的实现,其实,目前有两种方式可以实现可视化布局的方式。一种是在网上选择一些免费的可视化布局软件,另一种是直接使用在线可视化拖拽编辑器实现。不管用户选择哪种的方式实现可视化布局的话,他们的作用都是一样的。目前可视化拖拽编辑器可以说是种类繁多, 特别是国外, 开源的商业的, 各种版本, 不一而足,接下来小编就简单介绍几个常见的免费、开源、在线的可视化拖拽编辑器。 一、可视化拖拽编辑器——KindE...

0
1
发表于大前端专区
2020/11/30 07:30

20+个可视化搭建工具,一次玩个够

无论大公司还是小公司,我们开发前端工程时候,项目工程有很多类似的功能或者页面,开发经常是加班加点搬砖去做一些无成长反复操作的工作,看键盘上 ctrle 键已经被磨掉了漆,C 和V 也马上磨白了,那对于开发如何把这些重复的工作用机器去解决?在前端资源紧缺的情况下,是否可直接有工具直接就可以搭建出我想要的前端页面?于是业界的页面可视化搭建工具就出现了,本文会介绍目前最流行的页面可视化搭建工具,也会提供一些开源...

0
3
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表于大前端专区
2019/10/22 16:12

有没有什么开源的Web端设计移动端原型的工具

最近要做个类似的,想找些参考,但是目前找到的都是Web端设计Web端界面的框架,不知道各位有没有看过设计移动端原型的Web端工具,主要想了解Web端如何搭建一个移动端的屏幕然后之间的距离转换关系怎么处理?最后还要把设计好的原型导出成指定格式,不知道有没有人做过类似的?

2
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
28 评论
987 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部