GrapesJS Django क्यों फिट बैठता है
GrapesJS केवल ब्राउज़र, एमआईटी-लाइसेंस प्राप्त संपादक है, इसलिए Django की भूमिका बस संपादक टेम्पलेट की सेवा करें और दो समापन बिंदुओं को उजागर करें - एक सहेजे गए को लोड करने के लिए प्रोजेक्ट और इसे स्टोर करने के लिए एक। यह मार्गदर्शिका एक कार्यशील सेटअप बनाती है: एक टेम्पलेट जो संपादक को होस्ट करता है, एक ऐसा दृश्य जो CSRF सुरक्षा के साथ सामग्री को बनाए रखता है, और एचटीएमएल/सीएसएस निर्यात।
1. संपादक को टेम्पलेट में प्रस्तुत करें
बनाएँ templates/editor.html। Django एक सेट करता है csrftoken
कुकी स्वचालित रूप से; हम इसे सहेजने के अनुरोध के लिए JavaScript में पढ़ते हैं।
{% 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. रिमोट स्टोरेज के साथ GrapesJS आरंभ करें
में static/js/editor.js, CSRF कुकी पढ़ें और कॉन्फ़िगर करें
स्टोरेज मैनेजर को 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. मॉडल, दृश्य और URL जोड़ें
प्रोजेक्ट को एक मॉडल पर JSON के रूप में स्टोर करें:
# 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),
]क्योंकि अनुरोध में हेडर होता है X-CSRFToken ,
CsrfViewMiddleware आपके द्वारा CSRF को अक्षम किए बिना POST को स्वीकार करता है।
4. निर्यात किए गए पृष्ठ को प्रस्तुत करें
<style>{{ page.css|safe }}</style>
{{ page.html|safe }}संग्रहीत मार्कअप |safe को केवल तभी चिह्नित करें जब आपके संपादकों पर भरोसा किया जाए;
अन्यथा आउटपुट पर सैनिटाइज करें।
Django में आम नुकसान
दो मुद्दे अधिकांश Django एकीकरण को ट्रिप करते हैं। पहला CSRF है: यदि आप सेट करते CSRF_COOKIE_HTTPONLY = Trueहैं, तो JavaScript कुकी नहीं csrftoken पढ़ सकते हैं, इसलिए X-CSRFToken हेडर खाली है और POST को अस्वीकार कर दिया जाता है - इसे पठनीय रखें, या टोकन को टेम्पलेट में प्रस्तुत करें। दूसरा भंडारण प्रकार है: पूर्ण प्रोजेक्ट के लिए a का JSONField उपयोग करें, न कि आप TextField हाथ से पार्स करते हैं, इसलिए डेटा संपादक में बिल्कुल फिर से लोड होता है। उत्पादन में, संपादक के स्थैतिक editor.js को भी एकत्र collectstatic किया जाना चाहिए और परोसा जाना चाहिए (WhiteNoise या एक CDN), या पृष्ठ GrapesJS लोड होता है लेकिन इसे कभी भी प्रारंभ नहीं करता है।
आवश्यक शर्तें
आपको पायथन 3.10+ और Django 4 या 5 प्रोजेक्ट की आवश्यकता होगी। Node.js वैकल्पिक है - लोड एक टेम्पलेट में सीडीएन से GrapesJS , या इसे अपने एसेट टूलचेन के साथ बंडल करें। वहाँ कोई Django-विशिष्ट GrapesJS पैकेज नहीं है; संपादक ब्राउज़र में चलता है और बात करता है HTTP पर आपके विचारों के लिए, इसलिए टेम्प्लेट, दृश्य, URL और Django के साथ परिचित सीएसआरएफ कुकी आपको बस चाहिए।
संपादक में कस्टम ब्लॉक जोड़ें
इसके बाद grapesjs.initब्लॉक मैनेजर के साथ ड्रैग करने योग्य बिल्डिंग ब्लॉक्स पंजीकृत करें:
editor.BlockManager.add('hero', {
label: 'Hero section',
category: 'Sections',
content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});एक समृद्ध शुरुआती सेट के लिए तैयार ब्लॉक पुस्तकालयों और GJS.Market से प्रीसेट तक पहुंचें।
भंडारण गहरा-गोता: एक कस्टम एडाप्टर
रिमोट प्रीसेट सबसे तेज़ पथ है, लेकिन एक कस्टम स्टोरेज एडाप्टर आपको देता है परियोजना को कैसे लोड और सहेजा जाता है, इस पर पूर्ण नियंत्रण - आशावादी यूआई के लिए आसान या गैर-मानक स्टोर:
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' }प्रोजेक्ट को एक में JSONField स्टोर करें ताकि यह संपादक में बिल्कुल फिर से लोड हो जाए।
प्रदर्शन युक्तियाँ
संपादक के JavaScript को केवल संपादक पृष्ठ पर परोसें और इसे स्थगित करें ताकि यह कभी न हो
पहले पेंट को ब्लॉक करता है। प्रकाशित पृष्ठ को कैश करें (Django का कैश फ्रेमवर्क या CDN)
और सहेजने पर अमान्य करें। उत्पादन में संपादक की स्थिर फाइलों को एकत्र किया जाना चाहिए
द्वारा और collectstatic WhiteNoise या एक CDN द्वारा सेवा की, या पृष्ठ लोड
GrapesJS लेकिन कभी भी आरंभ नहीं करता है।
सुरक्षा के मनन
CSRF सुरक्षा चालू रखें और हेडर में X-CSRFToken टोकन भेजें।
सेव व्यू login_required को सुरक्षित रखें और एक अनुमति जांच करें
केवल अधिकृत उपयोगकर्ता ही किसी पृष्ठ को अधिलेखित कर सकते हैं. संग्रहीत मार्कअप |safe को चिह्नित करें
केवल तभी जब संपादकों पर भरोसा किया जाता है - अन्यथा इसे आउटपुट पर साफ करें। अनुरोध को कैप करें
शरीर का आकार इसलिए एक बड़े आकार की परियोजना स्मृति को समाप्त नहीं कर सकती है।
सामान्य त्रुटियों का समस्या निवारण
403 निषिद्ध (सीएसआरएफ) का अर्थ है csrftoken कि कुकी है
अपठनीय (अक्सर) CSRF_COOKIE_HTTPONLY = Trueया हेडर है
लुप्त। एक अनस्टाइल कैनवास का मतलब है कि GrapesJS स्टाइलशीट नहीं थी
भार। एक खाली संपादक का मतलब है कि कंटेनर चयनकर्ता कुछ भी मेल नहीं खाता है।
413 का मतलब है कि प्रोजेक्ट पेलोड आपके सर्वर की बॉडी सीमा से अधिक है।
Django के साथ GrapesJS का उपयोग कब करें
GrapesJS तब फिट बैठता है जब आपके Django ऐप को एम्बेडेड विज़ुअल पेज या ईमेल बिल्डर की आवश्यकता होती है आपके उपयोगकर्ता नियंत्रण, आपके अपने मॉडल द्वारा समर्थित और आपके बुनियादी ढांचे से सेवा प्रदान करते हैं। एक ही फ़ील्ड में इनलाइन समृद्ध पाठ के लिए, एक हल्का WYSIWYG पर्याप्त है; पूरे पृष्ठ के लिए लेआउट, स्टाइलिंग और स्वच्छ HTML/CSS निर्यात के साथ रचना, GrapesJS है मजबूत, एमआईटी-लाइसेंस प्राप्त, स्व-होस्टेड विकल्प।
अगले चरण
ब्लॉक और प्लगइन्स के साथ संपादक का विस्तार करें। संबंधित देखें GrapesJS + React गाइड, ब्राउज़ करें स्टोरेज एडाप्टर प्लगइन्स और पूर्ण GrapesJS मार्केटप्लेस करें, या GJS.Market होम पेज।
अक्सर पूछे जाने वाले प्रश्न
मैं GrapesJS सामग्री को Django बैकएंड में कैसे सहेजूं?
संग्रहण प्रबंधक को कॉन्फ़िगर type: 'remote' करें और बिंदु
urlStoreurlLoad Django URL पर। CSRF टोकन भेजें
X-CSRFToken हेडर, फिर प्रोजेक्ट JSON को एक मॉडल फ़ील्ड में स्टोर करें।
मुझे प्रोजेक्ट डेटा कहाँ संग्रहीत करना चाहिए?
पूर्ण प्रोजेक्ट के लिए ए का JSONField उपयोग करें ताकि यह संपादक में फिर से लोड हो जाए
बिल्कुल, साथ ही प्रकाशन के लिए वैकल्पिक HTML/CSS टेक्स्ट फ़ील्ड।
मैं CSRF टोकन को GrapesJS से Django में कैसे भेजूं?
JavaScript में कुकी पढ़ें csrftoken और इसे इस रूप में पास करें
X-CSRFToken संग्रहण प्रबंधक headers के विकल्प में हेडर.