Vytvoření Tvůrce stránek: init ()

(21. prosince 2020)

Tvůrci stránek jsou velmi výkonnými nástroji pro vytváření webových stránek bez kódu. We can build web pages with special blocks from the page builder. Jako junior programátor není placení peněz za jiné nástroje pro tvorbu stránek užitečné. Proto v této sérii článků vytvořím svůj vlastní nástroj pro tvorbu stránek. Pojďme!

Foto: Christopher Gower on Unsplash

Krok 1: Vyberte své závislosti!

Vytvoření nástroje pro vytváření stránek z nuly je velmi strašný nápad. Více času, více slz a více bolesti krku … Tento scénář je strašnější než hororový film.

GrapesJS a VueJS jsou výkonnější rámce a dost pro mého tvůrce stránek .

Krok 2: Stahování!

V tomto kroku si musím tyto rámce stáhnout.

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

nebo s NPM

  • npm i grapesjs

VueJS

Pro vývojovou verzi

 

Krok 3: První nastavení!

V tomto kroku inicializujeme náš projekt pomocí 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: [] },
});

V tomto článku budu pokračovat ……