请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

givanz/VvvebJs: Drag and drop website builder javascript library.

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

givanz/VvvebJs

开源软件地址(OpenSource Url):

https://github.com/givanz/VvvebJs

开源编程语言(OpenSource Language):

JavaScript 100.0%

开源软件介绍(OpenSource Introduction):

VvvebJs

Drag and drop website builder javascript library.

For a full featured CMS using VvvebJs check Vvveb CMS

Built with jQuery and Bootstrap 5.

Live Demo

npm

Using Vvveb landing page template for demo page and Bootstrap 5 sections and blocks.

Features

  • Components and blocks/snippets drag and drop and in page insert.
  • Undo/Redo operations.
  • One or two panels interface.
  • File manager and component hierarchy navigation.
  • Add new page modal with template and folder options.
  • Live code editor with codemirror plugin syntax highlighting.
  • Image upload with example php script included.
  • Page download or export html or save page on server with example php script included.
  • Components/Sections/Blocks list search.
  • Bootstrap 5 components.
  • Media gallery with integrated CC0 image search and server upload support.
  • Image, video and iframe elements resize handles.
  • Elements breadcrumb for easier parent elements selection.
  • Full Google fonts list support for font selection.
  • Youtube, Google maps, Charts.js etc widgets.
  • Optional CKEditor plugin to replace builtin text editor.
  • Zip download plugin to download the page and all assets as zip file.
  • SVG Icon component bundled with hundreds of free icons.
  • Animate on scroll support for page elements.
  • Theme global typography and color pallette editor.

By default the editor comes with Bootstrap 5 and Widgets components and can be extended with any kind of components and inputs.

Usage

<!-- 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-bootstrap5.js"></script>	
<script src="libs/builder/components-widgets.js"></script>	


<script>
$(document).ready(function()  {
	Vvveb.Gui.init();
	Vvveb.FileManager.init();
	Vvveb.SectionList.init();
	var pages = 
	[
		{name:"narrow-jumbotron", title:"Jumbotron",  url: "demo/narrow-jumbotron/index.html", file: "demo/narrow-jumbotron/index.html", assets: ['demo/narrow-jumbotron/narrow-jumbotron.css']},
		{name:"album", title:"Album",  url: "demo/album/index.html", file: "demo/album/index.html", folder:"content", assets: ['demo/album/album.css']},
	];
	
	Vvveb.FileManager.addPages(pages);
	Vvveb.FileManager.loadPage("narrow-jumbotron");
	Vvveb.Breadcrumb.init();
});
</script>

For editor html and components/input javascript templates check editor.html

For css changes edit scss/editor.scss and scss/_builder.scss

Documentation

For documentation check the wiki

Support

If you like the project you can support it with a PayPal donation

License

Apache 2.0




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap