GrapesJS स्टोरेज मैनेजर: बैकएंड में सहेजना (2026)

स्टोरेज मैनेजर क्या करता है

GrapesJS स्टोरेज मैनेजर संपादक के प्रोजेक्ट डेटा को बनाए रखता है - पूर्ण, पृष्ठ का पुन: लोड करने योग्य प्रतिनिधित्व। सबसे सरल उत्पादन सेटअप है remote भंडारण आपके बैकएंड की ओर इशारा करता है; पूर्ण नियंत्रण के लिए आप कर सकते हैं एक कस्टम एडाप्टर पंजीकृत करें।

1. रिमोट स्टोरेज

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 POST परियोजना को लोड urlStore करता है और इसे लोड करता है urlLoad. जरूरत पड़ने पर यहां फ्रेमवर्क CSRF हेडर जोड़ें।

2. ऑटोसेविंग के बजाय मैन्युअल रूप से सहेजें

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

3. एक पूरी तरह से कस्टम भंडारण एडाप्टर

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' },
});

उत्पादन युक्तियाँ

वास्तविक उपयोग के लिए ट्यून सेविंग करें। stepsBeforeSave नियंत्रित करता है कि कैसे बातूनी ऑटोसेव है - बहुत कम है और आप हर कीस्ट्रोक जैसे परिवर्तन पर अपने एपीआई को हथौड़ा करते हैं; 3-5 का मान आमतौर पर सही होता है, या मैन्युअल सेव बटन पर स्विच करें। विकल्प में headers अपना प्रमाणीकरण (बियरर टोकन या सीएसआरएफ) भेजें ताकि स्टोर मार्ग सुरक्षित रहे। यदि कई लोग एक ही पृष्ठ को संपादित कर सकते हैं, तो एक संस्करण जोड़ें या updated_at सर्वर पर जांच करें और चुपचाप ओवरराइटिंग के बजाय बासी लेखन को अस्वीकार करें। और विफलता पथ को संभालें: एक दृश्यमान त्रुटि को सतह पर लाएं (और इन-मेमोरी प्रोजेक्ट को रखें) जब कोई सेव अनुरोध विफल हो जाता है, तो काम खो नहीं जाता है।

आवश्यक शर्तें

आपको एक रनिंग GrapesJS एडिटर और एक बैकएंड एंडपॉइंट (कोई भी भाषा) चाहिए। भंडारण प्रबंधक संपादक के प्रोजेक्ट डेटा को बनाए रखता है - पूर्ण, पुन: लोड करने योग्य पृष्ठ का प्रतिनिधित्व - ताकि आप ठीक उसी चीज़ को फिर से खोल सकें जो सहेजा गया था।

एकाधिक पृष्ठों को संभालें

ज़्यादातर ऐप्लिकेशन एक से ज़्यादा पेज स्टोर करते हैं. अपने एंडपॉइंट पर एक आईडी पास करें और रिकॉर्ड को यह, या तो URL या कस्टम हेडर के माध्यम से:

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

त्रुटि प्रबंधन के साथ कस्टम एडाप्टर

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');
  },
});

ट्यून ऑटोसेव और सतह विफलताओं

stepsBeforeSave नियंत्रित करता है कि ऑटोसेव कितना बातूनी है - 3-5 आमतौर पर सही होता है, या एक मैनुअल सेव बटन (autosave: false + ) editor.store()का उपयोग करें। भंडारण त्रुटियों के लिए सुनें और उपयोगकर्ता को एक दृश्यमान संदेश दिखाते हुए इन-मेमोरी प्रोजेक्ट, इसलिए एक असफल अनुरोध कभी भी काम नहीं खोता है।

समवर्ती और सर्वोत्तम प्रथाएं

अगर एक ही पेज को कई लोग संपादित कर सकते हैं, तो कोई वर्शन जोड़ें या updated_at सर्वर पर जांचें और चुपचाप ओवरराइट करने के बजाय बासी लेखन को अस्वीकार करें। हमेशा स्टोर मार्ग को प्रमाणित करें। पूर्ण प्रोजेक्ट के साथ-साथ रेंडर किए गए html/css so पृष्ठों को संग्रहीत करें तेजी से परोसें और फिर भी संपादक में फिर से खोलें।

अगले चरण

में बैकएंड-विशिष्ट वायरिंग देखें लारवेल, Django, और एक्सप्रेस/नोड गाइड, ब्राउज़ करें स्टोरेज एडाप्टर प्लगइन्स, या GJS.Market होम पेज।

अक्सर पूछे जाने वाले प्रश्न

स्टोरेज मैनेजर बैकएंड में कैसे सेव करता है?

और के साथ options.remote.urlStore सेट करें type: 'remote' urlLoadGrapesJS पोस्ट/गेट्स परियोजना जेएसओएन, वैकल्पिक रूप से प्रमाणीकरण के साथ हेडर।

मैं ऑटोसेव को कैसे नियंत्रित करूं?

, या सेट के साथ प्रयोग stepsBeforeSaveकरें autosave: true autosave: false और अपने आप को बुलाओeditor.store()।

क्या मैं एक कस्टम एडाप्टर लिख सकता हूं?

हाँ - और editor.Storage.add('name', { load, store }) सेट storageManager.type उस नाम के लिए।