Warum GrapesJS zu Django passt
GrapesJS ist ein browserfreier, MIT-lizenzierter Editor, daher besteht Djangos Rolle einfach darin, Bereite die Editor-Vorlage und stelle zwei Endpunkte bereit – einen, um die gespeicherten Endpunkte zu laden Projektieren und eine, um es zu speichern. Dieser Leitfaden erstellt ein funktionierendes Setup: eine Vorlage, die hostet den Editor, eine Ansicht, die Inhalte mit CSRF-Schutz aufbewahrt, und HTML/CSS-Export.
1. Den Editor in einer Vorlage rendern
Erstellen templates/editor.htmlSie . Django setzt ein csrftoken
Cookie automatisch; wir lesen sie in JavaScript für die Speicheranfrage.
{% load static %}
<!doctype html>
<html>
<head>
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
</head>
<body>
<div id="gjs"><h1>Edit me in GrapesJS</h1></div>
<script src="https://unpkg.com/grapesjs"></script>
<script src="{% static 'js/editor.js' %}"></script>
</body>
</html>2. Initialisieren Sie GrapesJS mit Fernspeicher
In static/js/editor.js, lesen Sie das CSRF-Cookie und konfigurieren Sie das
Storage Manager zu POST zu Django.
function getCookie(name) {
const match = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
return match ? match.pop() : '';
}
const editor = grapesjs.init({
container: '#gjs',
height: '100vh',
fromElement: true,
storageManager: {
type: 'remote',
stepsBeforeSave: 3,
options: {
remote: {
urlStore: '/editor/save/',
urlLoad: '/editor/load/',
headers: { 'X-CSRFToken': getCookie('csrftoken') },
},
},
},
});3. Fügen Sie Modell, Ansichten und URLs hinzu
Speichere das Projekt als JSON auf einem Modell:
# models.py
from django.db import models
class Page(models.Model):
key = models.SlugField(unique=True, default="home")
project = models.JSONField(default=dict) # full editable project
html = models.TextField(blank=True)
css = models.TextField(blank=True)# views.py
import json
from django.http import JsonResponse
from django.shortcuts import render
from .models import Page
def editor(request):
return render(request, "editor.html")
def load(request):
page, _ = Page.objects.get_or_create(key="home")
return JsonResponse(page.project, safe=False)
def save(request):
data = json.loads(request.body or "{}")
Page.objects.update_or_create(
key="home",
defaults={
"project": data,
"html": data.get("gjs-html", ""),
"css": data.get("gjs-css", ""),
},
)
return JsonResponse({"status": "ok"})# urls.py
from django.urls import path
from . import views
urlpatterns = [
path("editor/", views.editor),
path("editor/load/", views.load),
path("editor/save/", views.save),
]Da die Anfrage den X-CSRFToken Header trägt,
CsrfViewMiddleware Akzeptiert das POST, ohne dass du CSRF deaktivierst.
4. Rendern Sie die exportierte Seite
<style>{{ page.css|safe }}</style>
{{ page.html|safe }}Markieren Sie gespeichertes Markup |safe nur, wenn Ihren Editoren vertraut wird;
Sonst desinfizieren Sie die Ausgabe.
Häufige Fallstricke in Django
Zwei Probleme bringen die meisten Django-Integrationen ins Stocken. Das erste ist CSRF: Wenn du setzt CSRF_COOKIE_HTTPONLY = True, kann JavaScript den csrftoken Cookie nicht lesen, sodass der X-CSRFToken Header leer ist und der POST abgelehnt wird – halte ihn lesbar oder rendere das Token in die Vorlage. Der zweite ist Speichertyp: Nutze A JSONField für das komplette Projekt, nicht ein TextField manuelles Parse, damit die Daten exakt in den Editor geladen werden. In der Produktion muss das statische Signal editor.js des Editors ebenfalls von collectstatic WhiteNoise oder einem CDN erfasst und bereitgestellt werden, sonst lädt die Seite GrapesJS, initialisiert es jedoch nie.
Voraussetzungen
Du brauchst Python 3.10+ und ein Django 4 oder 5 Projekt. Node.js ist optional – laden GrapesJS aus einem CDN in einer Vorlage oder bündeln Sie es mit Ihrer Asset-Toolchain. Da ist kein Django-spezifisches GrapesJS-Paket; Der Editor läuft im Browser und spricht zu deinen Ansichten über HTTP, also Vertrautheit mit Vorlagen, Ansichten, URLs und Djangos CSRF-Kekse sind alles, was du brauchst.
Fügen Sie benutzerdefinierte Blöcke zum Editor hinzu
Registrieren Sie ziehbare Bausteine mit dem Blockmanager nach grapesjs.init:
editor.BlockManager.add('hero', {
label: 'Hero section',
category: 'Sections',
content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});Greifen Sie zu fertigen Blockbibliotheken und Presets aus GJS.Market für ein reichhaltigeres Startset.
Storage Deep-Dive: ein maßgeschneiderter Adapter
Das Remote-Preset ist der schnellste Weg, aber ein individueller Speicheradapter bietet dir volle Kontrolle darüber, wie das Projekt geladen und gespeichert wird – praktisch für eine optimistische Benutzeroberfläche oder nicht-standardisierte Geschäfte:
function getCookie(name) {
const m = document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)');
return m ? m.pop() : '';
}
editor.Storage.add('django-store', {
async load() {
const res = await fetch('/editor/load/');
return res.ok ? res.json() : {};
},
async store(data) {
await fetch('/editor/save/', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-CSRFToken': getCookie('csrftoken') },
body: JSON.stringify(data),
});
},
});
// then: storageManager: { type: 'django-store' }Speichere das Projekt in einem JSONField Bereich, damit es genau im Editor neu geladen wird.
Aufführungstipps
Geben Sie das JavaScript des Editors nur auf der Editor-Seite bereit und verschieben Sie es, damit es niemals passiert
Blockt zuerst malen. Cache die veröffentlichte Seite (Djangos Cache-Framework oder ein CDN)
und beim Speichern ungültig machen. In der Produktion müssen die statischen Dateien des Editors gesammelt werden
von collectstatic und bedient von WhiteNoise oder einem CDN, oder die Seite lädt
GrapesJS, aber es initialisiert nie.
Sicherheitsaspekte
Lass den CSRF-Schutz aktiviert und schicke das Token in den X-CSRFToken Header.
Schützen Sie die Speicheransicht mit login_required einer Berechtigungsprüfung
Nur autorisierte Benutzer können eine Seite überschreiben. Mark-Stored Markup |safe
Nur wenn Redakteuren vertraut werden – ansonsten desinfizieren Sie es bei der Ausgabe. Decke die Anfrage
Körpergröße, sodass ein übergroßes Projekt das Gedächtnis nicht erschöpfen kann.
Fehlerbehebung häufiger Fehler
403 Verboten (CSRF) bedeutet, dass der csrftoken Cookie
unlesbar (oft) CSRF_COOKIE_HTTPONLY = Trueoder der Header ist
vermisst. Eine ungestylte Leinwand bedeutet, dass das GrapesJS-Stylesheet es nicht tat
Laden. Ein leerer Editor bedeutet, dass der Container-Selektor mit nichts übereinstimmt hat.
413 bedeutet, dass die Projektnutzlast das Body-Limit deines Servers überschreitet.
Wann man GrapesJS mit Django verwenden sollte
GrapesJS passt, wenn Ihre Django-App eine eingebettete visuelle Seite oder einen E-Mail-Builder benötigt, wenn Ihre Django-App eine eingebettete visuelle Seite oder einen E-Mail-Builder benötigt Ihre Benutzerkontrolle, unterstützt von Ihren eigenen Modellen und bereitgestellt von Ihrer Infrastruktur. Für Inline-Rich Text in einem einzelnen Feld reicht ein leichteres WYSIWYG aus; für ganzseitige Komposition mit Layout, Styling und sauberem HTML/CSS-Export, GrapesJS ist das stärkere, MIT-lizenzierte, selbstgehostete Wahl.
Nächste Schritte
Erweitere den Editor mit Blöcken und Plugins. Siehe die verwandte GrapesJS + React Leitfaden, durchstöbern Speicheradapter-Plugins und die vollständigen GrapesJS-Marktplatz oder starte mit dem GJS.Market-Startseite.
FAQ
Wie speichere ich GrapesJS-Inhalte in einem Django-Backend?
Konfigurieren Sie den Storage Manager mit type: 'remote' und Point
urlStore/urlLoad bei Django URLs. Senden Sie das CSRF-Token ein
den X-CSRFToken Header, dann das Projekt-JSON in einem Modellfeld zu speichern.
Wo sollte ich die Projektdaten speichern?
Nutze A JSONField für das vollständige Projekt, damit es im Editor neu geladen wird
Genau, plus optionale HTML/CSS-Textfelder zum Veröffentlichen.
Wie sende ich das CSRF-Token von GrapesJS an Django?
Lesen Sie das Cookie csrftoken in JavaScript und geben Sie es als das
X-CSRFToken Header in der headers Option des Storage Managers.