GrapesJS को एस्ट्रो ऐप में कैसे एकीकृत करें (पूरी गाइड 2026)

GrapesJS एस्ट्रो में क्यों फिट बैठता है

एस्ट्रो डिफ़ॉल्ट रूप से शून्य JavaScript शिप करता है और आपको क्लाइंट-साइड कोड में ऑप्ट इन करने देता है प्रति घटक। GrapesJS केवल ब्राउज़र संपादक है, इसलिए आप इसे क्लाइंट में लोड करते हैं स्क्रिप्ट और एस्ट्रो एपीआई एंडपॉइंट के माध्यम से सहेजें। यह मार्गदर्शिका संपादक को माउंट करती है, सामग्री बनी रहती है, और HTML/CSS निर्यात करती है।

1. संपादक को क्लाइंट स्क्रिप्ट में माउंट करें

बनाएँ src/pages/editor.astro। <script> रन ब्राउज़र में, इसलिए वहां GrapesJS आयात करना सुरक्षित है।

---
// src/pages/editor.astro
---
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet" />
<div id="gjs"><h1>Edit me in GrapesJS</h1></div>

<script>
  import grapesjs from 'grapesjs';

  const editor = grapesjs.init({
    container: '#gjs',
    height: '100vh',
    fromElement: true,
    storageManager: {
      type: 'remote',
      stepsBeforeSave: 3,
      options: { remote: { urlStore: '/api/page', urlLoad: '/api/page' } },
    },
  });
</script>

2. एक एस्ट्रो एपीआई एंडपॉइंट जोड़ें

बनाएँ src/pages/api/page.ts। SSR समापन बिंदु HTTP-विधि निर्यात करें कार्य।

import type { APIRoute } from 'astro';
import { loadPage, savePage } from '../../lib/store';

export const GET: APIRoute = async () => {
  return new Response(JSON.stringify(await loadPage('home')), {
    headers: { 'Content-Type': 'application/json' },
  });
};

export const POST: APIRoute = async ({ request }) => {
  const data = await request.json();
  await savePage('home', data);   // your DB / KV write
  return new Response(JSON.stringify({ status: 'ok' }));
};

SSR एडाप्टर ( याoutput: 'server' in 'hybrid' ) सक्षम करें astro.config.mjs) इसलिए POST को अनुरोध समय पर संभाला जाता है।

3. अंतिम मार्कअप निर्यात करें

const html = editor.getHtml();
const css = editor.getCss();
// Persist or render: `<style>${css}</style>${html}`

एस्ट्रो में आम नुकसान

एस्ट्रो का शून्य-जेएस डिफ़ॉल्ट याद रखने वाली बात है। संपादक को क्लाइंट-साइड चलाना चाहिए - एक सादा <script> टैग या एक फ्रेमवर्क द्वीप के साथ; client:onlyफ्रंटमैटर (सर्वर संदर्भ) में GrapesJS आयात करना विफल हो जाएगा। बचत के लिए रनटाइम की आवश्यकता होती है: एक पूरी तरह से स्थिर बिल्ड एक पोस्ट को स्वीकार नहीं कर सकता है, इसलिए स्टोरेज मैनेजर को वायरिंग /api/pageकरने से पहले सेट या output: 'server' एसएसआर 'hybrid' एडाप्टर के साथ सेट करें। और संपादक मार्ग को किसी भी प्रीरेंडर सूची से बाहर रखें - आप चाहते हैं कि यह मांग पर प्रस्तुत किया जाए, निर्माण समय पर जमे हुए नहीं।

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

आपको Node.js 18+ और एक एस्ट्रो 4 प्रोजेक्ट की आवश्यकता होगी। रनटाइम पर सेव स्वीकार करने के लिए आप एक एसएसआर एडाप्टर भी चाहते हैं (output: 'server' या ). 'hybrid' कोई एस्ट्रो-विशिष्ट GrapesJS पैकेज मौजूद नहीं है - संपादक ब्राउज़र में एक के माध्यम से चलता है क्लाइंट स्क्रिप्ट या एक फ्रेमवर्क द्वीप, और एस्ट्रो एंडपॉइंट दृढ़ता को संभालते हैं।

