同步操作将从 Gitee 极速下载/VvvebJs 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
Drag and drop website builder javascript library.
Built with jQuery and Bootstrap 5.
Website | Documentation | Forum | Twitter
For a full featured open source CMS using VvvebJs check Vvveb CMS
Using Vvveb landing page template for demo page and Bootstrap 5 sections and blocks.
By default the editor comes with Bootstrap 5 and Widgets components and can be extended with any kind of components and inputs.
Clone the repository or download a release then open editor.html
Because of browser iframe security you need to use a webserver such as xampp and open http://localhost/editor.html
To use the image upload or page save feature you need to have php installed.
To compile scss to css first install gulp
npm i
Then you can run
npm run gulp
or use watch to compile on file change.
npm run gulp watch
<!-- 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>
let pages = [
{
name:"narrow-jumbotron",
title:"Jumbotron",
url: "demo/narrow-jumbotron/index.html",
file: "demo/narrow-jumbotron/index.html"
},
{name:"landing-page", title:"Landing page", url: "demo/landing/index.html", file: "demo/landing/index.html"},
];
$(function() {
let firstPage = Object.keys(pages)[0];
Vvveb.Builder.init(pages[firstPage]["url"], function() {
//load code after page is loaded here
});
Vvveb.Gui.init();
Vvveb.FileManager.init();
Vvveb.SectionList.init();
Vvveb.Breadcrumb.init();
Vvveb.FileManager.addPages(pages);
Vvveb.FileManager.loadPage(pages[firstPage]["name"]);
Vvveb.Breadcrumb.init();
//if url has #no-right-panel set one panel demo
if (window.location.hash.indexOf("no-right-panel") != -1) {
Vvveb.Gui.toggleRightColumn();
}
});
<script>
For editor html and components/input javascript templates edit editor.html
For css changes edit scss/editor.scss
and scss/_builder.scss
For documentation check the wiki
If you like the project you can support it with a PayPal donation or become a backer/sponsor via Open Collective
Apache 2.0
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。