GrapesJS Storage Manager: Speichern im Backend (2026)

Was der Storage Manager macht

Der GrapesJS Storage Manager speichert die Projektdaten des Redakteurs – die vollständigen, wiederladbare Darstellung der Seite. Das einfachste Produktionssetup ist remote Speicher zeigt auf dein Backend; für volle Kontrolle kannst du Registrieren Sie einen individuellen Adapter.

1. Entfernte Speicherung

const editor = grapesjs.init({
  container: '#gjs',
  storageManager: {
    type: 'remote',
    autosave: true,
    stepsBeforeSave: 3,        // save after 3 changes
    options: {
      remote: {
        urlStore: '/api/page',  // POST project JSON here
        urlLoad: '/api/page',   // GET project JSON here
        headers: { 'Authorization': 'Bearer ' + token },
      },
    },
  },
});

GrapesJS POSTET das Projekt an urlStore und lädt es von urlLoad. Füge hier bei Bedarf Framework-CSRF-Header hinzu.

2. Manuell speichern statt automatisch speichern

// storageManager: { type: 'remote', autosave: false, ... }
document.getElementById('save').onclick = () => editor.store();

3. Ein vollständig kundenspezifischer Speicheradapter

editor.Storage.add('my-store', {
  async load() {
    const res = await fetch('/api/page');
    return res.ok ? res.json() : {};
  },
  async store(data) {
    await fetch('/api/page', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
  },
});

// then:
grapesjs.init({
  container: '#gjs',
  storageManager: { type: 'my-store' },
});

Produktionstipps

Optimieren Sie das Sparen für den echten Gebrauch. stepsBeforeSave kontrolliert, wie gesprächig das Autosave ist – zu niedrig und du hämmerst deine API bei jeder tastendruckähnlichen Änderung; ein Wert von 3–5 ist meist richtig, oder du wechselst zu einer manuellen Speichertaste. Sende deine Auth (Inhabertoken oder CSRF) in die headers Option, damit die Store-Route geschützt bleibt. Wenn mehrere Personen dieselbe Seite bearbeiten können, füge eine Version hinzu oder updated_at schau auf dem Server nach und lehne veraltete Texte ab, anstatt still zu überschreiben. Und den Fehlerpfad managen: Einen sichtbaren Fehler erkennen (und das In-Memory-Projekt behalten), wenn eine Speicheranfrage fehlschlägt, damit keine Arbeit verloren geht.

Voraussetzungen

Du brauchst einen laufenden GrapesJS-Editor und einen Backend-End-Endpunkt (jede Sprache). Die Aufbewahrung Manager speichert die Projektdaten des Editors – die vollständigen, nachladbaren Repräsentation der Seite – sodass Sie genau das gespeicherte Dokument wieder öffnen können.

Mehrere Seiten verwalten

Die meisten Apps speichern mehr als eine Seite. Geben Sie eine ID an Ihre Endpunkte und geben Sie den Datensatz durch entweder über die URL oder einen benutzerdefinierten Header:

storageManager: {
  type: 'remote',
  options: { remote: {
    urlStore: `/api/pages/${pageId}`,
    urlLoad: `/api/pages/${pageId}`,
    headers: { Authorization: `Bearer ${token}` },
  }},
}

Benutzerdefinierter Adapter mit Fehlerbehandlung

editor.Storage.add('api', {
  async load() {
    const res = await fetch(`/api/pages/${pageId}`);
    if (!res.ok) throw new Error('load failed');
    return res.json();
  },
  async store(data) {
    const res = await fetch(`/api/pages/${pageId}`, {
      method: 'POST', headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    });
    if (!res.ok) throw new Error('save failed');
  },
});

Optimieren Sie Autosave und Oberflächenfehler

stepsBeforeSave kontrolliert, wie gesprächig das Autosave ist – 3–5 ist meist richtig, oder Benutze eine manuelle Speicher-Taste (autosave: false + editor.store()). Achte auf Speicherfehler und zeige dem Benutzer eine sichtbare Nachricht, während die In-Memory-Projekt, sodass eine fehlgeschlagene Anfrage niemals Arbeit verliert.

Nebenläufigkeit und bewährte Verfahren

Wenn mehrere Personen dieselbe Seite bearbeiten können, füge eine Version hinzu oder updated_at Überprüfe den Server und lehne veraltete Schreibungen ab, anstatt still zu überschreiben. Immer Authentifiziere die Filialroute. Speichere das vollständige Projekt plus gerenderte HTML/CSS-Seiten Bediene schnell und öffne dich trotzdem wieder im Editor.

Nächste Schritte

Siehe backend-spezifische Verdrahtung in der Laravel, Django, und Express-/Node-Guides , durchstöbern Storage Adapter Plugins oder starten Sie bei den GJS.Market-Startseite.

FAQ

Wie speichert der Storage Manager im Backend?

Setzen type: 'remote' mit options.remote.urlStore und urlLoad; GrapesJS POSTs/GETs das Projekt-JSON, optional mit Auth Überschriften.

Wie steuere ich das automatische Speichern?

Verwendung autosave: true mit stepsBeforeSave, oder setze autosave: false Und ruf dich selbst an editor.store() .

Kann ich einen individuellen Adapter schreiben?

Ja – editor.Storage.add('name', { load, store }) und setzen storageManager.type zu diesem Namen.