Baue einen WYSIWYG Page Builder mit GrapesJS

Klicken Sie auf ein Element darunter, tippen Sie es an Ort und Stelle neu ein und ändern Sie dann das Aussehen. Hier ist nichts eine Vorschau – die Leinwand ist die Seite, und das Stilpanel bearbeitet dieselben Elemente, die Sie gerade lesen.

Der Standard-Editor: Leinwand, Blöcke, Layer-Baum, Style-Manager und Geräte-Switcher, ohne etwas hinzuzufügen.

WYSIWYG steht für "What You See Is What You Get" (Was du siehst). Ein WYSIWYG-Editor ermöglicht es Nutzern, mit einer visuellen Darstellung ihrer Inhalte zu arbeiten, anstatt rohes HTML und CSS direkt zu bearbeiten. Die Seite, die sie während der Arbeit betrachten, wird veröffentlicht.

Nutzer können die Seite sehen, während sie sie erstellen.

Ein Rich-Text-Editor ist das richtige Werkzeug für einen Absatz. Er formatiert Texte, verarbeitet Überschriften und Listen und verwaltet Inline-Inhalte. Ein Page Builder arbeitet eine Stufe höher: bei den Abschnitten, Spalten, Komponenten, Bildern, Buttons, Styling und responsivem Verhalten, die die Seite um diesen Text bilden.

GrapesJS kombiniert visuelles Seitenbearbeiten mit einer erweiterbaren Komponentenarchitektur – und enthält trotzdem einen Rich-Text-Editor, denn das Bearbeiten eines Absatzes an Ort und Stelle ist nur die Hälfte dessen, was WYSIWYG bedeutet. Wenn Ihr Produkt bereits CKEditor, TinyMCE, Froala oder Quill verwendet, können Sie es behalten: Integrationen für jedes sind auf GJS.Market.

Die Bausteine eines visuellen Schnitterlebnisses, alles Teil des GrapesJS-Kerns und nicht etwas, das man selbst zusammensetzt.

Die gleiche visuelle Schnitt-Engine sitzt unter sehr unterschiedlichen Produkten. Das sind die Formen, die sie am häufigsten annimmt.

Visuelles Bearbeiten wird in der Regel von einem Team angefordert und von einem anderen erstellt. Das sind die Personen an beiden Seiten dieses Gesprächs.

Der Editor kennt sich von Anfang an mit Text, Bildern, Buttons und Abschnitten aus. Was es für deine Anwendung neigens wirken lässt, ist, ihm die Objekte beizubringen, die deine Anwendung bereits hat.

1. 01
2. ↓02
3. ↓03
4. ↓Erweitern Sie den Editor um Komponenten, die zu den Objekten, Inhalten und Arbeitsabläufen Ihrer Anwendung passen.

Die Beispiele auf der dritten Sprosse sind Komponenten, die du für dein eigenes Produkt bauen würdest, keine Plugins, die zum Download verfügbar sind. GrapesJS gibt dir die Komponenten-API; was die Komponente weiß, liegt bei dir.

Schauen Sie Ihre Layouts vorab und passen Sie Ihre Layouts über die Ansichtsgrößen hinweg an, während Sie im visuellen Editor arbeiten, anstatt auf dem Handy zu veröffentlichen und nachzusehen.

Geräte sind konfigurierbar: Die drei oben genannten sind die Standardwerte, und du kannst die Breakpoints definieren, die dein Designsystem tatsächlich verwendet. Stile, die auf einem schmaleren Gerät gesetzt werden, gelten von diesem Breakpoint abwärts.

GrapesJS stellt die visuelle Bearbeitungsebene bereit. Alles drumherum – Benutzer, Berechtigungen, Daten, Speicher und Veröffentlichung – bleibt in der bereits laufenden Anwendung erhalten.

Wenn die Frage speziell ist, wie man den Editor in einem bestehenden Produkt einbaut, hat dieser Walkthrough eine eigene Seite. Einbettbarer Seitenbauer

Baue den Editor um deine bestehende Anwendungsarchitektur herum, anstatt deine Inhalte auf eine separate gehostete Plattform zu verschieben.

const editor = grapesjs.init({
  container: '#editor',

  // Each page is a row in your database, behind your own auth.
  storageManager: {
    type: 'remote',
    autosave: true,
    options: {
      remote: {
        urlStore: `/api/pages/${pageId}`,
        urlLoad: `/api/pages/${pageId}`,
        fetchOptions: { credentials: 'include' },
      },
    },
  },
});

