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

GrapesJS Svelte साथ क्यों जोड़ा

GrapesJS एक फ्रेमवर्क-अज्ञेयवादी, एमआईटी-लाइसेंस प्राप्त ड्रैग-एंड-ड्रॉप बिल्डर है, इसलिए यह रैपर लाइब्रेरी के बिना SvelteKit ऐप में चला जाता है। सम्मान करने का एकमात्र नियम यह है कि GrapesJS को DOM की आवश्यकता है - इसे ब्राउज़र में चलना चाहिए, न कि दौरान सर्वर-साइड रेंडरिंग। Svelte का onMount जीवनचक्र ऐसा बनाता है तुच्छ: यह केवल क्लाइंट पर फायर करता है, जो कि ठीक वहीं है जहां संपादक है।

यह मार्गदर्शिका उत्पादन-तैयार सेटअप को कवर करती है: संपादक को सुरक्षित रूप से स्थापित करें, माउंट करें, अपने बैकएंड पर सामग्री बनाए रखें, और स्वच्छ HTML और CSS निर्यात करें।

1. GrapesJS स्थापित करें

npm install grapesjs

कोई Svelte-विशिष्ट एडाप्टर की आवश्यकता नहीं है। आप बाद में प्रीसेट जोड़ सकते हैं (उदाहरण के लिए grapesjs-preset-webpage या GJS.Market से प्लगइन्स) एक बार कोर एडिटर चलता है।

2. संपादक क्लाइंट-साइड को माउंट करें

एक मार्ग बनाएं, उदा. src/routes/editor/+page.svelteबाइंड ए कंटेनर तत्व, फिर GrapesJS अंदर onMount और इसके टियरडाउन को लौटाएं ताकि नेविगेशन पर उदाहरण नष्ट हो जाए।

<script>
  import { onMount } from 'svelte';
  import grapesjs from 'grapesjs';
  import 'grapesjs/dist/css/grapes.min.css';

  let container;       // bound to the editor div
  let editor;          // GrapesJS instance

  onMount(() => {
    editor = grapesjs.init({
      container,
      height: '100vh',
      fromElement: false,
      storageManager: false, // we wire storage manually in step 3
      components: '<h1>Hello from GrapesJS</h1>',
      style: 'h1 { font-family: sans-serif; }',
    });

    // Clean up listeners + DOM when the component unmounts.
    return () => editor?.destroy();
  });
</script>

<div bind:this={container}></div>

क्योंकि onMount सर्वर पर कभी नहीं चलता है, संपादक बनाया जाता है केवल ब्राउज़र में - कोई एसएसआर त्रुटियां नहीं, नहीं window is not defined।

3. अपने बैकएंड पर सामग्री बनाए रखें

सबसे सरल तरीका एक सेव बटन है जो वर्तमान दस्तावेज़ को पढ़ता है और इसे अपने एपीआई पर पोस्ट करें:

<script>
  async function save() {
    const payload = {
      html: editor.getHtml(),
      css: editor.getCss(),
      // Full editable project (for re-loading into the editor later):
      project: editor.getProjectData(),
    };
    await fetch('/api/pages', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
  }
</script>

<button on:click={save}>Save</button>

स्वचालित बचत पसंद करते हैं? इसके बजाय भंडारण प्रबंधक को कॉन्फ़िगर करें storageManager: false:

storageManager: {
  type: 'remote',
  stepsBeforeSave: 3,
  options: {
    remote: {
      urlStore: '/api/pages',
      urlLoad: '/api/pages/load',
    },
  },
}

4. निर्यात उत्पादन HTML और CSS

editor.getHtml() और वापस editor.getCss() करें स्ट्रिंग्स के रूप में प्रदान किए गए मार्कअप और शैलियाँ। जब आपको स्टैंडअलोन की आवश्यकता हो तो उन्हें संयोजित करें दस्तावेज़:

const html = editor.getHtml();
const css = editor.getCss();

const document = `<!doctype html>
<html>
  <head><style>${css}</style></head>
  <body>${html}</body>
</html>`;

सहेजे गए प्रोजेक्ट को पुनः लोड करें

संपादक में किसी पृष्ठ को फिर से खोलने के लिए, संग्रहीत प्रोजेक्ट डेटा को वापस इसके माध्यम से पास करें editor.loadProjectData(saved.project) init के बाद, या सेट projectData init कॉन्फ़िगरेशन में।

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

शुरू करने से पहले, सुनिश्चित करें कि आपके पास Node.js 18 या नया और एक SvelteKit है के साथ npm create svelte@latestबनाई गई परियोजना . आपको किसी की आवश्यकता नहीं है Svelte-विशिष्ट GrapesJS आवरण - GrapesJS ढांचा-अज्ञेयवादी है और एक के रूप में जहाज करता है सादा ES मॉड्यूल, इसलिए एक ही दृष्टिकोण SvelteKit ऐप, एक सादे Svelte में काम करता है एसपीए, या एक बड़े पृष्ठ में एम्बेडेड एक Svelte घटक। की एक बुनियादी समझ Svelte का जीवनचक्र (,onMount ) onDestroyऔर कहां का कोड रन (सर्वर बनाम ब्राउज़र) आपको बस इतना ही पालन करने की आवश्यकता है।

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

एक नंगे संपादक तब तक बहुत उपयोगी नहीं होता जब तक कि आपके उपयोगकर्ताओं के पास खींचने के लिए बिल्डिंग ब्लॉक्स न हों कैनवास पर। उन्हें तुरंत बाद ब्लॉक मैनेजर के साथ पंजीकृत करें grapesjs.init. प्रत्येक ब्लॉक एक लेबल प्लस HTML (या एक घटक है) परिभाषा) यह पृष्ठ पर आता है:

