Download VvvebJs - VvvebJs download de código fonte

VvvebJs

Outros recursos

vvebJs 2.0.3

Baixar

Vvvebjs

Arraste e solte a biblioteca JavaScript do construtor de páginas.
Construído com JS de baunilha sem dependências ou ferramentas de construção e bootstrap 5

Site | Documentação | Fórum | Twitter

Demoção ao vivo

Para um CMS de código aberto completo usando o VVVEBJS Page Builder Check VVVEB CMS

Usando o modelo de página de desembarque VVVEB para página de demonstração e bootstrap 5 seções e blocos.

Características

Componentes e blocos/trechos arrastam e soltam e na inserção da página.
Operações de desfazer/refazer.
Um ou dois painéis interface.
Gerenciador de arquivos e navegação de hierarquia de componentes.
Adicione a nova página modal com as opções de modelo e pasta.
Editor de código ao vivo com destaque da sintaxe do plug -in Codemirror.
Upload de imagem com exemplo script PHP incluído.
Página download ou exportar a página HTML ou salvar no servidor com o exemplo de script PHP incluído.
Pesquisa de lista de componentes/seções/blocos.
Bootstrap 5 componentes.
Galeria de mídia com pesquisa de imagem CC0 integrada e suporte de upload do servidor.
Os elementos de imagem, vídeo e iframe redimensionam alças.
Elementos Breadcrumb para seleção de elementos dos pais mais fácil.
Suporte completo da lista do Google Fontes para a seleção de fontes.
YouTube, Google MAPS, GRATS.JS etc. Widgets.
O plug -in CKeditor opcional para substituir o editor de texto incorporado.
Zip Download Plugin Para baixar a página e todos os ativos como arquivo zip.
Componente de ícone SVG incluído com centenas de ícones gratuitos.
Animar no suporte de rolagem para elementos da página.
Tema Tipografia Global e Editor de Pallette de Cor.

Por padrão, o editor vem com componentes de bootstrap 5 e widgets e pode ser estendido com qualquer tipo de componentes e entradas.

Instalar

Clone o repositório

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

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

Puxar mudanças

git pull --recurse-submodules

Uso

Clone o repositório ou faça o download de um lançamento e depois o Open editor.html

Por causa da segurança do navegador, você precisa usar um servidor da web como Apache/Xampp e abrir http://localhost/editor.html

Para usar o upload da imagem ou a página Salvar o recurso, você precisa ter o PHP instalado.

Docker

Desenvolvimento local

Da pasta vvvebjs

docker-compose up

Imagem

Ou execute a imagem

docker run -p 8080:80 vvveb/vvvebjs

Aberto http: // localhost: 8080/editor.php ou http: // localhost: 8080/editor.html

Salvar página

Salvar a função da página precisa de php ou nó

Php

Se você usar o Docker, o XAMPP ou uma conta de hospedagem compartilhada, o PHP deve funcionar sem nenhuma alteração.

A economia é feita usando o SAVE.PHP

Nó

Para o nó, vá para a pasta VVVEBJS e corra

npm install express
node save.js

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

A economia é feita usando o salvamento.js

Modelo de pouso

Para fazer alterações nos arquivos ou seções do modelo, execute os seguintes comandos da pasta demo/landing

Instalar gulp

npm i

Gerar arquivos HTML

Os parciais do modelo HTML estão localizados na pasta demo/landing/src .

npm run gulp

Preste atenção nas mudanças para o desenvolvimento

npm run gulp watch

Gere seções Lista para o construtor de páginas

Seções Os arquivos HTML estão localizados na pasta demo/landing/src/sections agrupados em pastas com o nome do grupo de seção.

npm run gulp sections

Gere a lista de blocos

Os arquivos HTML de blocos estão localizados na pasta demo/landing/src/blocks agrupados em pastas com o nome do grupo de blocos.

npm run gulp blocks

Gerar capturas de tela para seções

npm run gulp screenshots

Uso

Inicialize exemplo

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