// Publishing stays on your side — your domains, your CDN, your workflow.
async function publish() {
  await fetch(`/api/pages/${pageId}/publish`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ html: editor.getHtml(), css: editor.getCss() }),
  });
}

GJS.Market verkauft Plugins; es hostet nicht deinen Editor, speichert deine Seiten nicht und führt auch nicht deine Datenbank aus. Der Storage Manager zeigt auf den von dir zugewiesenen Endpunkt hinter deiner eigenen Authentifizierung.

Ein visueller Editor sieht aus wie ein Feature und besteht aus einem Dutzend Subsystemen, von denen jedes funktionieren muss, bevor es sich fertig anfühlt.

Woraus ein WYSIWYG-Editor gemacht ist,

• Leinwand
• Auswahl
• Inline-Schnitt
• Drag & Drop
• Komponenten
• Blöcke
• Design
• Reaktionsschnelle Steuerung
• Vermögenswerte
• Rückgängig machen & neu machen
• Lagerung
• Export
• Verlagswesen
• Instandhaltung

Dies ist ein Vergleich des Umfangs, nicht des Zeitplans – wie lange ein Redakteur zum Aufbau benötigt, hängt von deinem Team und davon, wie viel davon du tatsächlich brauchst. Baue dein Produkt, nicht einen weiteren Redakteur von Grund auf.

Eine leere Leinwand ist das Schwierigste, was man einem nicht-technischen Nutzer in die Hand geben kann. Anfangslayouts geben ihnen etwas, das sie verändern können, statt etwas zu erfinden.

Das sind die Arten von Layouts, die die Nutzer des Builders verlangen, keine Produktlisten. Fertige Startpunkte werden als Presets auf GJS.Market ausgeliefert.

Alles unten ist ein echtes Angebot auf GJS.Market, mit seinem Live-Namen und Preis. Jede Gruppe verlinkt auch ihre Kategorie, sodass es immer mehr gibt, als hier passt.

Rich Text Editing

Das Bearbeiten von Text, wo er steht, ist die Hälfte von WYSIWYG. Tausche den eingebauten Editor gegen den, den dein Produkt bereits verwendet.

Durchstöbern Sie diese Kategorie

Inline-RTE

GrapesJS Inline Text Editor — Compatible with CKEditor 5

Ersetzt den eingebauten Rich-Text-Editor durch CKEditor 5, der direkt auf der Leinwand bearbeitet.

69,00 $Ansicht

Inline-RTE

TinyMCE 8 Inline Text Editor

Bringt TinyMCE 6 auf die Bühne für Teams, die bereits darauf standardisiert sind.

69,00 $Ansicht

RTE-Werkzeugleiste

Grapesjs RTE Extensions

Erweitert die Standard-Symbolleiste um die Formatierungsaktionen, die die Standard-Leiste weglässt.

KostenlosAnsicht

Visuelles Design

Gib dem Stilpanel bessere Steuerungen: Farbwähler, echte Schriftarten und präzisen Abstand.

Durchstöbern Sie diese Kategorie

Farbe

Grapesjs Style Gpickr

Ein richtiger Farbauswähler, einschließlich Farbverläufen, im Modemanager.

KostenlosAnsicht

Typografie

Custom Fonts

Fügt den Typografiesteuerungen eigene Schriftfamilien hinzu.

KostenlosAnsicht

Abstand

GrapesJS LayoutEnhancer: Precision Spacing Tool

Macht Rand und Polsterung durch Ziehen auf der Leinwand einstellbar.

49,00 $Ansicht

Blöcke

Fertige visuelle Bausteine, damit die Leinwand am ersten Tag nützlich ist.

Durchstöbern Sie diese Kategorie

Blöcke

Plugin Basic Blocks

Das Starterset aus Blöcken: Spalten, Text, Bild, Video, Karte.

KostenlosAnsicht

Blöcke

Plugin Blocky for Tailwind CSS

Vorgefertigte Abschnitte für Teams, deren Ergebnisse Tailwind sein müssen.

59,00 $Ansicht

Komponenten

Spezialisierte, editierbare Komponenten, einschließlich Elemente, die auf vielen Seiten wiederverwendet werden.

Durchstöbern Sie diese Kategorie

Wiederverwendbar

Symbols

Definiere ein Element einmal und verwende es wieder, sodass eine Bearbeitung jede Instanz aktualisiert.

KostenlosAnsicht

Vermögenswerte

