Een paginabuilder maken: init ()

(21 dec.2020)

Paginabouwers zijn heel krachtige tools voor webpaginas bouwen zonder code. We kunnen webpaginas bouwen met speciale blokken van de paginabuilder. Als junior-programmeur is het niet handig om geld te betalen voor een andere paginabuilder. Daarom zal ik in deze artikelserie mijn eigen paginabuilder maken. Laten we gaan!

Foto door Christopher Gower op Unsplash

Stap 1: kies uw afhankelijkheden!

Het maken van een paginabuilder vanaf nul is een heel vreselijk idee. Meer tijd, meer tranen en meer nekpijn… Dit scenario is erger dan een horrorfilm.

GrapesJS en VueJS zijn krachtigere frameworks en zeer genoeg voor mijn paginabuilder .

Stap 2: downloaden!

In deze stap moet ik deze frameworks downloaden.

GrapesJS

CDNs

  • 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

of met npm

  • npm i grapesjs

VueJS

Voor ontwikkelingsversie

 

Stap 3: Eerste installatie!

In deze stap initialiseren we ons project met 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: [] },
});

Ik ga verder met dit artikel ……