VvvebJs

VvvebJs

拖动页面构建器JavaScript库。
由没有依赖项或构建工具和bootstrap 5的香草JS构建

网站|文档|论坛|叽叽喳喳

现场演示

对于完整的特色开源CMS，使用VvvebJs页面构建器检查VVVEB CMS

使用VVVEB登录页面模板进行演示页面和Bootstrap 5个部分和块。

特征

• 组件和块/片段拖动拖放以及页面插入。
• 撤消/重做操作。
• 一个或两个面板接口。
• 文件管理器和组件层次结构导航。
• 添加带有模板和文件夹选项的新页模式。
• 带有CodeMirror插件语法的实时代码编辑器突出显示。
• 图像上传，其中包括示例PHP脚本。
• 页面下载或导出HTML或包含示例PHP脚本在服务器上的页面。
• 组件/部分/块列表搜索。
• Bootstrap 5组件。
• 具有集成CC0图像搜索和服务器上传支持的媒体库。
• 图像，视频和iframe元素调整句柄。
• 元素面包屑可更轻松地选择父元素。
• 完整的Google字体列表支持字体选择。
• YouTube，Google Maps，Charts.js等小部件。
• 可选的CKeditor插件以替换内置文本编辑器。
• zip下载插件以下载页面，所有资产作为zip文件。
• SVG图标组件与数百个免费图标捆绑在一起。
• 对页面元素的滚动支持动画。
• 主题全局版式和颜色pallette编辑器。

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

安装

• 克隆存储库

 # git 2.13+ 
git clone --recurse-submodules https://*gi*th*ub.com/givanz/VvvebJs

# older git versions 
git clone --recursive https://*gi*th*ub.com/givanz/VvvebJs

• 拉更改

git pull --recurse-submodules

用法

克隆存储库或下载版本，然后打开editor.html

由于浏览器IFRAME安全性，您需要使用网络服务器，例如Apache/XAMPP并打开http://loca*l*h*ost/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或节点

php

如果您使用Docker，则XAMPP或共享托管帐户PHP应该无需任何更改。

保存是使用save.php完成的

节点

对于节点，请转到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

用法

初始化示例

<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:\”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\”},
];

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.Gui.toggleRightColumn(false);
Vvveb.Breadcrumb.init();

<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\" } ,
];
	

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.Gui.toggleRightColumn(false);
Vvveb.Breadcrumb.init();

< script >

对于编辑器html和组件/输入JavaScript模板编辑编辑编辑编辑器.html

用于CSS更改编辑SCSS/EDITOR.SCSS和SCSS/_BUILDER.SCSS

SCSS

将SCSS编译到CSS首先安装Gulp

npm i

那你可以运行

npm run gulp

或使用手表来编译文件更改。

npm run gulp watch

文档

用于文档检查Wiki

支持

如果您喜欢该项目，则可以通过贝宝（Paypal

执照

Apache 2.0