Erstellen eines Seitenerstellers: init ()

(21. Dezember 2020)

Seitenersteller sind sehr leistungsfähige Werkzeuge für Erstellen von Webseiten ohne Code. Wir können Webseiten mit speziellen Blöcken aus dem Seitenersteller erstellen. Als Junior-Programmierer ist es nicht sinnvoll, Geld für andere Seitenersteller zu bezahlen. Daher werde ich in dieser Artikelserie meinen eigenen Seitenersteller erstellen. Los gehts!

Foto von Christopher Gower on Unsplash

Schritt 1: Wählen Sie Ihre Abhängigkeiten!

Es ist eine sehr schreckliche Idee, einen Seitenersteller von Null zu machen. Mehr Zeit, mehr Tränen und mehr Nackenschmerzen… Dieses Szenario ist schrecklicher als ein Horrorfilm.

GrapesJS und VueJS sind leistungsfähigere Frameworks und für meinen Seitenersteller sehr ausreichend

Schritt 2: Herunterladen!

In diesem Schritt muss ich diese Frameworks herunterladen.

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

oder mit npm

  • npm i grapesjs

VueJS

Für die Entwicklungsversion

 

Schritt 3: Erstes Setup!

In diesem Schritt initialisieren wir unser Projekt mit 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: [] },
});

Ich werde diesen Artikel fortsetzen …