Zusätzliche Medienfunktionen – Uploads, Hosting und Bildbearbeitung im Editor.

Durchstöbern Sie diese Kategorie

Vermögenswerte

Grapesjs Cloudinary

Verweist den Asset-Manager bei Cloudinary für Uploads und Transformationen.

KostenlosAnsicht

Bildbearbeitung

TOAST UI Image Editor

Bilder zuschneiden, drehen und filtern, ohne den Editor zu verlassen.

KostenlosAnsicht

Vorlagen

Vorgefertigte Startpunkte, damit Nutzer nie vor einer leeren Leinwand stehen.

Durchstöbern Sie diese Kategorie

Preset

Webpage Preset

Eine fertige Webseitenkonfiguration, um ein Projekt zu starten.

KostenlosAnsicht

Vorlagen

Templates Manager

Ermöglicht es Nutzern, ihre eigenen Vorlagen zu speichern und neu zu öffnen.

39,00 $Ansicht

Lagerung

Irgendwo, um die Projektdaten abzuspeichern, die der Editor erstellt.

Durchstöbern Sie diese Kategorie

Lagerung

Grapesjs Firebase Storage

Persistiert Projekte auf Firebase, wenn du den Endpunkt lieber nicht bauen möchtest.

KostenlosAnsicht

Seiten

Mehrseitige Projekte, wenn eine Leinwand nicht die ganze Seite umfasst.

Durchstöbern Sie diese Kategorie

Seiten

Pages Manager

Fügt mehrseitige Projekte mit einer Seitenliste im Editor hinzu.

25,00 $Ansicht

KI

KI-unterstützte Generierung im Editor.

Durchstöbern Sie diese Kategorie

KI

Grapesjs GPT Plugin

Generiert Inhalte für die ausgewählte Komponente aus einem Prompt.

KostenlosAnsicht

Vier Startkombinationen, jede auf ein anderes Produkt ausgerichtet. Jedes aufgeführte Plugin ist ein echtes Angebot mit seinem aktuellen Preis.

Die Preise stammen direkt aus dem Katalog und können sich ändern; die Produktseite ist autoritativ.

Der Kern besteht aus einem npm-Paket und einem Container-Element. Alles danach entscheidet, wie viel vom Editor deine Nutzer sehen sollen.

import grapesjs from 'grapesjs';
import 'grapesjs/dist/css/grapes.min.css';

// The visual canvas. Everything the user sees here is the page itself,
// not a preview of it.
const editor = grapesjs.init({
  container: '#editor',

  // The panels that make the editing visual rather than textual.
  styleManager: { appendTo: '#styles' },
  deviceManager: {
    devices: [
      { id: 'desktop', name: 'Desktop', width: '' },
      { id: 'tablet', name: 'Tablet', width: '768px' },
      { id: 'mobile', name: 'Mobile', width: '375px' },
    ],
  },
});

// "What you see is what you get" starts with editing text where it
// already sits. GrapesJS ships an inline rich-text editor, and you can
// replace it with whichever one your product already uses.
editor.setCustomRte({
  enable(el, rte) {
    el.contentEditable = true;
    return rte;
  },
  disable(el) {
    el.contentEditable = false;
  },
});

// A component decides what the user is allowed to change visually.
editor.DomComponents.addType('quote', {
  model: {
    defaults: {
      // Editable in place, but the frame around it stays yours.
      editable: true,
      droppable: false,
      traits: ['author', 'source'],
    },
  },
});

1. Fügen Sie die Komponenten hinzu, die Ihr Produkt benötigt
2. →Passe die Stile und die Editor-Benutzeroberfläche an
3. →Konfigurieren Sie den Speicher an Ihrer eigenen API
4. →Verknüpfe das Verlegen mit deiner Pipeline
5. →Erweitern Sie mit Plugins, bei denen Sie Zeit sparen

Das ist die gesamte Oberfläche: initialisieren, erweitern, speichern, veröffentlichen. Die Dokumentation behandelt jeden Manager ausführlich.

Der Kern ist framework-agnostisch; diese Seiten behandeln die Montage innerhalb eines bestimmten Systems.

Beginnen Sie mit einer Open-Source-Basis für visuelle Bearbeitung und erweitern Sie diese um Ihre Produktanforderungen.

Nachbarseiten für die Fragen, die diese hier nur berührt.

Beginne mit GrapesJS, passe das Bearbeitungserlebnis an und füge die Plugins hinzu, die dein Produkt benötigt.