संपादक में कस्टम ब्लॉक जोड़ें

अपने क्लाइंट स्क्रिप्ट के अंदर के बाद grapesjs.init ब्लॉक प्रबंधक के साथ खींचने योग्य ब्लॉक पंजीकृत करें:

editor.BlockManager.add('hero', {
  label: 'Hero section',
  category: 'Sections',
  content: '<section class="hero"><h1>Headline</h1><p>Copy</p></section>',
});

एक समृद्ध सेट के लिए तैयार ब्लॉक पुस्तकालयों और प्रीसेट को GJS.Market से खींचें।

भंडारण गहरा-गोता: एक कस्टम एडाप्टर

एक कस्टम स्टोरेज एडाप्टर प्रोजेक्ट को आपके Astro API एंडपॉइंट पर पोस्ट करता है:

editor.Storage.add('astro-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: storageManager: { type: 'astro-store' }

संपादक मार्ग को किसी भी प्रीरेंडर सूची से बाहर रखें ताकि यह मांग पर प्रदान किया जाए, निर्माण समय पर जमे हुए न हो।

प्रदर्शन युक्तियाँ

एस्ट्रो डिफ़ॉल्ट रूप से शून्य जेएस जहाज करता है, इसलिए संपादक का वजन ऑप्ट-इन होता है - इसे केवल लोड करें क्लाइंट स्क्रिप्ट या client:only द्वीप के माध्यम से संपादक मार्ग। कोड-विभाजन भारी प्लगइन्स। क्योंकि साइट के बाकी हिस्से स्थिर रहते हैं, आपके सार्वजनिक पृष्ठ बने रहते हैं एक व्यवस्थापक मार्ग के पीछे एक भारी संपादक के साथ भी तेज़।

सुरक्षा के मनन

लिखने से पहले POST समापन बिंदु को प्रमाणित और अधिकृत करें - एक स्थिर-भावना वाली साइट अभी भी एक संरक्षित सेव रूट की जरूरत है. अगर गैर-एडमिन कर सकते हैं तो आउटपुट पर स्टोर किए गए मार्कअप को सैनिटाइज़ करें संपादित करें। पेलोड आकार को मान्य करें ताकि एक बड़ी परियोजना मेमोरी को समाप्त न कर सके।

सामान्य त्रुटियों का समस्या निवारण

फ्रंटमैटर में आयात त्रुटि का अर्थ है कि आपने GrapesJS में आयात किया है सर्वर संदर्भ - इसे क्लाइंट <script> या ए में रखें client:only टापू। पोस्ट 404 या आमतौर पर विफल रहता है इसका मतलब है कि कोई एसएसआर एडाप्टर नहीं है; पर स्विच output: 'server' करें या 'hybrid'. एक अनस्टाइल या खाली कैनवास का अर्थ है स्टाइलशीट लोड नहीं हुई या कंटेनर मौजूद नहीं था।

एस्ट्रो के साथ GrapesJS का उपयोग कब करें

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

अगले चरण

संबंधित GrapesJS + Svelte देखें और GrapesJS + React गाइड के लिए, ब्राउज़ करें GrapesJS मार्केटप्लेस, या से शुरू करें GJS.Market होम पेज।

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

क्या GrapesJS एस्ट्रो द्वीप में काम करता है?

हाँ - क्लाइंट-साइड <script> या फ्रेमवर्क द्वीप का उपयोग करें client:only तो GrapesJS ब्राउज़र में चलता है।

मैं एस्ट्रो में GrapesJS सामग्री कैसे सहेजूं?

निर्यात में src/pages/api POST एक एपीआई समापन बिंदु जोड़ें और स्टोरेज मैनेजर को प्रोजेक्ट JSON को पोस्ट करने के लिए कहें।

क्या मुझे सेव एंडपॉइंट के लिए एडाप्टर की आवश्यकता है?

हाँ - रनटाइम पर POST को संभालने के लिए SSR एडाप्टर की आवश्यकता होती है ( याoutput: 'server' ); 'hybrid'एक पूरी तरह से स्थिर निर्माण लेखन स्वीकार नहीं कर सकता।