Descargar VvvebJs - Descargar el código fuente VvvebJs

VvvebJs

Otros recursos

vvebJs 2.0.3

Descargar

Vvvebjs

Arrastre y suelte la biblioteca JavaScript del constructor de la página.
Construido con js de vainilla sin dependencias ni herramientas de compilación y bootstrap 5

Sitio web | Documentación | Foro | Gorjeo

Demostración en vivo

Para un CMS de código abierto completo utilizando VVVEBJS Page Builder, verifique VVVEB CMS

Uso de la plantilla de página de destino VVVEB para la página de demostración y las secciones y bloques de Bootstrap 5.

Características

Componentes y bloques/fragmentos arrastrar y soltar y en la página Insertar.
Operaciones de deshacer/rehacer.
Uno o dos paneles interfaz.
Manager de archivos y navegación de jerarquía de componentes.
Agregue la nueva página modal con plantilla y opciones de carpeta.
Editor de códigos en vivo con CodeMirror Plugin Syntaxing Destacando.
Carga de imagen con Ejemplo de script PHP incluido.
Descargar o exportar html o guardar página en el servidor con el script PHP de ejemplo incluido.
Componentes/secciones/Bloques Lista de búsqueda.
Bootstrap 5 componentes.
Galería de medios con búsqueda de imágenes CC0 integrada y soporte de carga del servidor.
La imagen, el video y los elementos de los elementos de iframe cambian de tamaño.
Elementos Breadcrumb para la selección de elementos de los padres más fáciles.
Soporte completo de la lista de fuentes de Google para la selección de fuentes.
YouTube, Google Maps, gráficos.js, etc. widgets.
Complemento opcional de ckeditor para reemplazar el editor de texto integrado.
Plugin de descarga zip para descargar la página y todos los activos como archivo zip.
Componente de icono SVG incluido con cientos de iconos gratuitos.
Animar el soporte de desplazamiento para elementos de página.
Tema de tipografía global y editor de paletas de colores.

Por defecto, el editor viene con componentes de Bootstrap 5 y Widgets y se puede extender con cualquier tipo de componentes e entradas.

Instalar

Clonar el repositorio

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

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

Tira de cambios

git pull --recurse-submodules

Uso

Clonar el repositorio o descargar una versión y luego abrir editor.html

Debido a la seguridad del navegador, debe usar un servidor web como Apache/XAMPP y abrir http://localhost/editor.html

Para usar la carga de carga de imagen o la función Guardar de página, debe tener instalado PHP.

Estibador

Desarrollo local

Desde la carpeta VVVEBJS Ejecutar

docker-compose up

Imagen

O ejecutar imagen

docker run -p 8080:80 vvveb/vvvebjs

Abra http: // localhost: 8080/editor.php o http: // localhost: 8080/editor.html

Guardar página

Guardar la función de la página necesita PHP o nodo

Php

Si usa Docker, XAMPP o una cuenta de alojamiento compartido, PHP debería funcionar sin ningún cambio.

Guardar se realiza usando save.php

Nodo

Para el nodo, vaya a la carpeta VVVEBJS y ejecute

npm install express
node save.js

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

Guardar se realiza usando save.js

Plantilla de aterrizaje

Para realizar cambios en los archivos o secciones de plantilla, ejecute los siguientes comandos desde la carpeta demo/landing

Instalar trago

npm i

Generar archivos HTML

La plantilla HTML Particials se encuentran en la carpeta demo/landing/src .

npm run gulp

Esté atento a los cambios para el desarrollo

npm run gulp watch

Generar la lista de secciones para el constructor de páginas

Las secciones de los archivos HTML se encuentran en la carpeta demo/landing/src/sections agrupadas en carpetas con el nombre del grupo de la sección.

npm run gulp sections

Generar la lista de bloques

Los archivos HTML de bloques se encuentran en la carpeta demo/landing/src/blocks agrupada en carpetas con el nombre del grupo BLOCKS.

npm run gulp blocks

Generar capturas de pantalla para secciones

npm run gulp screenshots

Uso

Ejemplo de inicializar

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