Unduh VvvebJs - Unduh Kode Sumber VvvebJs

VvvebJs

Sumber daya lainnya

vvebJs 2.0.3

Unduh

VVVEBJS

Library JavaScript Builder Builder.
Dibangun dengan vanilla js tanpa dependensi atau membangun alat dan bootstrap 5

Situs web | Dokumentasi | Forum | Twitter

Demo langsung

Untuk CMS Sumber Terbuka Fitur lengkap menggunakan VVVEBJS Page Builder Periksa VVVEB CMS

Menggunakan template halaman pendaratan vvveb untuk halaman demo dan bootstrap 5 bagian dan blok.

Fitur

Komponen dan blok/cuplikan seret dan drop dan in insert halaman.
Undo/Redo Operations.
Satu atau dua antarmuka panel.
Manajer File dan Navigasi Hirarki Komponen.
Tambahkan Modal Halaman Baru dengan Templat dan Opsi Folder.
Editor Kode Langsung dengan Codemirror Plugin Sintaks Sorot.
Unggahan gambar dengan contoh skrip php disertakan.
Halaman Unduh atau Ekspor HTML atau Halaman Simpan di Server dengan contoh skrip PHP disertakan.
Komponen/Bagian/Blok Daftar Pencarian.
Bootstrap 5 komponen.
Galeri Media dengan Pencarian Gambar CC0 Terpadu dan Dukungan Unggah Server.
Gambar, video, dan elemen iframe mengubah ukuran pegangan.
Elemen remah roti untuk pemilihan elemen induk yang lebih mudah.
Dukungan daftar google font lengkap untuk pemilihan font.
YouTube, Google Maps, Charts.js Etc Widgets.
Plugin ckeditor opsional untuk menggantikan editor teks builtin.
Plugin Unduh Zip untuk mengunduh halaman dan semua aset sebagai file zip.
Komponen ikon SVG yang dibundel dengan ratusan ikon gratis.
Bernama pada dukungan gulir untuk elemen halaman.
Tema Tipografi Global dan Editor Pallette Warna.

Secara default editor hadir dengan komponen Bootstrap 5 dan widget dan dapat diperluas dengan segala jenis komponen dan input.

Memasang

Klon Repositori

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

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

Tarik perubahan

git pull --recurse-submodules

Penggunaan

Klon The Repository atau Unduh Rilis Kemudian Buka editor.html

Karena browser iframe Security, Anda perlu menggunakan server web seperti Apache/XAMPP dan buka http://localhost/editor.html

Untuk menggunakan fitur unggahan atau halaman simpan gambar, Anda harus menginstal PHP.

Buruh pelabuhan

Pengembangan Lokal

Dari folder vvvebjs

docker-compose up

Gambar

Atau jalankan gambar

docker run -p 8080:80 vvveb/vvvebjs

Buka http: // localhost: 8080/editor.php atau http: // localhost: 8080/editor.html

Simpan halaman

Simpan Fungsi Halaman Membutuhkan PHP atau Node

Php

Jika Anda menggunakan Docker, XAMPP atau akun hosting bersama PHP harus berfungsi tanpa perubahan.

Saving dilakukan dengan menggunakan save.php

Node

Untuk node, buka folder vvvebjs dan jalankan

npm install express
node save.js

Buka http: // localhost: 8080/editor.html

Saving dilakukan dengan menggunakan save.js

Template Pendaratan

Untuk membuat perubahan pada file atau bagian template, jalankan perintah berikut dari folder demo/landing

Instal Gulp

npm i

Hasilkan file HTML

Template HTML Partials terletak di folder demo/landing/src .

npm run gulp

Perhatikan perubahan untuk pengembangan

npm run gulp watch

Hasilkan daftar bagian untuk pembangun halaman

Bagian file html terletak di folder demo/landing/src/sections yang dikelompokkan dalam folder dengan nama grup bagian.

npm run gulp sections

Hasilkan daftar blok

Blok file html terletak di folder demo/landing/src/blocks yang dikelompokkan dalam folder dengan nama grup blok.

npm run gulp blocks

Hasilkan tangkapan layar untuk bagian

npm run gulp screenshots

Penggunaan

Inisialisasi contoh

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