editor.BlockManager.add('hero', {
  label: 'Hero section',
  category: 'Sections',
  content: `
    <section class="hero">
      <h1>Headline</h1>
      <p>Supporting copy goes here.</p>
      <a href="#">Call to action</a>
    </section>`,
});

editor.BlockManager.add('two-cols', {
  label: 'Two columns',
  category: 'Layout',
  content: '<div class="row"><div class="cell"></div><div class="cell"></div></div>',
});

संपत्ति के साथ समूह संबंधित ब्लॉक ताकि category पैनल बना रहे संगठित, और GJS.Market से तैयार ब्लॉक पुस्तकालयों और प्रीसेट तक पहुंचें जब आप हर ब्लॉक को हाथ से बनाए बिना एक समृद्ध शुरुआत सेट चाहते हैं।

एक वास्तविक बैकएंड (डीप-डाइव) के लिए बने रहना

SvelteKit ऐप में सेव प्राप्त करने के लिए प्राकृतिक स्थान एक है +server.js समापन बिंदु। स्टोरेज मैनेजर को इसमें वायर करें और अपना भेजें अनुरोध हेडर में प्रमाणीकरण टोकन:

// in grapesjs.init(...)
storageManager: {
  type: 'remote',
  autosave: true,
  stepsBeforeSave: 3,
  options: {
    remote: {
      urlStore: '/api/pages',
      urlLoad: '/api/pages',
      headers: { Authorization: `Bearer ${token}` },
    },
  },
}

// src/routes/api/pages/+server.js
import { json } from '@sveltejs/kit';

let page = {};                     // swap for your database

export async function GET() {
  return json(page);
}

export async function POST({ request }) {
  page = await request.json();     // the full GrapesJS project
  return json({ status: 'ok' });
}

पूर्ण नियंत्रण के लिए आप रिमोट के बजाय एक कस्टम स्टोरेज एडाप्टर पंजीकृत कर सकते हैं प्रीसेट — तब उपयोगी होता है जब आपको आशावादी यूआई, ऑफ़लाइन कतारों या गैर-एचटीटीपी स्टोर की आवश्यकता होती है:

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

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

GrapesJS एक बड़ी निर्भरता है, इसलिए इसे केवल वहीं लोड करें जहां इसकी आवश्यकता हो। आयात करना यह गतिशील रूप से अंदर ( onMount )await import('grapesjs') इसे आपके मुख्य बंडल से बाहर रखता है और सर्वर रेंडर पथ से बाहर रखता है। हमेशा फाड़ें संपादक नीचे जब editor.destroy() घटक अनमाउंट करता है - SvelteKit के क्लाइंट-साइड नेविगेशन के दौरान एक लीक इंस्टेंस अपने श्रोताओं को रखता है और DOM नोड्स जीवित हैं, और वे जमा होते हैं। ट्यून stepsBeforeSave करें ऑटोसेव हर छोटे बदलाव पर फायरिंग नहीं कर रहा है, और आलसी-लोड भारी प्लगइन्स केवल तभी होते हैं जब एक उपयोगकर्ता वास्तव में उस सुविधा को खोलता है जिसकी उन्हें आवश्यकता होती है।

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

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

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

