Créer un constructeur de pages: init ()

(21 décembre 2020)

Les constructeurs de pages sont des outils très puissants pour créer des pages Web sans code. Nous pouvons créer des pages Web avec des blocs spéciaux du constructeur de pages. En tant que programmeur junior, payer de largent pour un autre constructeur de pages nest pas utile. Par conséquent, je vais créer mon propre générateur de page dans cette série darticles. Allons-y!

Photo de Christopher Gower sur Unsplash

Étape 1: Choisissez vos dépendances!

Créer un constructeur de page à partir de zéro est une très mauvaise idée. Plus de temps, plus de larmes et plus de douleurs au cou… Ce scénario est plus terrible quun film dhorreur.

GrapesJS et VueJS sont des frameworks plus puissants et très suffisants pour mon constructeur de page .

Étape 2: Téléchargement!

Dans cette étape, je dois télécharger ces frameworks.

GrapesJS

CDN

  • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/grapes.min.js

  • https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.12.17/css/grapes.min.css

ou avec npm

  • npm i grapesjs

VueJS

Pour la version de développement

 

Étape 3: Première configuration!

Dans cette étape, nous initialiserons notre projet avec GrapesJS.

index.html

app.js

const editor = grapesjs.init({
// Indicate where to init the editor. You can also pass an HTMLElement
container: "#gjs",
// Get the content for the canvas directly from the element
// As an alternative we could use: `components: "

Hello World Component!

"`,
fromElement: true,
// Size of the editor
height: "300px",
width: "auto",
// Disable the storage manager for the moment
storageManager: false,
// Avoid any default panel
panels: { defaults: [] },
});

Je vais continuer cet article ……