Téléchargement de VvvebJs - Téléchargement du code source VvvebJs

VvvebJs

Autres ressources

vvebJs 2.0.3

Télécharger

Vvvebjs

Faire glisser et déposer la bibliothèque JavaScript du constructeur de page.
Construit avec Vanilla JS sans dépendances ni outils de construction et bootstrap 5

Site Web | Documentation | Forum | Gazouillement

Démo en direct

Pour un CMS open source complet en utilisant VVVEBJS Page Builder Check VVVEB CMS

Utilisation du modèle de page de destination VVVEB pour la page de démonstration et Bootstrap 5 sections et blocs.

Caractéristiques

Composants et blocs / extraits glisser et déposer et dans l'insert de la page.
Annuler / refaire les opérations.
Une ou deux panneaux interface.
Navigation de la hiérarchie du gestionnaire de fichiers et des composants.
Ajoutez une nouvelle page modale avec des options de modèle et de dossier.
Éditeur de code en direct avec Syntaxe du plugin CodeMirror.
Téléchargement d'image avec un exemple de script PHP inclus.
Page Télécharger ou exporter HTML ou enregistrer la page sur serveur avec un exemple de script PHP inclus.
Recherche de liste des composants / sections / blocs.
Bootstrap 5 composants.
Galerie de médias avec recherche d'image CC0 intégrée et support de téléchargement de serveur.
Les éléments de l'image, de la vidéo et de l'IFRAME redimensionnent les poignées.
Éléments du pain pour la sélection des éléments parent plus faciles.
Prise en charge complète des polices Google pour la sélection des polices.
YouTube, google maps, graps.js, etc. widgets.
Plugin CKEditor en option pour remplacer l'éditeur de texte intégré.
Plugin de téléchargement zip pour télécharger la page et tous les actifs sous forme de fichier zip.
Composant d'icône SVG regroupé avec des centaines d'icônes libres.
Animer sur la prise en charge de défilement pour les éléments de la page.
Thème Global Typographie et éditeur de palette de couleurs.

Par défaut, l'éditeur est livré avec des composants Bootstrap 5 et Widgets et peut être étendu avec tout type de composants et d'entrées.

Installer

Cloner le référentiel

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

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

Tirer les modifications

git pull --recurse-submodules

Usage

Clone le référentiel ou télécharger une version puis ouvrir editor.html

En raison de la sécurité du navigateur Iframe, vous devez utiliser un serveur Web tel qu'Apache / XAMPP et ouvrir http://localhost/editor.html

Pour utiliser la fonction de téléchargement d'image ou d'enregistrement de page, vous devez installer PHP.

Docker

Développement local

De la course du dossier vvvebjs

docker-compose up

Image

Ou exécuter l'image

docker run -p 8080:80 vvveb/vvvebjs

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

Enregistrer la page

Enregistrer la fonction de page nécessite PHP ou le nœud

Php

Si vous utilisez Docker, XAMPP ou un compte d'hébergement partagé, PHP devrait fonctionner sans aucun changement.

La sauvegarde se fait à l'aide de sauvegarde.php

Nœud

Pour le nœud, allez dans le dossier VVVEBJS et exécutez

npm install express
node save.js

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

La sauvegarde se fait à l'aide de sauvegarde.js

Modèle d'atterrissage

Pour apporter des modifications aux fichiers ou sections de modèle, exécutez les commandes suivantes à partir du dossier demo/landing

Installer Gulp

npm i

Générer des fichiers HTML

Le modèle que les partiels HTML sont situés dans le dossier demo/landing/src .

npm run gulp

Surveillez les changements de développement

npm run gulp watch

Générer la liste des sections pour Page Builder

Les fichiers HTML sections sont situés dans le dossier demo/landing/src/sections regroupés dans des dossiers avec le nom du groupe de section.

npm run gulp sections

Générer la liste des blocs

Les fichiers HTML des blocs sont situés dans le dossier demo/landing/src/blocks regroupés dans des dossiers avec le nom du groupe de blocs.

npm run gulp blocks

Générer des captures d'écran pour les sections

npm run gulp screenshots

Usage

Initialiser l'exemple

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