"दस्तावेज़ परिभाषित नहीं है" का अर्थ है GrapesJS SSR के दौरान चलाया गया — चाल आयात और init अंदर । onMountकैनवास अनस्टाइल दिखने का मतलब है कि स्टाइलशीट आयात गायब है; आगे कहना import 'grapesjs/dist/css/grapes.min.css'. संपादक है blank का आमतौर पर मतलब है कि कंटेनर तत्व अभी तक बाध्य नहीं था जब init भाग गया - इसे इसके साथ bind:this बांधें और init में onMount. 413 के साथ बचत विफल हो जाती है जिसका अर्थ है परियोजना पेलोड आपके सर्वर की शरीर-आकार सीमा से अधिक है; इसे समापन बिंदु पर उठाएं।

Svelte के साथ GrapesJS का उपयोग कब करें

GrapesJS सही कॉल है जब आपको वास्तविक विज़ुअल पेज या ईमेल एम्बेड करने की आवश्यकता होती है आपके Svelte उत्पाद के अंदर बिल्डर - एक SaaS पेज एडिटर, एक CMS सतह, a न्यूज़लेटर संगीतकार — और आप संपादक, उसके भंडारण और उसके HTML के मालिक बनना चाहते हैं आउटपुट। यदि आपको केवल एक ही फ़ील्ड के अंदर समृद्ध-पाठ संपादन की आवश्यकता है, तो एक लाइटर rich-text घटक एक बेहतर फिट है। ड्रैग-एंड-ड्रॉप के साथ पूर्ण-पृष्ठ रचना के लिए लेआउट, एक स्टाइल मैनेजर, और स्वच्छ HTML/CSS निर्यात, GrapesJS आपको और भी बहुत कुछ देता है एमआईटी-लाइसेंस प्राप्त और स्व-होस्ट किए जाने के दौरान एक टेक्स्ट एडिटर की तुलना में।

SvelteKit में सामान्य नुकसान

लगभग हर टूटे हुए सेटअप के लिए तीन गलतियाँ होती हैं। सबसे पहले, अंदर के onMount बजाय मॉड्यूल के शीर्ष पर GrapesJS आयात करना - जो इसे एसएसआर के दौरान चलाता है और फेंकता हैdocument is not defined। आयात आलसी ()await import('grapesjs') को जीवनचक्र हुक के अंदर रखें। दूसरा, वापस लौटना editor.destroy()भूल जाना: SvelteKit के क्लाइंट-साइड रूटिंग के साथ घटक अक्सर फिर से माउंट हो जाता है, और लीक हुए संपादक उदाहरण श्रोताओं और स्मृति को ढेर कर देते हैं। तीसरा, स्टाइलशीट को याद करना - कैनवास के बिना grapesjs/dist/css/grapes.min.css अनस्टाइल रेंडर करता है और टूटा हुआ दिखता है। उन तीनों को ठीक करें और नेविगेशन, हॉट रीलोड और प्रोडक्शन बिल्ड में एकीकरण स्थिर है।

अगले चरण

एक बार जब कोर एडिटर चल जाए, तो इसे ब्लॉक और प्लगइन्स के साथ बढ़ाएं। संबंधित देखें React में GrapesJS के लिए फ्रेमवर्क गाइड और Vue में GrapesJS , तैयार ब्राउज़ करें प्लगइन्स और टेम्प्लेट GrapesJS करें, या संपादक का प्रयास करें सीधे GJS.Market होम पेज से।

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

क्या GrapesJS SvelteKit सर्वर-साइड रेंडरिंग के साथ काम करता है?

हाँ। GrapesJS DOM की जरूरत है, इसलिए इसे अंदर onMountमाउंट करें, जो केवल ब्राउज़र में चलता है। इसके आस-पास का मार्ग अभी भी सर्वर-रेंडर किया जा सकता है; केवल संपादक इंस्टेंस केवल क्लाइंट है।

मैं GrapesJS सामग्री को Svelte ऐप में कैसे सहेजूँ?

प्रोजेक्ट डेटा पोस्ट करने के लिए type: 'remote' संग्रहण प्रबंधक का उपयोग करें आपका बैकएंड, या पढ़ें editor.getHtml() और editor.getCss() एक सेव बटन पर और उन्हें स्वयं भेजें।

क्या मुझे अनमाउंट पर संपादक को नष्ट करने की आवश्यकता है?

हाँ। इतनी GrapesJS से लौटें editor.destroy() onMount क्लाइंट-साइड नेविगेशन के दौरान अपने श्रोताओं और DOM नोड्स को हटाता है, जिससे रोका जा सकता है स्मृति लीक।