ดาวน์โหลด VvvebJs - VvvebJs ซอร์สโค้ดดาวน์โหลดดาวน์โหลด

VvvebJs

ทรัพยากรอื่นๆ

vvebJs 2.0.3

ดาวน์โหลด

vvvebjs

Drag and Drop Page Builder JavaScript Library
สร้างด้วยวานิลลา JS โดยไม่มีการพึ่งพาหรือสร้างเครื่องมือและ bootstrap 5

เว็บไซต์ | เอกสาร ฟอรัม Twitter

การสาธิตสด

สำหรับ CMS โอเพ่นซอร์สที่โดดเด่นโดยใช้ VVVEBJS Page Builder ตรวจสอบ VVVEB CMS

การใช้เทมเพลตหน้า Landing Page VVVEB สำหรับหน้าสาธิตและ Bootstrap 5 ส่วนและบล็อก

คุณสมบัติ

ส่วนประกอบและบล็อก/ตัวอย่างลากและวางและในการแทรกหน้า
การเลิกทำ/ทำซ้ำ
อินเทอร์เฟซหนึ่งหรือสองส่วนของแผง
ตัวจัดการไฟล์และการนำทางลำดับชั้นของส่วนประกอบ
เพิ่ม Modal หน้าใหม่ด้วยตัวเลือกเทมเพลตและโฟลเดอร์
ตัวแก้ไขรหัสสดพร้อมการเน้น Codemirror Plugin Syntax
อัพโหลดรูปภาพพร้อมสคริปต์ตัวอย่าง PHP
ดาวน์โหลดหน้าหรือส่งออก HTML หรือบันทึกหน้าบนเซิร์ฟเวอร์พร้อมตัวอย่างสคริปต์ PHP
การค้นหาส่วนประกอบ/ส่วน/บล็อก
ส่วนประกอบ Bootstrap 5
แกลเลอรีสื่อพร้อมการค้นหารูปภาพ CC0 และการอัปโหลดเซิร์ฟเวอร์ในตัว
องค์ประกอบภาพวิดีโอและ iframe ปรับขนาดที่จับ
องค์ประกอบ breadcrumb สำหรับการเลือกองค์ประกอบหลักที่ง่ายขึ้น
การสนับสนุนรายการแบบอักษร Google แบบฟอนต์เต็มรูปแบบสำหรับการเลือกแบบอักษร
YouTube, Google Maps, Charts.js ฯลฯ วิดเจ็ต
ปลั๊กอิน CKEditor เสริมเพื่อแทนที่ตัวแก้ไขข้อความในตัว
ปลั๊กอินดาวน์โหลด zip เพื่อดาวน์โหลดหน้าและสินทรัพย์ทั้งหมดเป็นไฟล์ zip
ส่วนประกอบไอคอน SVG รวมกับไอคอนฟรีหลายร้อยรายการ
เคลื่อนไหวบนการสนับสนุนการเลื่อนสำหรับองค์ประกอบหน้า
ชุดรูปแบบการพิมพ์ระดับโลกและตัวแก้ไขสีพาเล็ตสี

โดยค่าเริ่มต้นตัวแก้ไขมาพร้อมกับส่วนประกอบ 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 Security คุณต้องใช้เว็บเซิร์ฟเวอร์เช่น Apache/XAMPP และเปิด http://localhost/editor.html

ในการใช้คุณสมบัติการอัปโหลดภาพหรือหน้าบันทึกคุณต้องติดตั้ง PHP

นักเทียบท่า

การพัฒนาท้องถิ่น

จากโฟลเดอร์ VVVEBJS Run

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 Partials ตั้งอยู่ในโฟลเดอร์ 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 >