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://github.com/givanz/VvvebJs

# older git versions 
git clone --recursive https://github.com/givanz/VvvebJs

• 拉更改

git pull --recurse-submodules

用法

克隆存儲庫或下載版本，然後打開editor.html

由於瀏覽器IFRAME安全性，您需要使用網絡服務器，例如Apache/XAMPP並打開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或節點

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

用法

初始化示例

<!-- 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