VvvebJs

<img src="https://yellow-cdn.veclightyear.com/0a4dffa0/265b0de7-2be8-4ea9-b2d3-92cb81a0a97f.png" alt="Vvveb"> 拖放式页面构建器 JavaScript 库。 使用原生 JavaScript 构建，无依赖项或构建工具，并采用 Bootstrap 5 <a href="https://www.vvveb.com">网站</a> | <a href="https://github.com/givanz/VvvebJs/wiki">文档</a> | <a href="https://github.com/givanz/VvvebJs/discussions">论坛</a> | <a href="https://twitter.com/vvvebcms">Twitter</a>

在线演示

如需使用 VvvebJs 页面构建器的完整功能开源 CMS，请查看 Vvveb CMS

演示页面使用 Vvveb 登陆页模板和 Bootstrap 5 的部分和模块。

特性

组件和模块/代码片段的拖放和页内插入。
撤销/重做操作。
单面板或双面板界面。
文件管理器和组件层次导航。
新建页面模态框，支持模板和文件夹选项。
使用 codemirror 插件实现语法高亮的实时代码编辑器。
图片上传（含示例 PHP 脚本）。
页面下载或导出 HTML，或使用示例 PHP 脚本保存页面到服务器。
组件/部分/模块列表搜索。
Bootstrap 5 组件。
媒体库，集成 CC0 图片搜索和服务器上传支持。
图片、视频和 iframe 元素的调整大小手柄。
元素面包屑，便于选择父元素。
支持完整的 Google 字体列表进行字体选择。
Youtube、Google 地图、Charts.js 等小部件。
可选 CKEditor 插件，替代内置文本编辑器。
Zip 下载插件，可将页面及所有资源打包为 zip 文件下载。
SVG 图标组件，捆绑了数百个免费图标。
支持页面元素的滚动动画。
主题全局排版和调色板编辑器。

编辑器默认带有 Bootstrap 5 和小部件组件，可扩展任何类型的组件和输入。

安装

克隆仓库

#git 2.13+ 
git clone --recurse-submodules https://github.com/givanz/VvvebJs

# 旧版 git 
git clone --recursive https://github.com/givanz/VvvebJs

拉取更新

git pull --recurse-submodules

使用

克隆仓库或下载发布版本，然后打开 editor.html

由于浏览器 iframe 安全限制，你需要使用 apache/xampp 等 Web 服务器，并打开 http://localhost/editor.html

要使用图片上传或页面保存功能，你需要安装 PHP。

Docker

本地开发

在 VvvebJs 文件夹中运行

docker-compose up

镜像

或运行镜像

docker run -p 8080:80 vvveb/vvvebjs

打开 http://localhost:8080/editor.php 或 http://localhost:8080/editor.html

保存页面

保存页面功能需要 PHP 或 Node

PHP

如果你使用 Docker、XAMPP 或共享主机账户，PHP 应该可以直接使用，无需更改。

保存功能使用 save.php

Node

对于 Node，进入 VvvebJs 文件夹并运行

npm install express
node save.js

打开 http://localhost:8080/editor.html

保存功能使用 save.js 实现

登陆页面模板

要修改模板文件或章节，请在 demo/landing 文件夹中运行以下命令

安装 gulp

npm i

生成 html 文件

模板 html 片段位于 demo/landing/src 文件夹中。

npm run gulp

监视开发过程中的更改

npm run gulp watch

为页面构建器生成章节列表

章节 html 文件位于 demo/landing/src/sections 文件夹中，按章节组名称分组。

npm run gulp sections

生成模块列表

模块 html 文件位于 demo/landing/src/blocks 文件夹中，按模块组名称分组。

npm run gulp blocks

为章节生成截图

npm run gulp screenshots

使用方法

初始化示例

<!-- bootstrap-->
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<!-- 构建器代码-->
<script src="libs/builder/builder.js"></script>	
<!-- 撤销管理器-->
<script src="libs/builder/undo.js"></script>	
<!-- 输入-->
<script src="libs/builder/inputs.js"></script>	
<!-- 组件-->
<script src="libs/builder/components-bootstrap5.js"></script>	
<script src="libs/builder/components-widgets.js"></script>	

<script>
let pages = [
 {
	name:"narrow-jumbotron", 
	title:"巨幕", 
	url: "demo/narrow-jumbotron/index.html", 
	file: "demo/narrow-jumbotron/index.html"
  },
  {name:"landing-page", title:"登陆页面", url: "demo/landing/index.html", file: "demo/landing/index.html"},
];
	

let firstPage = Object.keys(pages)[0];
Vvveb.Builder.init(pages[firstPage]["url"], function() {
	//在页面加载后在此处加载代码
});

Vvveb.Gui.init();
Vvveb.FileManager.init();
Vvveb.SectionList.init();
Vvveb.Breadcrumb.init();

Vvveb.FileManager.addPages(pages);
Vvveb.FileManager.loadPage(pages[firstPage]["name"]);
Vvveb.Gui.toggleRightColumn(false);
Vvveb.Breadcrumb.init();

<script>